Как добавить SVG в свойство content псевдоэлементов ::before или ::after
Что такое 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 запрос к серверу, что негативно влияет на скорость загрузки.
При использовании этого подхода можно редактировать иконку прямо из CSS, и даже без использования векторного редактора, правда это справедливо для SVG иконок, в которых используются простые фигуры, например, circle
, rect
, line
, возможно polyline
. Если там есть только path
, вряд ли найдутся много веб разработчиков или дизайнеров, которые в уме могут представить такую фигуру, без редактора не обойтись.