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.Оптимизация web-сайтов (ведёт @vithar). Обсуждать и задавать вопросы в https://t.me/frontend_ru. English version: https://t.me/webo_en
426подписчиков сейчас
0.0цитируемость
Русскийязык
Россиягео
Подписаться в Telegram
Данные обновлены 22.07.2020
Публикации всего: 5
Сегодня про оптимизацию 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)
Я использую такой набор параметров:
Этот же канал на английском: https://t.me/webo_en
Аналогично код для определения retina экрана:
(function(w,e,s,c,x,l,p,d){c="className";x="deviceXDPI";l="logicalXDPI";p="devicePixelRatio";d=x in s&&l in s&&s[x]/s[l]||p in w&&w[p];d>1&&(e[c]+=" i-ua_retina_yes")})(window,document.documentElement,screen)
после «де-оптимизации» стал таким
(screen.deviceXDPI&&screen.logicalXDPI&&screen.deviceXDPI/screen.logicalXDPI||window.devicePixelRatio)>1&&(document.documentElement+=" i-ua_retina_yes")
Было 191 байт, стало 125.При оптимизации по размеру важно помнить, что результат, как правило, будет сжат gzip'ом и любые сравнения надо производить после сжатия.
Рассмотрим на примере.
Функция определения поддержки браузером SVG, которая выставляет класс
ua_svg_yes или ua_svg_no на <html>:
(function(d,n){d.documentElement.className="ua_svg_"+(d[n]&&d[n]("http://www.w3.org/2000/svg","svg").createSVGRect?"yes":"no")})(document,"createElementNS")
Кажется, что тут всё оптимально и сделать меньше уже нелья. Специально обернули в функцию, передали в неё повторяющиеся части, которые превратились в однобуквенные переменные.
Да, но нет. Код ниже больше по размеру (161 байт против 157), но после gzip получается меньше (126 против 154):
document.documentElement.className=document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect?"ua_svg_yes":"ua_svg_no"
Это не говоря о том, что второй пример читается гораздо проще, чем первый, на мой взгляд.Попробую формат Телеграма. Буду писать про то, что сейчас делаю в своей текущей работе по оптимизации поиска Яндекса.
Обсуждать и задавать вопросы предлагаю в https://t.me/frontend_ru
Rozetked
ВИЛСАКОМ РЕД / WYLSACOM RED
Библиотека программиста
[netstalkers]
Типичный программист
СТАС БОМБИТ
