Поиск исследования: PNG Sprite vs SVG sprite vs Icon fonts

В настоящее время мы используем PNG для создания значков, но в качестве дизайнера я пытаюсь использовать SVG в интересах:
а. Рендеринг на сетчатке.
б. Люди с ослабленным зрением, которые увеличивают масштаб.
с. Более простой рабочий процесс при создании значков.

Существуют ли исследования, которые сравнивают 3 метода? (PNG Sprite vs SVG sprite vs Icon fonts) с точки зрения производительности?

Если нет, что и как вы могли бы сравнить их? (Например, я слышал, что SVG требует больше мощности процессора, и я не знаю, как его протестировать или какие последствия).

Спасибо большое! Вы удивительное сообщество.

Кстати, вот что я могу найти:
svgs классные, но шрифты значков - всего 10% от их размера файла
Значки шрифтов SVG +:
Iconserving - SVG или Webfont?
Десять причин, по которым мы переключились с шрифта значка на SVG

Ответ 1

Не ответ, но он не будет читаться в комментариях

PNG - растровые изображения

Итак, для рендеринга их нужно просто распаковать, которым нужна мощность процессора, но теперь это не так уж плохо.

SVG - векторные XML файлы

Это означает, что вам нужно:

прочитайте текст XML
декодировать его на векторный графический движок/класс
Изображение в векторной графике

Сложный SVG ( > 300 Мб векторный utf-8) имеет время загрузки/декодирования/рендеринга даже в минутах на быстрых машинах (при декодировании всего). Если вы декодируете только основы, вы можете сделать то же самое в секундах, но потеряли дополнительные функции.

Многие не согласятся с этим: "Проблема в том, что нет ни одной 100% -ной совместимости, простой для реализации SVG-библиотеки... по крайней мере, что я знаю", но учтите, что я не использую фреймворки или среды для WEB JAVA или PHP... Также у каждой SVG-библиотеки есть свои собственные причуды. Если вы сравниваете отображаемый SVG между различными веб-браузерами или зрителями изображений, то это не одно и то же, и многие функции не поддерживаются повсюду.

Вы можете создать собственный декодер SVG, но он немного сложный. Если вам нужны только базовые функции, такие как path и фигуры без анимаций или градиентов, то это относительно легко сделать, но если вы хотите реализовать все, что бы вы потратили на это много времени.

На какое-то время у меня возникла большая проблема с поиском хорошего бесплатного редактора SVG. Единственный "полезный", который я нашел, был Inkspace, но он медленный и немного недружелюбный по моему вкусу. С другой стороны, он может открывать практически все типы SVG, которые я использую правильно...

[Примечание]

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