Методи та особливості вставки SVG-графіки в HTML-код

Привіт:) У цьому гайді покажу популярні способи та особливості вставки SVG-графіки в код HTML.

Що таке SVG

SVG (Scalable Vector Graphics) — це мова розмітки на основі формату XML для опису двовимірної векторної графіки. Це відкритий текстовий веб-стандарт для опису зображень, які можна чітко відтворити будь-якого розміру без втрати чіткості (пікселізації).

SVG розроблений спеціально для роботи з іншими веб-стандартами, включаючи CSS, DOM та JavaScript. По суті, SVG для графіки є тим же, що й HTML для тексту.

Основні способи додавання SVG

Зображення у цьому форматі в процесі верстки HTML-сторінок можна додати двома основними способами:

1. У вигляді посилання на окремий файл у форматі SVG.
2. Скопіювавши та вставивши вміст цього SVG-файлу безпосередньо в код HTML або як значення CSS-властивості.

Використання як посилання на файл

Цей метод дозволяє тримати HTML-код чистим і використовувати переваги кешування браузера.

Через HTML-тег <img>:

<img src="logo.svg" alt="Logo Img">

Через CSS-властивість background-image:

.logo {
  width: 50px;
  height: 50px;

  background-image: url("logo.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

Вставка вмісту SVG безпосередньо в код

Цей метод дає максимальну гнучкість, оскільки дозволяє стилізувати елементи SVG (наприклад, змінювати колір кривих) прямо через CSS вашого проекту.

Для прикладу розглядатиму безкоштовну Google-іконку, збережену в форматі SVG.

Якщо відкрити цей файл у будь-якому текстовому редакторі, то отримаємо код

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z"/></svg>

Inline SVG (безпосередньо в HTML)

Цей код можна вставити прямо в HTML-код сторінки:

<div class="logo">
  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z"/></svg>
</div>

SVG як значення CSS-властивості (Data URI)

Ви також можете використовувати код SVG всередині файлу стилів. Це зручно для оформлення псевдоелементів ::before чи ::after.

/* svg через CSS-властивість background-image */

background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z'/></svg>");

/* svg через CSS-властивість content */

content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-40q-91 0-171.5-34.5t-140-94q-59.5-59.5-94-140T40-480q0-92 34.5-172t94-139.5q59.5-59.5 140-94T480-920q92 0 172 34.5t139.5 94Q851-732 885.5-652T920-480q0 91-34.5 171.5t-94 140Q732-109 652-74.5T480-40Zm0-440Zm-25 311q10 10 23 10t23-10l288-288q10-10 10-24t-10-24L501-793q-10-10-23-10t-23 10L167-505q-10 10-10 24t10 24l288 288ZM319-361v-160q0-18 11-29t29-11h166l-42-44 56-56 140 140-140 140-56-56 42-44H399v120h-80Zm161 241q151 0 255.5-104.5T840-480q0-151-104.5-255.5T480-840q-151 0-255.5 104.5T120-480q0 151 104.5 255.5T480-120Z'/></svg>");

Важливі технічні нюанси вставки SVG як значення CSS-властивості

При вставці SVG через CSS існують критичні моменти, без дотримання яких зображення може не відобразитися.

Розгляну цей момент детально, бо тут є нюанси. Якщо відкрити у редакторі svg-файл, скопіювати його вміст та вставити його як значення властивостей background-image чи content, то у цьому коді необхідно зробити деякі зміни.

• Лапки. Всередині конструкції url("...") не повинно бути подвійних лапок. Усі внутрішні лапки атрибутів SVG (наприклад, width="24") потрібно замінити на одинарні (width='24').
• Синтаксис URI. Вміст url("...") обов’язково має починатися з префіксу: data:image/svg+xml;charset=UTF-8,.
• Обов'язкові атрибути. Для коректної інтерпретації браузером завжди вказуйте image/svg+xml та xmlns='http://www.w3.org/2000/svg'.
• Одиниці виміру. Властивості height та width всередині тегу <svg> краще прописувати без одиниць виміру (просто числами). Наприклад, висота height='24' та ширина width='24'.
• Робота з кольором (#). Символ решітки # є службовим у URL-адресах для встановлення кольору, тому в значенні властивості fill його використовувати не можна. Замість нього використовуйте код %23 або вказуйте колір словами (black, red, purple).

Порівняння та рекомендації