Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 27
А не проще в Base64 svg загнать, раз уж конвертите файл? Да и занимать он будет как правило меньше в байтах.
Нет. Вся эта свистопляска задумывалась для возможности менять цвет иконки по необходимости. В base64 переменную цвета не подставишь.
Можно еще post-css использовать. Написать плагин, который делает URI-кодирование для svg строк в background.
Увы, с post-css я не работал. Впрочем, можно и для gulp плагин написать, но, увы, я не настолько хорошо знаю ноду, чтобы плагин не только делал URI-кодирование, но и вставлял переменные в нужные места((
вот нашел плагин для post-css, может поможет github.com/borodean/postcss-assets#inlining-files
Что-то я не понял о чём статья. Ну да, есть SVG и да, её можно вставить в data URI. Всё?
Почитайте лучше вот этот блог: css.yoksel.ru или этот: pepelsbey.net там тоже про SVG, но глубоко и интересно.
Почитайте лучше вот этот блог: css.yoksel.ru или этот: pepelsbey.net там тоже про SVG, но глубоко и интересно.
Я столкнулся с конкретной проблемой — манипуляции цветом иконок, заданых через background-image. Для того, чтобы ее решить, мне пришлось активно покопаться в гугле. Вот для тех, кто столкнется с подобной проблемой или просто только начинает осваивать svg я и написал свой вариант решения. Если у вас есть лучше — я с удовольствием вас выслушаю.
Да пожалуйста: не ставить иконку фоном, а сделать обычной картинкой, цветом манипулировать через CSS.
А если этот вариант мне не подходит? Вот так получилась, что у меня примерно 80% иконок на сайте сделаны через фон, спрайтом. Вы мне предлагаете перепиливать шаблоны только для того, чтобы заменить png-спрайт на svg, если я могу просто поменять background в less?
Плюс если иконки вставлять обычной картинкой — то каждая картинка это запрос к серверу. А, наскольк я помню, технология спрайтов была создана как раз для минимизации оных запросов. А мой вариант — это как раз замена спрайту.
Плюс если иконки вставлять обычной картинкой — то каждая картинка это запрос к серверу. А, наскольк я помню, технология спрайтов была создана как раз для минимизации оных запросов. А мой вариант — это как раз замена спрайту.
Хосподи, чего там «перепиливать»-то? А технология спрайтов и png здесь каким боком? Мы, вроде, SVG обсуждаем. Хотя я и не понял вопроса, всё же отвечаю: загрузите SVG одним файлом, а потом используйте тег USE.
Перенес комментарий в нужную ветку
Возможно вам стоит пересмотреть подход, так как svg-изображения в данном случае будут рендериться медленнее (настолько, что это становится заметно при кол-ве картинок > 50), чем использование стека svg (symbols) или инлайнового svg. И то, и то легко сделать плагинами для gulp.
С этим нюансом еще не сталкивался, проверю. Спасибо!
Тут можно прочесть подробнее.
Получается, svg дублируется в результирующем css столько раз, сколько используется миксин? Неэффективненько.
Недавно сделал точно такую же штуку: заюзал svg чтобы цвет картинки в тон надписи менять.
github.com/antirek/callButton.js/blob/master/callButton.js#L169
тестировал правда сначала только под хром, выкатил на несколько сайтов, а потом пользователи firefox сообщили о досадном косяке, пришлось разобраться с кодированием.
github.com/antirek/callButton.js/blob/master/callButton.js#L169
тестировал правда сначала только под хром, выкатил на несколько сайтов, а потом пользователи firefox сообщили о досадном косяке, пришлось разобраться с кодированием.
Вот сделано в css и все работает yabeda.by
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Векторная замена спрайтам — имплантируем SVG в CSS