gatilin222 Dec 7 2015 at 10:16

Как я использую SVG-спрайты

6 min

64K

CSS*HTML*Website development*

Tutorial

+15

Comments 26

UFO just landed and posted this here

gatilin222 Dec 7 2015 at 11:27

Про localStorage подсказали на @cssunderhood)

Eklykti Dec 7 2015 at 18:35

А если на клиенте вдруг выключен js, то вместо иконки юзер увидит хрен?

gatilin222 Dec 7 2015 at 21:21

osvaldas.info/caching-svg-sprite-in-localstorage Здесь написано, что делать в этом случае.

dom1n1k Dec 7 2015 at 16:10

Я как ни старался, никакой божественности в Jade не ощутил. Есть, конечно, свои плюсы и сильные стороны, но некоторое количество минусов перечеркивают их полностью. Проще по старинке сверстать.

gatilin222 Dec 7 2015 at 21:22

Согласен, нет ничего божественного, просто подходит под мои задачи)

Houston Dec 7 2015 at 11:24

Для вебпака тоже такое есть, если кому нужно github.com/kisenka/svg-sprite-loader

TNK Dec 7 2015 at 15:20

Есть же gulp-svgstore. Вместо кэширования в localStorage предпочитаю использовать внешний файл-спрайт и svg4everybody. Ещё покорёбило, что результат склейки svg назвали .html.

gatilin222 Dec 7 2015 at 15:48

Так я и показал, что это один из способов решения) Используйте те плагины, которые вам удобны)

Iskin Dec 7 2015 at 18:22

Я инлайню SVG прямо в CSS. С помощью postcss-svg можно сменить цвет. Правда нет анимаций, зато опрятнее выходит — меньше магии и нормальное кеширование.

Large Dec 8 2015 at 17:33

при подключении через символ тоже не работает цсс анимация.

gatilin222 Dec 8 2015 at 18:23

Друг, вы не правы, все замечательно работает)

Large Dec 8 2015 at 18:56

jsfiddle.net/v5y027r1 варианты с use так же не работают. если у вас есть рабочий вариант — поделитесь.

Обсуждали здесь — habrahabr.ru/company/devexpress/blog/269331

Large Dec 8 2015 at 19:24

налажал в коде выше. вот правильный вариант jsfiddle.net/v5y027r1/5 проверять в хроме.

gatilin222 Dec 8 2015 at 20:04

Я имел ввиду transition) А то что animation не работает — не страшно, он и не нужен для иконок(для меня)

Iskin Dec 7 2015 at 18:23

Вообще, конечно, кеширование в localStorage — очень неправильный подход. localStorage создан для данных, а не кеша ресурсов. Например, когда пользователь нажмёт «Очистить кеш», то localStorage не будет очистен.

JiLiZART Dec 8 2015 at 02:05

Кешем могут теперь заниматься модные нынче service worker'ы dev.opera.com/service-worker.js

gatilin222 Dec 8 2015 at 07:14

Спасибо за наводку, еще не изучал их

mr47 Dec 8 2015 at 21:19

Модные — да. Но рано их использовать.

jmaks13 Dec 8 2015 at 09:52

Если кому то интересно, то можно создать svg спрайт иначе, вот статья
www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass

gatilin222 Dec 8 2015 at 10:15

Это тоже хороший способ, но мне он не подходит(

UFO just landed and posted this here

nowm Dec 14 2015 at 04:14

Но я заметил у данного плагина один баг — иногда он преобразовывает символ '>' в кодировку '&g t;', только без пробела между символами 'g' и 't'(если убрать пробел — получится символ).

Это замечание относится конкретно к статье на Хабре: вы не учли, что в кодах есть символ «&», который можно написать как «&». Соответственно, если вы хотите написать «>», то нужно писать это так: &gt; — оно при публикации статьи превратится в >

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

gatilin222 Dec 14 2015 at 07:36

Спасибо вам! А я то мучался, а оно вон все как просто)

romandev411 Feb 16 2018 at 14:25

удаление fill не машает?
в некоторых иконках есть такая штука как fill=«none» и ее оставлять надо.
потому:
$('[fill^="#"]').removeAttr('fill');

romandev411 Feb 16 2018 at 17:48

Здесь не описано как решается конфликт id.
Подходит только для простых свг иконок