Сегодня про оптимизацию SVG.
SVG — это текстовый формат. Важно помнить, что он при передаче по сети скорее всего будет gzip'ован. Так что все сравнения надо делать после сжатия (см. выше).
Поскольку SVG — это векторный формат и хорошо масштабируется на любых экранах, нужно выбирать его при прочих равных.
SVG можно вставлять непосредственно в DOM, как изображение в IMG или как фон. Если изображение небольшое и используется для оформления, то лучше использовать его как фон через data:uri (https://ru.wikipedia.org/wiki/Data:_URL), но не base64, а URLEncoded (https://ru.wikipedia.org/wiki/URL#Кодирование_URL). В этом случае только небольшой набор символов кодируется, а остальные остаются как есть и потом хорошо сжимаются.
Для оптимизации SVG лучше всего использовать SVGO (https://github.com/svg/svgo)
Я использую такой набор параметров:
svgo -p 2 --multipass --enable=removeDesc --enable=removeTitle --enable=sortAttrs --enable=removeViewBox --enable=removeStyleElement
Как правило, этим и ограничиваются.
Но если хочется максимального контроля над размером изображения — нужно смотреть из чего оно состоит и можно ли что-то улучшить/упростить.
Полезно знать, из чего состоят SVG изображения. Это позволяет «нарисовать» его в текстовом редакторе гораздо эффективнее, чем в графическом. Хорошие статьи про SVG на русском —
http://css.yoksel.ru/tags/#svgЕщё один вариант оптимизации, про который мало кто знает и применяет — увеличение изображения, чтобы у точек не было дробных координат.
Вот пример оптимизированного таким образом изображения:
https://yastatic.net/web4/_/BM4YHAtH2zfvUiPvyhZHMkaXw4w.svgТам же можно увидеть пример использования xlink, но не всегда это даёт наименьший размер, иногда gzip лучше, чем использование symbol.
