


Блог IT-шника
Блог IT-шника
Привіт:)
SVG (масштабована векторна графіка) — це мова розмітки на основі формату XML для опису двовимірної векторної графіки.
Це відкритий текстовий веб-стандарт для опису зображень, які можна чітко відтворити будь-якого розміру. SVG розроблений спеціально для роботи з іншими веб-стандартами, включаючи CSS, DOM, JavaScript. По суті, SVG для графіки є тим же, що HTML для тексту.
Зображення у цьому форматі в процесі верстки HTML-сторінок можна додати 2-ма способами:
Для першого способу це виглядатиме так:
<img src="logo.svg" alt="Logo Img">
або
.logo {
width: 50px;
height: 50px;
background-image: url("logo.svg");
background-repeat: no-repeat;
}
У другому випадку є декілька нюансів, на яких зупинюся детальніше.
Для прикладу розглядатиму безкоштовну 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>
Цей код можна вставляти безпосередньо у 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>
Або як значення CSS-властивості:
/* 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-файл, скопіювати його вміст та вставити його як значення властивостей background-image
чи content
, то у цьому коді необхідно зробити деякі зміни.
url("...")
не повинно бути подвійних лапок. Усі їх замініть на одинарні.url("...")
починайте із data:image/svg+xml;charset=UTF-8,
.image/svg+xml
та xmlns='http://www.w3.org/2000/svg'
.height='24'
та ширини width='24'
прописуйте без одиниць виміру.fill
не повинно бути символу решітки (#
) для встановлення кольору. Її замініть кодом %23
або вкажіть колір словами, наприклад, black
, red
, purple
.