Почему мой файл SVG выглядит хуже, чем мой файл PNG?

Question

Я просматриваю свои файлы изображений и заменяю их на svg из png.Проблема в том, что теперь, когда я масштабирую или увеличиваю, например, на мобильном, изображения выглядят хуже, чем с png.

Как я понимаю, SVG - это масштабируемая векторная графика, поэтому вы должны иметь возможность масштабировать ее настолько, насколько вам нравится, без искажений.

Что ж, изображения были преобразованы из png в svg, поэтому теоретически должны выглядеть лучше, в основном при увеличении.

Здесь вы можете увидеть пример фонового изображения png на https://adsler.co.uk/jobs и svg здесь https://adsler.co.uk/dating/

Вы увидите, что в заданиях (png) изображение масштабируется довольно высоко, прежде чемискажение, но в датировке (svg) оно лишь немного увеличивает масштаб, прежде чем искажать, тогда как должно быть наоборот.

Так что я делаю не так и как исправить пожалуйста?По сути, я просто хочу, чтобы на моем сайте были кристально чистые изображения.

Что касается дальнейшей дальнейшей проверки, в Chrome это наиболее точно так, но в Firefox на мобильных устройствах она достаточно сильно масштабируется до искажения.

Затем возникают две точки.

1. Почему это вообще искажает?Он должен быть бесконечно масштабируемым.
2. Когда я увеличиваю изображение в Firefox, происходит ли какое-либо искажение просто из-за того, что мой мобильный телефон достигает максимальной производительности?

Answer 1

Проблема, с которой вы сталкиваетесь, заключается в том, что, хотя это изображение технически является SVG, тот факт, что оно началось как PNG и было преобразовано, оставило его как обертку изображения png в svg, а не как истинный вектор.

Если вы откроете его в текстовом редакторе, вы увидите, что весь контент внутри оболочки <svg> является атрибутом изображения <image id="image0" width="2160" height="3840" x="0" y="0" xlink:href="... и т. Д.

Что это означает, что он по существу будетвести себя так же, как растровое изображение, а не векторная графика.

Я бы посоветовал попытаться воссоздать графику как вектор, используя что-то вроде Illustrator, Sketch или Inkscape.У вас есть изображение, сохраненное в другом формате, кроме png?