Что такое SVG

SVG это современный формат для векторной графики. Его можно использовать для добавления графики на страницы сайта, классическим способом, как ссылку на отдельный файл, так и внедрив содержимое этого файла непосредственно в HTML код, ведь SVG это валидный HTML5.

Что такое ::before и ::after

Это псевдоэлементы, которых нет в HTML файле, но которые можно добавить с помощью CSS и использовать для стилизации страниц сайта, почти как обычные элементы, как div или span. Их удобно использовать для добавления контента в страницу, когда HTML код не доступен или его структура не должна изменяться.

SVG и псевдоэлементы

В чем суть проблемы и зачем вообще использовать SVG в ::before и ::after? Чтобы было легче ответить, разобьём этот вопрос на насколько.

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

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

SVG в свойстве content

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

У нас есть тестовый элемент <div id="test-icon"></div>, который используем для добавления псевдоэлемента и svg иконки:

#test-icon::before {
    content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M11,21h-1l1-7H7.5c-0.88,0-0.33-0.75-0.31-0.78C8.48,10.94,10.42,7.54,13.01,3h1l-1,7h3.51c0.4,0,0.62,0.19,0.4,0.66 C12.97,17.55,11,21,11,21z' fill='%23134578' /></svg>");
    display: inline-block;	
    width: 24px;
    height: 24px;
}

Код использует svg иконку из https://fonts.google.com/icons

На что следует обратить внимание и возможные причины почему иконка SVG не показывается на странице:

  • Между url(" и "); не должны быть двойных кавычек, все они заменены на одинарные.
  • Наличие правильного MIME типа image/svg+xml.
  • Наличие xmlns='http://www.w3.org/2000/svg' version='1.1'.
  • Свойства height='24' и width='24' указываются без единиц измерения.
  • В свойстве fill не должно быть символа решетки (#), для указания цвета. Ее нужно заменить кодом ‘%23‘ (как в данном примере) или указывать цвет словами, например, white, purple, red и т.д.

Пытливый веб разработчик заметит, а почему не указать просто ссылку на файл: url("path/to/svg/icon.svg");. Да так можно, но этим мы создаем дополнительный HTTP запрос к серверу, что негативно влияет на скорость загрузки.

Статус коды HTTP

При использовании этого подхода можно редактировать иконку прямо из CSS, и даже без использования векторного редактора, правда это справедливо для SVG иконок, в которых используются простые фигуры, например, circle, rect, line, возможно polyline. Если там есть только path, вряд ли найдутся много веб разработчиков или дизайнеров, которые в уме могут представить такую фигуру, без редактора не обойтись.