Evil Icons: как мы изобретали SVG-иконки

[mrjj]

Посмотрите в safari 10.10, похоже из-за багов его рендеринга SVG все очень плохо.

[OutPunk]

Это мой основной браузер, что там не так?

[mrjj]

Скрин с «помятыми» кругами

[mrjj]

видно что сглаживание странно себя ведет

[Iskin]

Ответ очень прост — не использовать, если у тебя такие старые браузеры ;). Вон в Китае до сих пор IE 6 в трнедах, но это не значит, что все проекты должны под это быть рассчитаны.

[mrjj]

Увы, это зависит от бизнес-задач клиента, а не представлений о том что такое хорошо, а что такое плохо.

[Iskin]

А я и не говорил, что это хорошо или плохо. Понятно, что если ты разрабатываешь ПО для самолётов, то не можешь использовать наработки веб-программирования, потому что там условия задачи другие. Со старыми браузерами та же история — логично, что нельзя использовать современные наработки, поэтому комментарии в стиле «а как я буду это использовать под IE 6» не имеют смысла. Это всё равно, что спрашивать — а как я буду использовать SVG, разрабатывая ПО для слепых. Никак, в твоём мире веб-разработки этого нет, такие условия задачи.

[mrjj]

Ну, шестерка даже в Китае уже где-то в районе 1% болтается, это как на NN 4 ориентироваться, а семерка даже ниже.
На IE8 уже как-то можно развернуться: SVG плагин, вебфонты, VML

[DmitryBaranovskiy]

Немного уточню:

Raphaël.js был написан для трансляции SVG в VML.

Не совсем так. Raphaël предоставлял адаптер и его API было в большинстве скопировано с SVG для удобства.

[OutPunk]

Я пока еще не смог придумать нормальный фоллбек: важны масштабируемость и смена цвета — ради них все и делается. Но я экспериментирую в этом направлении, возможно, что-то получится. Или не получится.

[Iskin]

А стоит ли добавлять поддержку IE 8? В тот момент, как мы закончим, он уже совсем уйдёт с рынка.

[OutPunk]

Экспериментирую just for fun, серьезно возиться пока не планирую.

[romanshamin]

Evil Icons в текущем виде — это минимально функциональный продукт. Мы сделали достаточно, чтобы пиктограммы можно было внедрять в современные проекты или прототипы. Поддержку ИЕ, как и множество других задач, мы постепенно будем делать со временем.

Если вам нужен ИЕ8 прямо сейчас, иконки в текущей версии вам не подходят, простите.

Мы обязательно напишем вам, когда сделаем.

[LegoMushroom]

Вот вам пара фаллбеков —

• github.com/jonathantneal/svg4everybody
• github.com/yoksel/svg-fallback

Есть еще простой фалбек —

1. парсите все иконке на странице
2. отправляете на сервер
3. сервер рендерит на PhantomJS и отдает png изображение
4. проставляете пнг изображения соответствующим иконкам

Плюс этого фалбека состоит в том что сервер рендерит именно тот цвет и размер которые нужны для конкретной иконки.
И можно рендерить заранее, да. Еще при использовании данного фалбека удобно класть svg иконку внутрь дива. <symb.... Часто именно этот див является спасительным мостиком между html и svg разметками.

[mrjj]

Под mac-chrome svg анимация съедает одно ядро напрочь

[OutPunk]

А мак у вас какой? У меня на MBP 15" middle 2011 и MBPR 15" late 2013 все хорошо.

[mrjj]

MBP 13" 2014 топовый

Открыл страничку со спиннером и получил печку с просадом аккумулятора.

[OutPunk]

А у вас сафари не открыт, случаем? Потому что потребление ресурсов для отдельных сайтов в Activity Monitor показывается только для сафари.

[mrjj]

Да, это картина для двух браузеров сразу, в которых из сколько ни будь затратных по ресурсам вкладок были открыты только evil icons, сафари кушал >20%, хром с метлой кушал >30%

[OutPunk]

Спасибо, посмотрю, что там.

[ivlis]

В линуксе такая же фигня

[LegoMushroom]

У меня то же. Mac mini 2,3 GHz Intel Core i7 16 GB 1600 MHz DDR3 Chrome 39.0.2171.95

Решение под катом

Проблема в пейнт шторме вызванном анимацией (зеленные блоки это перерисовка)



Если записать таймлайн — то можно увидеть примерно ту же картину



Уберем шторм:

Не смотря на отдельные композитные слои у svg элементов (оранжевые рамки),



браузер вынужден их перерисовывать так как это вектор, a при любых изменениях (а какие изменения будут при анимации в будущем принято считать неизвестным) он требует растрирования перед выводом на экран. Пейт очень дорогое удовольствие, а растр еще дороже.

Соответственно простое решение — применить анимацию не к svg элементу — а к самой иконке — то есть к диву. Это вынесет сам див на отдельный композитный слой и vo a la! После изменения можете посмотреть таймлайн еще раз — он будет чистым



а пейнт шторм не будет вас больше беспокоить (пейнта нет совсем)

[OutPunk]

Отличная работа! Спасибо, фикс будет уже в следующем релизе.

[LegoMushroom]

всегда пожалуйста! :)

[ls1]

почему вам стоит переходить на SVG уже в следующем проекте

Надеюсь, разработчики habrastorage.org таки согласятся. Грустно без SVG на хабре

[OutPunk]

Я только сегодня страдал без маркдауна.

[Alexufo]

Один из недостатков SVG огромный размер. Это так на примитивах он выигрывает и то вот относительно несложные формы даже пожатые svgz… могут вызывать вопросы.
Хорошо бы еще про это упомянуть.

[OutPunk]

А есть примеры SVG с большим размером? Ну вот чтобы хуже других форматов было.

[Alexufo]

Возьмите любые иконки не flat стиля, а чуть с большей детализацией. Размер там вырастает сразу.

[OutPunk]

Использую SVG не только для иконок, а вообще для многой графики. Проблем с размерами еще ни разу не было, в растре гораздо тяжелее все.

[mrjj]

svgz использовать вовсе не обязательно, gzip траффика стандартное явление, максимум нужно указать что .svg тоже под него попадает, это уже компрессия ~80%.
Плюс мне попадалось минимум два svg оптимизатора, которые позволяют выиграть до ~50% размера исходника.
Если иконка нормально «ложится» на вектор, то больше оверхеда будет вокруг самого факта фетча ресурса, чем ± 10 килобайт его размера.

[alisey]

А знает кто-нибудь способ заставить IE понимать ссылки вида #foo-icon для внешних SVG файлов (не инлайновых)?

[OutPunk]

Поясните вопрос, вы про IE8?

[alisey]

Нет, IE11. Чтобы так подключать:

<svg><use xlink:href="//assets.example.com/sprite.svg#foo-icon"></use></svg>

Приходит в голову подгрузить файл через ajax и вставить в <body>, но это довольно уродливо.

[OutPunk]

Подключать SVG как внешний файл — не очень хорошая идея, потому что у Blink были проблемы с таким подключением. В целях кеширования мы хотели сначала сделать подключение через js (который будет вставлять строку со спрайтом в документ), но передумали. Потому что оверхед на получение файла со спрайтом может быть больше, чем вес самого спрайта. В таком случае иконки будут показаны не сразу. В конце-концов, сотня килобайт — пустяки по сравнению с растровой графикой.

[OutPunk]

Вот, например, bugs.webkit.org/show_bug.cgi?id=105904

[dom1n1k]

В кои-то веки взвешенная статья про svg — а не «ура! вектор бесконечно масштабируется, потому маст хев!»

Но я все-таки ориентировался бы в качестве основного на начертание regular, а не light. Даже на ретине светлое смотрится нарочито модненько и непрактично, есть ощущение, что скоро эта мода пройдет (я надеюсь!)

[OutPunk]

Тут, конечно, больше дело вкуса. В первой итерации мы сделали минимально необходимые вещи, в будущем набор regular все равно будет. Потому что каким бы легким не был легкий набор, он не во всех случаях подходит.

[OutPunk]

Иконки импортируются в виде модуля в приложение, у этого модуля есть свойство-строка со спрайтом внутри, который нужно отрендерить на странице и хелпер для рендеринга отдельных иконок.

Посмотреть, как это примерно выглядит на живом проекте, можно в исходниках демо-сайта:
github.com/outpunk/evil-icons/blob/gh-pages/Gulpfile.coffee#L32
github.com/outpunk/evil-icons/blob/gh-pages/Gulpfile.coffee#L47
github.com/outpunk/evil-icons/blob/gh-pages/src/index.jade#L55
github.com/outpunk/evil-icons/blob/gh-pages/src/index.jade#L105

Для любого проекта на ноде это делается примерно так же.

[paulradzkov]

А как вы планируете бороться с размытостью векторных иконок из-за «нецелых пикселей»?

Суть проблемы: даже если контуры иконки идеально попадают в пиксели, в верстке случаются моменты, когда вычисленные размеры всех блоков до иконки не являются «целопиксельными». Например, при использовании размеров в «em» или безразмерного line-height, высота блока может получиться 100,5px. И тогда иконка не будет выровнена по пикселям. То же самое по ширине.

Такое происходит в IE и Firefox, в Chrome инлайн SVG всегда попадает в пиксели.

Размытие иконки в IE

Если вставлять SVG-иконку через background-image, она всегда попадает в пиксели, но ее уже нельзя перекрашивать или анимировать.

[romanshamin]

В ближайшее время не планируем бороться :)

вычисленные размеры всех блоков до иконки не являются «целопиксельными»

Если мы правильно поняли, когда изучали проблему, это происходит, только если изменять ширину браузера. Если поймать момент, когда иконки «размыло» и обновить страницу — браузер отрендерит по пикселям.

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

при использовании размеров в «em» или безразмерного line-height

Как я упоминал в своей части, экран — среда, имеющая ограничения. Мы не можем заставить иконку попадать в пиксели при любом размере.



Мы сделали все, чтобы разработчик получил четкие иконки: правильно их нарисовали и дали предустановленные размеры, которые гарантируют попадание в пиксельную сетку. Задавайте иконкам фиксированные размеры и они будут четкими.

[SVGen]

Если мы правильно поняли, когда изучали проблему, это происходит, только если изменять ширину браузера.

Не только:



Так пиктограммы отображаются на Вин 7 и 8. В ИЕ11 они также размыты. Мониторы 1920 и 1440 пикселей в ширину. Окна браузеров максимизированы и их ширина не менялась после загрузки страницы.

Иногда можно добиться нормального отображения, изменяя ширину окна браузера.
Чтобы пиктограммы всегда отображались нормально, нужно добавить пару свойств:

    transform: translateX(0); /* ФФ */
-ms-transform: translate(.5px, -.3px); /* ИЕ */

Возможно, есть способ и получше :)

[OutPunk]

Оу, очень круто и хитро. Спасибо! Жаль, что при изменении ширины окна для IE это не работает. Если у вас есть аккаунт на гитхабе, напишите мне в личку — я упомяну вас в фиксе.

[SVGen]

Решение для ИЕ оказалось слишком магическим :\ Надеюсь, у пользователей с ним всё будет хорошо.
Зато лисичке помогли надёжно, судя по тестам.
В личку написал.

[romanshamin]

SVG Rendering In Browsers — статья на английском об особенностях рендеринга SVG.

[paratrooper]

svg4everybody — polyfills для использования <use/> с внешними файлами (Safari 6, IE 6+)