<Proger/> Про мене
ProProger

Веб-дизайн > SVG і як його застосовувати

Автор: / Час публікації: 20/12/2017 20:18

Всім привіт! Хочу сьогодні розказати про формат зображення SVG (Scalable Vector Graphics - з англ. Масштабована векторна графіка). Формат було створено ще в 90-х роках, але він набув популярності в веб-розробці недавно. Завдяки йому можна змінювати розмір зображення в браузері без втрати якості, можна робити різні анімації, використовуючи SVG.

Для початку нам потрібно створити цю картинку в якомусь редакторі векторних зображень. Я для цього використовую Adobe Illustrator. Але в Інтернеті можна знайти також і безкоштовні редактори. Картинку, яку Ви створили, потрібно зберегти в уже відомому нам форматі .svg. В Illustrator для цього потрібно перейти File > Save As... і вибрати тип файлу SVG. Цей файл можна відкрити будь-яким текстовим редактором. І там буде звичайний HTML-код. Існує декілька способів вставлення SVG-картинки на сайт:

#1.У HTML-документ

Першим і найуніверсальнішим способом є вставлення коду прямо в HTML-код. Цей спосіб є хороший тим, що до картинки можна застосувати анімацію або якісь стилі. Отриманий нами код з Illustrator можна скороти і вставити на сайт в потрібне місце:

<svg x="0px" y="0px" viewBox="0 0 200 200">
<style type="text/css">
	.st0{fill:#FFFFFF;}
</style>
<g >
	<polygon class="st0" points="73.9,145.1 8.4,155.7 39.3,99.9 8.5,44 74,54.8 120.6,9.4 130.2,72.2 189.4,100.1 
		130.1,127.9 120.4,190.7"/>
	<path id="XMLID_14_" d="M117.5,18.7l7.8,51.8l0.7,4.7l4.3,2l48.4,22.8l-48.5,22.7l-4.4,2l-0.7,4.7l-8,51.8l-38.7-37.8l-3.2-3.2
		l-4.5,0.7l-54.1,8.7l25.3-45.5l2.4-4.4l-2.4-4.4L17,49.9L71,58.8l4.5,0.7l3.3-3.2L117.5,18.7 M123.8,0L72.5,50L0.1,38.1l34.1,61.8
		L0,161.6l72.4-11.7l51.2,50.1l10.7-69.1l65.9-30.8l-65.8-31L123.8,0L123.8,0z"/>
</g>
</svg>

#2.У тег <img>

Є метод вставлення SVG-зображення аналогічний до вставлення звичайної картинки - за допомогою тегу img. Просто потрібно вказати шлях до SVG-файлу в атрибуті src.

<img src="/path/to/picture.svg">

Але при використанні цього методу неможливо застосувати анімацію або стилі.

#3.Фонове зображення

Також, як і звичайну картинку, можна вставити і SVG картинку як фонове зображення через CSS. Для цього потрібно також просто вказати шлях до картинки. Але, як і попередній спосіб, тут не можна буде застосовувати анімацію і стилі до картинки.

.image {
  background-image: url(/path/to/picture.svg);
}

SVG-зображення зазвичай використовують для значків і логотипів на сайті. За допомогою них можна зробити сайт досить-таки цікавим і не звичайним. Для цього потрібна лише уява і трохи знань про SVG. Якщо Ви хочете, щоб я пробовжував писати статті про SVG, то напишіть свою думку в коментарях.

Посилання:

Документація SVG - www.w3schools.com/graphics/svg_intro.asp
Не забувай написати коментар і поширити посилання в соц. мережах за допомогою кнопок нижче! Дякую за увагу!

Коментарі(0)