SVG-документ

Векторна графіка зберігається у файлах з розширенням .svg. Це текстові файли в яких за допомогою XML-синтаксису описується зображення. На верхньому рівні цього файлу іде тег <svg> зі своїми атрибутами. Обовʼязково присутній атрибут xmlns, а решти може і не бути.

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M12 5V19M5 12H19" 
          stroke="black"
          stroke-width="2" 
          stroke-linecap="round" 
          stroke-linejoin="round"/>
</svg>

Цей код можна зберегти, наприклад як окремий файл plus-ico.svg. і заверстати на сторінці за допомогою тегу <img>.

<img src="./plus-ico.svg" alt="plus-ico" />

Якщо явно не вказати розмір для такого елемента, то браузер за замовчуванням встановить його 300x150 пікселів. Контент, який вийде за межі цього контейнера буде обрізаний.

SVG-viewport

Видима область (viewport) визначає область екрану, на якій відображається зображення SVG.

Видиму область налаштовують використовуючи атрибути width та height у елементі <svg>. Розміри видимої області вказують у пікселях. Верхній лівий кут видимої області - це початок координат, де x = 0 і y = 0. Якщо розміри видимої області менше за розміри всього зображення, то SVG буде масштабувати зображення таким чином, щоб воно вмістилося в видиму область.

Ось приклад використання атрибутів width та height для встановлення розмірів видимої області:

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- Графічні елементи SVG тут -->
</svg>

SVG-viewBox

Атрибут viewBox визначає координати та розміри внутрішньої координатної системи, яку користувач бачить у видимій області (viewport).

viewBox складається з чотирьох значень: min-x min-y width height.

viewBox="min-x min-y width height"

Розгляньмо кожен параметр окремо:

min-x: Мінімальна горизонтальна координата у внутрішній системі координат.

min-y: Мінімальна вертикальна координата у внутрішній системі координат.

width: Ширина внутрішньої системи координат.

height: Висота внутрішньої системи координат.

Атрибут viewBox дозволяє масштабувати та переміщати зображення всередині видимої області (viewport) без зміни самого зображення.

Створимо <svg> з viewport 400х300 і по центру розмістимо коло радіусом 150.

Тобто значення min-x та min-y - це зміщення нашого векторного зображення по осі x та y. А значення width і height управляють масштабуванням.

Приклади масштабування

Для прикладу створимо SVG розміром 200х100. (Дуже скромно нехай це буде моє прізвище описане у векторі)

Код цього SVG

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path d="M0,0h4.3v48.2h0.2c0.9-3.9,1.8-7.4,2.6-10.7L17.4,0h5.4L10.6,42.4L23.7,100h-5.1L7.5,50.9l-3.2,11V100H0V0z"/>
<path d="M31.3,0v41.8h16.2V0H52v100h-4.4V53.1H31.3V100H27V0H31.3z"/>
<path d="M88.2,49c0,33.3-7,51-15.6,51c-8.9,0-15.1-19.8-15.1-49.1C57.5,20.1,64.1,0,73.1,0C82.3,0,88.2,20.3,88.2,49z M62.1,50.6
	c0,20.7,3.9,39.2,10.7,39.2c6.9,0,10.8-18.2,10.8-40.2c0-19.3-3.5-39.4-10.7-39.4C65.7,10.2,62.1,29.3,62.1,50.6z"/>
<path d="M122.1,56.1c-0.2-13.9-0.5-30.7-0.5-43.2h-0.2c-1.1,11.7-2.5,24.2-4.2,38l-5.9,48.5H108l-5.4-47.6
	c-1.6-14.1-2.9-27-3.9-38.9h-0.1c-0.1,12.5-0.3,29.2-0.6,44.2L97.1,100h-4.1L95.3,0h5.5l5.7,48.4c1.4,12.3,2.5,23.3,3.4,33.7h0.2
	c0.8-10.1,2-21.1,3.5-33.7l6-48.4h5.5l2.1,100H123L122.1,56.1z"/>
<path d="M138.2,0v100h-4.3V0H138.2z"/>
<path d="M151.2,68.5l-3.5,31.5h-4.5L154.7,0h5.2l11.5,100h-4.6l-3.6-31.5H151.2z M162.2,58.5l-3.3-28.8c-0.8-6.5-1.2-12.5-1.7-18.2
	h-0.1c-0.5,5.9-1,12-1.7,18.1l-3.3,28.9H162.2z"/>
<path d="M176.3,0h4.3v48.2h0.2c0.9-3.9,1.8-7.4,2.6-10.7L193.7,0h5.4l-12.2,42.4L200,100h-5.1l-11.1-49.1l-3.2,11V100h-4.3V0z"/> 
  </svg>

svg {
  display: block;
  outline: 1px solid red;
}

Якщо співвідношення значень атрибутів width і height збігаються з їх аналогами у viewBox, то виходить масштаб дорівнює 1:1. Зображення буде мати оригінальний розмір.

<svg width="200" height="100" viewBox="0 0 200 100" >
 
</svg>

Якщо значення у viewBox будуть вдвічі менші значень у width і height, то це співвідношення 2:1. Тобто розмір елемента залишається як є (в цьому випадку 200х100). Але оригінальне зображення буде збільшене рівно у два рази. Частина зображення, яка вийде за межі розмірів width і height не буде відображатися. Який саме шматок ми захочемо показати - керуємо першими двома параметрами зміщення по горизонталі та вертикалі у viewBox.

<svg width="200" height="100" viewBox="0 0 100 50">
  
</svg>

Якщо значення у viewBox будуть вдвічі більші значень у width і height, то це співвідношення 1:2. Тобто розмір елемента залишається як є (в цьому випадку 200х100). Але оригінальне зображення буде зменшено рівно у два рази. Розташування так само можемо змінювати за допомогою зміщень у viewBox.

<svg width="200" height="100" viewBox="0 0 400 200">
  
</svg>

Масштабування на практиці

На практиці розробники часто видаляють в SVG атрибути viewport тобто width і height. І задають ці розміри у файлі стилів CSS, або контейнеру, який обгортає цю SVG. Тоді іконка змасштабується по заданому розміру в CSS.

Також зверніть увагу, що SVG треба додати властивість display: block; щоб прибрати 4px відступу знизу.

Покликання:

Докладніше про SVG

Масштабування в SVG