kaatula23 окт 2015 в 08:29

SVG-иконки – много и со стилем

14 мин

51K

CSS * HTML * Веб-разработка *

+54

Комментарии 34

ilfate 23 окт 2015 в 08:58

Вопрос такой: на сколько медленее работает SVG посравнению с PNG изображением. Да я понимаю, что вы предпочли SVG потому что вам нужно менять цвет и размер. Но всеже браузеру придется читать SVG код и отрисовывать графику. На сколько это влияет на скорость отображения на стороне клиента? А если иконок на странице много? Делали ли вы такие исследования?

kaatula 23 окт 2015 в 09:08

У нас иконок не слишком много, порядка пары десятков. На таком количестве ничего не заметили, а мерять целенаправленно — не меряли.
Год назад меряли вот тут; там, в частности, автор рассказал о том, что в ИЕ SVG сразу работает нормально, в Firefox результаты SVG-рендерёжки кэшируются и сильно не тормозят. В хроме же на тот момент кэширование было отключено, иконки пересчитывались.
Чую, что за год положение должно было измениться, но доказать не могу.

ilfate 23 окт 2015 в 09:23

Да эту статью годовой давности я тоже почтал. Но мне потребуется найти какие-то более убедительные результаты бенчмарков чтоб уговорить команду перейти на SVG иконки. А их у нас ожидается от 50 до 100 на нашем landingpage. Так что скорость очень важна.

kaatula 23 окт 2015 в 09:33

Отдал страничку с пятью сотнями котов (создающихся нокаутом)
kaatula.github.io/svg-icons/samples/hunderds-of-cats.html
На компе с восемью ядрами всё хорошо
На винфоне имеет место задержка около секунды на старте страницы — я пока не понял, то ли это создание элементов, то ли конкретно SVG. Скроллинг при этом плавный.
Сейчас ещё буду на устройствах котиков мучать…

ilfate 23 окт 2015 в 10:04

Но это же один и тот-же SVG? Просто к нему применены разные стили? Мне кажется браузер может оптимизировать использование одного и тогоже SVG и не рендерить его несколько раз. Интересно что будет если это разные изображения объединенные в такой «SVG спрайт».

kaatula 23 окт 2015 в 10:29

Тогда ещё примерчик

122 различные иконки, всего на странице 500

(исходники иконок на гитхаб класть не стал, встроил сконкатенированный и минифицированный результат непосредственно в страничку)

Иконки брал вот у этих ребят
Они простенькие и симпатичные. Бесплатные при условии атрибуции.

Evengard 23 окт 2015 в 11:01

У меня обе странички браузер прожевал даже не поперхнувшись. Моментально и без всякого напряга. Мне кажется, «тяжеловесность» для браузера SVG сильно преувеличена.

Firefox 43.0a2 (Dev Edition, или альфа)

kaatula 23 окт 2015 в 13:00

Я вот, например, порядком волнуюсь о мобильных устройствах. Но iPad, найденый в соседних кабинетах, никаких признаков утомления не показал…

Evengard 28 окт 2015 в 11:00

Firefox for Android 41.0.2, HTC One M9, аналогично десктопу прожевал даже не поморщившись.

ilfate 23 окт 2015 в 12:01

Осталось теперь для сравнения тоже самое только в PNG =)
А то не с чем сравнивать. Я покапался, вроде эти SVG рендерятся за 250ms… что довольно много, но надо сравнивать.

kaatula 23 окт 2015 в 12:59

Пожалсте :)
kaatula.github.io/svg-icons/samples/hunderds-of-pngs.html

Но мерять тут можно только dev-инструментами, я никаких метрик не добавлял…

Anisotropic 23 окт 2015 в 10:06

>инжектить
Вставлять, встраивать.

Спасибо за статью!
Во время Вы) Как раз обдумывал на проекте картинки-иконки заменить СВГшками.

kaatula 23 окт 2015 в 10:09

Вот встраивать, кстати, хорошо в контекст ложится. Спасибо :)

И я буду рад, если статья окажется полезной. С СВГ жить очень хорошо, в общем-то. Нам пока нравится.

kyrie 23 окт 2015 в 10:16

Есть умеренно грязный хак, позволяющий красить PNG-иконки — файл иконки должнен быть белым или в цвет бекграунда, с «вырезанной» по центру иконкой. Ну, как дырка в бумаге, сквозь которую видно подложку. Красим подложку, видим цвет иконки.

Не пропогандирую этот метод, там тоже куча нюансов есть, но он быстрый, кросбраузерный вплоть до 6 IE и очень простой.

kaatula 23 окт 2015 в 10:35

Согласен, такое тоже может работать.
Любой задаче — правильное решение.
Для этого решения тоже вполне бывали задачи.

Eefrit 27 окт 2015 в 19:29

Можно живой пример кода?

Evengard 28 окт 2015 в 11:09

Да чего тут особо демонстрировать, вот смотрите, за минуту сделал: jsfiddle.net/yq1rqmyd/2

pepelsbey 23 окт 2015 в 13:31

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Удалите из поста вот эту ненужну шапку SVG-файла, пока кто-то её случайно не скопировал.

kaatula 23 окт 2015 в 13:37

Эта заразу генерит gulp-плагин. Я тоже недоволен, но не настолько, чтобы вмешиваться в работу робота…
Но я согласен, в человекочитаемой статье ей не место

Anisotropic 23 окт 2015 в 15:04

«The only available option is:
inlineSvg — output only element without <?xml ?> and DOCTYPE to use inline, default: false.»

kaatula 23 окт 2015 в 15:31

Вот это я понимаю — community
Спасибо, отдал.

pepelsbey 29 окт 2015 в 07:53

Автор плагина просто неправ: этот заголовок не нужен не только для инлайна, а вообще никогда на практике

kaatula 23 окт 2015 в 15:31

princed 24 окт 2015 в 12:27

Для пользователей вебпака мы написали лоадер, который создаёт спрайт и вставляет его в DOM автоматически. На выходе из require получается uri для <use>.

kaatula 24 окт 2015 в 14:28

Моя иконка хорошо гармонируют с владельцем репозитория
Должны сработаться )

Large 4 ноя 2015 в 13:58

почему-то подход с символами не работает вместе с анимациями в хроме (на айпаде работает). Если символ заменить на группу, то проблема исчезает.

kaatula 4 ноя 2015 в 14:42

Интересно. Звучит как баг…
Я-то с анимацией, признаться, не заморачивался…

Как доберусь до рабочего компа, поэкспериментирую. Возможно, будет повод завести им бажок ~~они-то проигнорят, зато совесть будет чистая~~

kaatula 6 ноя 2015 в 07:10

Вообще, простая-простая анимация у меня заработала
kaatula.github.io/svg-icons/samples/animation.html
Не завелась, из десктопных бразуеров, только в MS Edge/IE и в старом виндовом Сафари (при этом она хотя бы стилизуется...)

А что не заработало?

Large 6 ноя 2015 в 11:08

речь шла о цсс анимациях. в ие работать и не будет, там цсс трансформации не передаются в свг а smil не поддерживается.

kaatula 6 ноя 2015 в 11:04

Промахнулся

kaatula 11 дек 2017 в 19:05

UPD через два года
Поскольку тут ещё есть люди и приходят новые, решил дописать о результатах.

Подход полностью летит на нашем рабочем проекте — веб-дизайнере дэшбоардов.

Все иконки, что вы видите на это скриншоте, добавлены на страницу при помощи описанной технологии.
Иконки готовятся в Adobe Illustrator; средствами самого иллюстратора создаются «стили», которые при экспорте в SVG становятся настоящими CSS-стилями, которые мы перебиваем своими правилами. Дизайнер делает всё своими инструментами, помощь программиста для создания иконок не нужна. То есть всё на удивление нативно вышло с дизайнерскими средствами.

Коды иконок до и после

Вот так экспортирует Adobe Illustrator:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="4 -4 24 24" style="enable-background:new 4 -4 24 24;" xml:space="preserve">
<style type="text/css">
  .dx_blue{fill:#579ADD;}
  .dx_darkgray{fill:#414141;}
</style>
<path class="dx_darkgray" d="M5,7h10V-3C9.5-3,5,1.5,5,7z"/>
<path class="dx_blue" d="M17-1V9H7c0,5.5,4.5,10,10,10s10-4.5,10-10C27,3.5,22.5-1,17-1z"/>
</svg>

Вот такой иконка становится после прогона через билдёжку (в данный момент — Gulp, плагины gulp-svgstore + gulp-svgmin)

<svg xmlns="http://www.w3.org/2000/svg">
...
<symbol id="dx-dashboard-toolbox-pie" viewBox="4 -4 24 24"><path class="dx_darkgray" d="M5 7h10V-3C9.5-3 5 1.5 5 7z"/><path class="dx_blue" d="M17-1V9H7c0 5.5 4.5 10 10 10s10-4.5 10-10S22.5-1 17-1z"/></symbol>
...
ещё 114 иконок
...
</svg>

Вот так мы прям в начале CSS отбиваем эти стили у иконок на уровне темплейта:

//меняет сам шаблон
.dx_blue {
  fill: #579ADD;
}
// вот это, кстати, перекрашивается в тёмной теме - отдельной CSS 
// без использования описанной технологии, но оч. удобно
.dx_darkgray {
   fill: #414141;
}

symbol#dx-dashboard-binding-panel-pie {
  .dx_blue {
    fill: inherit;
  }
}

И с этого момента можем использовать описанную технику с use для изменения цвета элемента иконки.

Какие ещё тонкие моменты:
— IE зачастую оооочень странно прокидыет ивенты мыши из таких теневых элементов.
Поэтому почти везде на самих иконках мы ставим pointer-events: none, и обрабатываем ивенты на уровень выше;
— IE зачастую не перерисовывает иконки, если играться с display свойствами их родителей. Поскольку у нас много иконок лежит на оверлеях — мы с этим прилично наборолись. Приходилось заниматься мистическими перестановками в ДОМе, надеясь, что очередной способ IE поймёт правильно
В последних версиях они это как будто бы починили.

И в общем-то, у нас всё хорошо. Разве что каждого нового программиста приходится отправлять читать эту статью :)

c01nd01r 22 дек 2017 в 16:16

А как на счет вставить вот этот огромный «спрайт» с иконками в index.html на этапе сборки и сделать ему display: none?

kaatula 25 дек 2017 в 08:20

Мы — не можем так сделать, потому что мы не пишем приложение
Мы пишем контрол, который люди вставляют в свои приложения

А в нашем девелоперском приложении, где мы разрабатываемся — мы так и делаем, понятное дело. Да и в нашем ASP.NET WebForms контроле тоже врендериваем в рантайме как часть страницы.

Вот только это очень хороший пункт:

display: none

делать нельзя. В некоторых браузерах в некоторых случаях (честное слово, не помню деталей — то ли ИЕ, то ли FF) — это губит работу с иконками.
Поэтому див должен быть display: block, visibility: hidden, position: absolute, left: -10px, top: -10px, width: 1px, height: 1px

Так у него работают градиенты и не растаращивает файрфокс огромный скроллбаром на этом невидимом элементе.

c01nd01r 25 дек 2017 в 09:25

Ясно, спасибо за развернутый ответ.

Зарегистрируйтесь на Хабре, чтобы оставить комментарий