webo_ru

Сегодня про оптимизацию 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.

Wikipedia

data: URL

data: URL — определённая стандартом RFC 2397 схема, которая позволяет включать небольшие элементы данных в строку URL, как если бы они были ссылкой на внешний ресурс. Она гораздо проще альтернативных методов включения, таких, как MIME с cid: или mid:. Согласно…

www.tgoop.com/webo_ru/6

6.5K viewsedited  Aug 8, 2017 at 20:17

Сегодня про оптимизацию 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.

BY webo_ru