Пути SVG выглядят не очень четкими
Посмотрите на следующее изображение svg:
Не уверен, что не замечаю этого, но линии мне не кажутся слишком резкими. Особенно если изображение меньше.
Есть ли способ сделать линии более резкими, чем это? Я думаю, что, поскольку это векторное изображение, оно должно выглядеть более резким.
Вот скриншот, как мне кажется, если изображение меньше:
Ответы 2
Если я посмотрю на ваш .svg с помощью Inkscape, я могу увеличивать и уменьшать масштаб без каких-либо потерь. При увеличении 2260% верхняя «точка» из трех выглядит очень пышной. На самом левом конце у знака «плюс» находится ок. Линия шириной 1 пиксель вниз.
Насколько я понимаю в этой области, вам следует искать типографа (или кого-то, кто лучше знает шрифты), а не эксперта по векторной графике. Единственный тег "svg" здесь может вводить в заблуждение.
Пикселизация линий происходит из-за того, что видеокарта является устройством с растровой графикой (а не с векторной графикой). То же самое и с монитором. Поэтому векторное изображение необходимо преобразовать в пиксели и передать в буфер кадра видеоустройства. Таким образом пикселизация происходит несмотря ни на что. Сглаживание помогает размыть края линий. Но вы уже включили сглаживание с помощью shape-rendering: geometricprecision;
. Существует больше методов усреднения краевых пикселей, но все они (особенно новейшие) работают с растровыми данными. Об этом - обратитесь к разработчикам игровой графики за информацией.
ОБНОВИТЬ(О вашем примечании, что на меньших изображениях качество падает больше.)
Наполовину риторический вопрос: вы когда-нибудь пытались уменьшить размер изображения Моны Лизы до 1 пикселя? На этом увеличенном уровне
все изображения выглядят одинаково. Причина этого заключается в том, что чем больше мы сжимаем изображение, тем меньше пикселей остается у нас для работы, поэтому мы теряем больше деталей. Невозможно сохранить такое же качество с меньшим количеством пикселей.