Comments 34
Вопрос такой: на сколько медленее работает SVG посравнению с PNG изображением. Да я понимаю, что вы предпочли SVG потому что вам нужно менять цвет и размер. Но всеже браузеру придется читать SVG код и отрисовывать графику. На сколько это влияет на скорость отображения на стороне клиента? А если иконок на странице много? Делали ли вы такие исследования?
У нас иконок не слишком много, порядка пары десятков. На таком количестве ничего не заметили, а мерять целенаправленно — не меряли.
Год назад меряли вот тут; там, в частности, автор рассказал о том, что в ИЕ SVG сразу работает нормально, в Firefox результаты SVG-рендерёжки кэшируются и сильно не тормозят. В хроме же на тот момент кэширование было отключено, иконки пересчитывались.
Чую, что за год положение должно было измениться, но доказать не могу.
Год назад меряли вот тут; там, в частности, автор рассказал о том, что в ИЕ SVG сразу работает нормально, в Firefox результаты SVG-рендерёжки кэшируются и сильно не тормозят. В хроме же на тот момент кэширование было отключено, иконки пересчитывались.
Чую, что за год положение должно было измениться, но доказать не могу.
Да эту статью годовой давности я тоже почтал. Но мне потребуется найти какие-то более убедительные результаты бенчмарков чтоб уговорить команду перейти на SVG иконки. А их у нас ожидается от 50 до 100 на нашем landingpage. Так что скорость очень важна.
Отдал страничку с пятью сотнями котов (создающихся нокаутом)
kaatula.github.io/svg-icons/samples/hunderds-of-cats.html
На компе с восемью ядрами всё хорошо
На винфоне имеет место задержка около секунды на старте страницы — я пока не понял, то ли это создание элементов, то ли конкретно SVG. Скроллинг при этом плавный.
Сейчас ещё буду на устройствах котиков мучать…
kaatula.github.io/svg-icons/samples/hunderds-of-cats.html
На компе с восемью ядрами всё хорошо
На винфоне имеет место задержка около секунды на старте страницы — я пока не понял, то ли это создание элементов, то ли конкретно SVG. Скроллинг при этом плавный.
Сейчас ещё буду на устройствах котиков мучать…
Но это же один и тот-же SVG? Просто к нему применены разные стили? Мне кажется браузер может оптимизировать использование одного и тогоже SVG и не рендерить его несколько раз. Интересно что будет если это разные изображения объединенные в такой «SVG спрайт».
Тогда ещё примерчик
122 различные иконки, всего на странице 500
(исходники иконок на гитхаб класть не стал, встроил сконкатенированный и минифицированный результат непосредственно в страничку)
Иконки брал вот у этих ребят
Они простенькие и симпатичные. Бесплатные при условии атрибуции.
122 различные иконки, всего на странице 500
(исходники иконок на гитхаб класть не стал, встроил сконкатенированный и минифицированный результат непосредственно в страничку)
Иконки брал вот у этих ребят
Они простенькие и симпатичные. Бесплатные при условии атрибуции.
У меня обе странички браузер прожевал даже не поперхнувшись. Моментально и без всякого напряга. Мне кажется, «тяжеловесность» для браузера SVG сильно преувеличена.
Firefox 43.0a2 (Dev Edition, или альфа)
Firefox 43.0a2 (Dev Edition, или альфа)
Осталось теперь для сравнения тоже самое только в PNG =)
А то не с чем сравнивать. Я покапался, вроде эти SVG рендерятся за 250ms… что довольно много, но надо сравнивать.
А то не с чем сравнивать. Я покапался, вроде эти SVG рендерятся за 250ms… что довольно много, но надо сравнивать.
Пожалсте :)
kaatula.github.io/svg-icons/samples/hunderds-of-pngs.html
Но мерять тут можно только dev-инструментами, я никаких метрик не добавлял…
kaatula.github.io/svg-icons/samples/hunderds-of-pngs.html
Но мерять тут можно только dev-инструментами, я никаких метрик не добавлял…
>инжектить
Вставлять, встраивать.
Спасибо за статью!
Во время Вы) Как раз обдумывал на проекте картинки-иконки заменить СВГшками.
Вставлять, встраивать.
Спасибо за статью!
Во время Вы) Как раз обдумывал на проекте картинки-иконки заменить СВГшками.
Есть умеренно грязный хак, позволяющий красить PNG-иконки — файл иконки должнен быть белым или в цвет бекграунда, с «вырезанной» по центру иконкой. Ну, как дырка в бумаге, сквозь которую видно подложку. Красим подложку, видим цвет иконки.
Не пропогандирую этот метод, там тоже куча нюансов есть, но он быстрый, кросбраузерный вплоть до 6 IE и очень простой.
Не пропогандирую этот метод, там тоже куча нюансов есть, но он быстрый, кросбраузерный вплоть до 6 IE и очень простой.
Согласен, такое тоже может работать.
Любой задаче — правильное решение.
Для этого решения тоже вполне бывали задачи.
Любой задаче — правильное решение.
Для этого решения тоже вполне бывали задачи.
Можно живой пример кода?
Да чего тут особо демонстрировать, вот смотрите, за минуту сделал: jsfiddle.net/yq1rqmyd/2
<?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-файла, пока кто-то её случайно не скопировал.
Эта заразу генерит gulp-плагин. Я тоже недоволен, но не настолько, чтобы вмешиваться в работу робота…
Но я согласен, в человекочитаемой статье ей не место
Но я согласен, в человекочитаемой статье ей не место
«The only available option is:
inlineSvg — output only element without <?xml ?> and DOCTYPE to use inline, default: false.»
inlineSvg — output only element without <?xml ?> and DOCTYPE to use inline, default: false.»
Вот это я понимаю — community
Спасибо, отдал.
Спасибо, отдал.
Автор плагина просто неправ: этот заголовок не нужен не только для инлайна, а вообще никогда на практике
.
Для пользователей вебпака мы написали лоадер, который создаёт спрайт и вставляет его в DOM автоматически. На выходе из require получается uri для <use>.
почему-то подход с символами не работает вместе с анимациями в хроме (на айпаде работает). Если символ заменить на группу, то проблема исчезает.
Интересно. Звучит как баг…
Я-то с анимацией, признаться, не заморачивался…
Как доберусь до рабочего компа, поэкспериментирую. Возможно, будет повод завести им бажокони-то проигнорят, зато совесть будет чистая
Я-то с анимацией, признаться, не заморачивался…
Как доберусь до рабочего компа, поэкспериментирую. Возможно, будет повод завести им бажок
Вообще, простая-простая анимация у меня заработала
kaatula.github.io/svg-icons/samples/animation.html
Не завелась, из десктопных бразуеров, только в MS Edge/IE и в старом виндовом Сафари (при этом она хотя бы стилизуется...)
А что не заработало?
kaatula.github.io/svg-icons/samples/animation.html
Не завелась, из десктопных бразуеров, только в MS Edge/IE и в старом виндовом Сафари (при этом она хотя бы стилизуется...)
А что не заработало?
UPD через два года
Поскольку тут ещё есть люди и приходят новые, решил дописать о результатах.
Подход полностью летит на нашем рабочем проекте — веб-дизайнере дэшбоардов.
Все иконки, что вы видите на это скриншоте, добавлены на страницу при помощи описанной технологии.
Иконки готовятся в Adobe Illustrator; средствами самого иллюстратора создаются «стили», которые при экспорте в SVG становятся настоящими CSS-стилями, которые мы перебиваем своими правилами. Дизайнер делает всё своими инструментами, помощь программиста для создания иконок не нужна. То есть всё на удивление нативно вышло с дизайнерскими средствами.
И в общем-то, у нас всё хорошо. Разве что каждого нового программиста приходится отправлять читать эту статью :)
Поскольку тут ещё есть люди и приходят новые, решил дописать о результатах.
Подход полностью летит на нашем рабочем проекте — веб-дизайнере дэшбоардов.
Все иконки, что вы видите на это скриншоте, добавлены на страницу при помощи описанной технологии.
Иконки готовятся в Adobe Illustrator; средствами самого иллюстратора создаются «стили», которые при экспорте в SVG становятся настоящими CSS-стилями, которые мы перебиваем своими правилами. Дизайнер делает всё своими инструментами, помощь программиста для создания иконок не нужна. То есть всё на удивление нативно вышло с дизайнерскими средствами.
Коды иконок до и после
Вот так экспортирует Adobe Illustrator:
Вот такой иконка становится после прогона через билдёжку (в данный момент — Gulp, плагины gulp-svgstore + gulp-svgmin)
Вот так мы прям в начале CSS отбиваем эти стили у иконок на уровне темплейта:
И с этого момента можем использовать описанную технику с use для изменения цвета элемента иконки.
Какие ещё тонкие моменты:
— IE зачастую оооочень странно прокидыет ивенты мыши из таких теневых элементов.
Поэтому почти везде на самих иконках мы ставим pointer-events: none, и обрабатываем ивенты на уровень выше;
— IE зачастую не перерисовывает иконки, если играться с display свойствами их родителей. Поскольку у нас много иконок лежит на оверлеях — мы с этим прилично наборолись. Приходилось заниматься мистическими перестановками в ДОМе, надеясь, что очередной способ IE поймёт правильно
В последних версиях они это как будто бы починили.
<?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 поймёт правильно
В последних версиях они это как будто бы починили.
И в общем-то, у нас всё хорошо. Разве что каждого нового программиста приходится отправлять читать эту статью :)
А как на счет вставить вот этот огромный «спрайт» с иконками в index.html на этапе сборки и сделать ему display: none?
Мы — не можем так сделать, потому что мы не пишем приложение
Мы пишем контрол, который люди вставляют в свои приложения
А в нашем девелоперском приложении, где мы разрабатываемся — мы так и делаем, понятное дело. Да и в нашем ASP.NET WebForms контроле тоже врендериваем в рантайме как часть страницы.
Вот только это очень хороший пункт:
делать нельзя. В некоторых браузерах в некоторых случаях (честное слово, не помню деталей — то ли ИЕ, то ли FF) — это губит работу с иконками.
Поэтому див должен быть display: block, visibility: hidden, position: absolute, left: -10px, top: -10px, width: 1px, height: 1px
Так у него работают градиенты и не растаращивает файрфокс огромный скроллбаром на этом невидимом элементе.
Мы пишем контрол, который люди вставляют в свои приложения
А в нашем девелоперском приложении, где мы разрабатываемся — мы так и делаем, понятное дело. Да и в нашем ASP.NET WebForms контроле тоже врендериваем в рантайме как часть страницы.
Вот только это очень хороший пункт:
display: noneделать нельзя. В некоторых браузерах в некоторых случаях (честное слово, не помню деталей — то ли ИЕ, то ли FF) — это губит работу с иконками.
Поэтому див должен быть display: block, visibility: hidden, position: absolute, left: -10px, top: -10px, width: 1px, height: 1px
Так у него работают градиенты и не растаращивает файрфокс огромный скроллбаром на этом невидимом элементе.
Sign up to leave a comment.
SVG-иконки – много и со стилем