Як додати SVG у властивість вмісту псевдоелементів ::before або ::after

Що таке SVG

SVG – це сучасний формат для векторної графіки. Його можна використовувати для додавання графіки на сторінки сайту, класичним способом як посилання на окремий файл, так і впровадивши вміст цього файлу безпосередньо в HTML код, адже SVG це валідний HTML5.

Що таке ::before та ::after

Це псевдоелементи, яких немає в HTML файлі, але які можна додати за допомогою CSS і використовувати для стилізації сторінок сайту, майже як звичайні елементи, як div або span. Їх зручно використовувати для додавання контенту до сторінки, коли HTML код недоступний або його структура не повинна змінюватися.

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

У чому суть проблеми і навіщо взагалі використовувати SVG у ::before та ::after? Щоб було легше відповісти, розіб’ємо це питання наскільки.

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

Чому псевдоелементи та вміст? Насправді, це не обов’язково. З тим самим успіхом, можна використовувати властивість 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, навряд чи знайдуться багато веб-розробників або дизайнерів, які в умі можуть уявити таку фігуру, без редактора не обійтися.