Изменить svg, добиться лучшего качества текста

Изначальный код

<style>
    .uploads {
        position: absolute;
        top: 0;
        right: 0;
        border: 2px solid #fdfdfd;
        color: #fff;
        transform: translate(50%, -40%);
        background: #c00;
        padding: 2px 5px;
        border-radius: 15px;
    }
    </style>
    <span class='uploads'></div>

Вопрос в том, возможно ли добиться лучшего качества текста при меньшем font-size. Если делать это через svg?

<style>
.uploads {
    width: min-content;
    max-width: 100px;
    background: #f00;
    border: 2px solid #fdfdfd;
    border-radius: 50%;
}
</style>
<svg viewBox="0 0 35 35" class="uploads">                               
    <text x="17" y="17" text-anchor="middle" dominant-baseline="central">2322</text>
</svg>

Возможно ли не указывать viewBox, так же на блоке text не выставлять координаты x и z. Задать ширину по контенту с padding:3px; Главное, чтобы ширина была по длине текста, а высота оставалась неизменной в зависимости от изначальной высоты текста.