Немного об иконках css и svg

в 18:08, , рубрики: css, Разработка веб-сайтов

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

Но есть парочка «Но»…

  1. Иконочных шрифтов нет.
  2. Подгружать внешние файлы нельзя.
  3. С помощью js/canvas/html рисовать нельзя.
  4. Иконка должна быть масштабируемая.

Что делать? Как быть?

Вариант номер раз:

Тут почти все хорошо… за исключением того, что нужно нашу svg прогонять через encoding (вот такой сервис)
и вместо красивого svg мы получаем
%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%....2Fsvg%3E%0A

В результате получаем масштабируемую иконку ценой в 309 байт.

Теперь поясню некоторые моменты:

  1. data:image/svg+xml — этим мы объясняем браузеру, что сейчас будем впихивать сюда inline-ресурс, который из себя представляет изображение в формате svg+xml
  2. charset=utf-8 — штука вроде бы и не обязательная, но желательная (ибо фиг знает, что там у вас за кодировка, а svg/xml должны быть в utf-8)
  3. в самом svg-коде должен присутствовать аттрибут xmlns=«www.w3.org/2000/svg», без него не работает.

В content точно так же можно впихнуть url, а в него inline.

Единственный минус этого действа, цвет заливки нужно прописывать непосредственно в svg файле. Было бы неплохо, если бы работал currentColor или fill, но у меня не получилось заставить это работать.

Автор: Наташа

Источник

Поделиться

* - обязательные к заполнению поля