Оригінальна публікація: How to Use SVG Images in CSS and HTML – A Tutorial for Beginners

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

У цій публікації я поясню причини використовувати зображення SVG та зокрема про їх використання у CSS і HTML.

Чому варто використовувати зображення SVG?

Існує багато причин використовувати зображення SVG, ось деякі з них:

  • Зображення SVG не втрачають своєї якості при збільшенні чи зміні розміру.
  • Вони можуть бути створеними та редагованими за допомогою IDE або текстового редактора.
  • Вони доступні та анімовані.
  • Вони невеликі за розміром файлу та добре масштабуються.
  • Їх можна шукати, індексувати, скриптувати та стискати.

Тепер давайте розглянемо роботу з зображеннями SVG.

Як завантажити зображення SVG, яке використано у цій публікації

Якщо ви хочете працювати із зображенням SVG, використаним у цій публікації, слідуйте крокам (та діаграмам), які показано нижче.

  • Перейдіть на unDraw.
  • Змініть колір фону на жовтий.
  • У полі пошуку введіть слово happy.
unDraw's Homepage
  • Клацніть на зображення з назвою Happy news.
  • У спливаючому вікні натисніть Download SVG for your projects.
Download the SVG file

Якщо ви слідували всім крокам, описаними вище, зображення SVG вже повинне бути на вашому комп’ютері.

3uCGy6B

Тепер відкрийте зображення SVG у зручному для вас IDE або текстовому редакторі. Перейменуйте його на happy.svg , або на будь-яку іншу назву.

Як використовувати зображення SVG у CSS та HTML

Існує декілька різних способів використання зображень SVG у CSS та HTML. У цій публікації ми дослідимо шість методів.

1. Як використовувати SVG як <img>

Цей метод — найпростіший спосіб додати зображення SVG на вебсторінку. Щоб використати цей метод, додайте елемент <img> до свого документа HTML, а в атрибут src додайте таке посилання:

<img src = "happy.svg" alt="My Happy SVG"/>

За умови, що ви завантажили зображення SVG з unDraw та перейменували його на happy.svg, ви можете додати уривок коду, наведеного вище, до свого документа HTML.

Якщо ви правильно все зробили, ваша вебсторінка буде виглядати так само, як демо нижче. 👀

Якщо ви додаєте зображення SVG, використовуючи теґ <img> та не вказуючи розміри, тоді припускається розмір початкового файлу SVG.

Наприклад, на демо вище не налаштовані розміри зображення SVG, тому це припустило початковий розмір (ширина 915.11162px та висота 600.53015px).

Зауважте: щоб змінити початковий розмір, потрібно уточнити width та height за допомогою CSS, як показано на демо нижче. Ви також можете прямо оновити початкові width та height.

Незважаючи на те, що ми можемо змінити розміри зображень SVG, доданих через теґ <img>, існують деякі обмеження, якщо ви хочете внести суттєві зміни до зображення SVG.

2. Як використовувати SVG як background-image

Це схоже на додавання SVG до документа HTML за допомогою теґу <img>. Тільки цього разу замість HTML використаємо CSS, як видно з коду нижче.

body {
  background-image: url(happy.svg);
}

Якщо ви використовуєте SVG як фонове зображення, воно має схожі обмеження, що й при використанні <img>. Тим не менш, це дозволяє більше пристосуватись до вимог користувача.

Ознайомтеся з демо, показаним нижче. За бажанням внесіть зміни за допомогою CSS.

3. Як використовувати вбудовані зображення SVG

Зображення SVG можна написати прямо в документі HTML, використовуючи теґ <svg> </svg>.

Для цього відкрийте зображення SVG у VS code або IDE, копіюйте код та вставте його всередині елемента <body> у своєму документі HTML.

<body>
 // Вставте код SVG сюди.
</body>

Якщо ви зробили все правильно, ваша вебсторінка виглядатиме так само, як демо знизу.

Якщо ви використовуєте вбудоване зображення SVG в документі HTML, це зменшує час завантаження, оскільки служить як HTTP-запит.

Цей метод більше пристосовується до вимог, ніж <img> чи background-image.

4. Як використовувати SVG як <object>

Ви також можете використати HTML-елемент <object>, щоб додати зображення SVG до вебсторінки, використовуючи такий синтаксис:

<object data="happy.svg" width="300" height="300"> </object>

Використайте атрибут data, щоб вказати адресу ресурсу, якою користуватиметься об’єкт. В нашому випадку це зображення SVG.

Використайте width та height, щоб вказати розмір зображення SVG.

Знову ж таки, знизу демо для дослідження. 😃

<object> підтримується на всіх браузерах, що підтримують SVG.

5. Як використовувати SVG як <iframe>

Хоча це недоцільно, але ви також можете додати зображення SVG, використовуючи <iframe>, як показано в демо.

Однак майте на увазі, що <iframe> складно відтримувати і це погано позначиться на пошуковій оптимізації вашого сайту (SEO).

Використання <iframe> також перешкоджає масштабу: зображення SVG, додані в цьому форматі, не є масштабованими.

6. Як використовувати SVG як <embed>

HTML-елемент <embed> — це ще один спосіб використати зображення SVG у HTML та CSS з цим синтаксисом: <embed src="happy.svg" />.

Однак майте на увазі, що цей метод також має обмеження. За даними MDN, більшість сучасних браузерів застарілі та вилучили підтримку плагінів браузера. Це означає, що покладатися на <embed> нерозумно, якщо ви хочете, щоб ваш сайт працював у браузері звичайного користувача.

Нижче наведено демо використання HTML-елемента <embed> для додавання зображення SVG.

Висновок

Сподіваюся, ви дізнались про різні способи використання зображень SVG у CSS та HTML. Очікую, що це допомогло вам вибрати правильний метод додавання зображень SVG на вебсайт.