Формат зображень SVG

SVG - векторний формат зображень. Це означає, що будь-яке SVG-зображення добре маштабується, зберігаючи чіткість зображення.

SVG-зображення в html можна вставити трьома способами:
- в атрибут src тега <img>;
- як фон: background: url(img/cat.svg) ...;
- код файла SVG вставляється безпосередньо в HTML-код сторінки.

Створіть html-файл і вставне у нього SVG-файл в якості атрибута тега img.

Спробуйте різні розміри для цього зображення:


				<img src="cat.svg" alt="cat" width="32"><br>

				<img src="cat.svg" alt="cat" width="400"><br>

				<img src="cat.svg" alt="cat" width="1200">

Створіть блок довільних розмірів і задайте йому фонове зображення cat.svg (поексперементуйте з css-властивістю background-size).

Структура файла SVG

Відкрийте ваш SVG-файл у IDE або текстовому редакторі.

Як бачимо, формат файла - звичайний текстовий, використовує синтаксис XML.

Зображення створюється за допомогою примітивів, описаних тегами і атрибутами.

Можна вставити SVG-зображення у веб-сторінку (при чому, теги Doctype та xml не потрібні):


				<html>

				<body>

				  <svg version="1.1" id="Capa_1" ...

				    <g>

				      <path d="M540.27,671.672c-0.492,0.493- ...

				      ...

				    </g>

				  </svg>

				</body>

				</html>

Youtube: HTML Шорти - Як правильно вставляти SVG (4:24).

Кожен тег - це примітив, лінія, окружність, область на зображенні.

Розглянемо атрибути тега svg.

Тегу можна задавати атрибути id, class, data-* та інші.

width, height - стандартні атрибути тегів, бажано видалити і задавати через стилі.

viewBox - видима область, в умовних одиницях (x, y, width, height).

При створенні власних зображень задавайте розмір зображення і підкладки 100 х 100, 1000x1000 для зручності обчислень (ну чи 100 х 250, 70 х 100, щоб один з розмірів був 100 чи 1000).


				<svg viewBox="0 0 100 100">

Згодом стандарти стають суворішими. Можливо, в майбутньому SVG не будуть відображатися без namespaces, тому не забувайте їх прописувати:


				<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

Тепер можна працювати з тегами як з елементами DOM: задавати їм стилі, модифікувати їх, реагувати на події.

Першим чином поексперементуємо зі стилями. Їх можна напряму в теги прописувати:


				<path style="..."

Але краще працювати з класами, як і зі звичайними тегами:


				<style>

				  .some-class { ... }

				</style>


				<svg ...>

				  <path class="some-class" ...

Та для формату SVG нам доведеться вивчити трохи нових стилів.

fill - колір зафарбовування.

stroke - колір ліній.

stroke-width - товщина ліній (без px, залежить від розмірів viewBox).

Ці всі стилі можна задавати у якості атрибутів тега: <path fill="red" ...

Якщо у вас в зображенні є теги <path> - це області, вони можуть мати зафарбовування. Поексперементуйте, додавши їм клас і колір: path { fill: #5a5a5a; } .path1 { fill: red; } #path2 { fill: blue; } .path3 { fill: green; opacity: 0.3; }

Одразу можна спробувати і події:


				.path3:hover { opacity: 1; }

				<script>

				  path2.onclick = function(){ alert('hello'); };

				</script>