Як і де варто використовувати зображення SVG: 4 способи

DesignTalk.club продовжує великий і цікавий туторіал про .

Де використовувати SVG?

Існує кілька способів використання SVG в Інтернеті. Підтримка браузера дуже хороша, її лише бракує у IE8 і нижче, а також дуже ранніх версіях браузера Android. Його безпечно використовувати, тому ми повинні його використовувати! За допомогою SVG ви надсилаєте вказівки, як намалювати щось самому браузеру, а не безпосередньо малюнки.

Існує безліч сайтів, на яких ви можете надсилати SVG-зображення; якщо ви використовуєте іконки або логотипи, спробуйте

Тег зображення

Ви можете вставити зображення SVG на сторінку так само, як і будь-яке інше зображення за допомогою тегу зображення HTML:

<img src="myAwesomeSVG.svg" alt="My Awesome SVG">

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

Використання тегу зображення добре для логотипів та іншого вмісту, коли вам потрібно мати доступ до атрибута alt. Ви можете підстрахуватися, якщо SVG не підтримується, використовуючи для заміни на PNG.

Фонове зображення CSS

Ви також можете вставити зображення SVG на сторінку в CSS, використовуючи той самий метод, що і для додавання будь-якого іншого типу зображення до елемента;

.hero {
  background-image: url('myAwesomeSVG.svg');
}

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

background-repeat: no-repeat;
background-position: center center;
background-size: contain;

Щоб забезпечити підтримку, ми можемо використати трюк, що полягає у тому, як браузер аналізує CSS та надати резервний PNG прямо перед включенням нашого SVG.

.hero {
  background-image: url('myAwesomeSVGfallback.png');
  background-image: url('myAwesomeSVG.svg');
}

Вбудований SVG

SVG може бути вбудованим прямо в документ, використовуючи тег SVG:

<svg
width="100px" height="100px"
viewBox="0 0 100 100" version="1.1"
xmlns="...">
<title>My Awesome SVG</title
<circle class="circle"
cx="50" cy="50" r="50"
fill="#FFFF00">
</circle>
</svg>

Оскільки SVG є масштабованим, якщо ми надаємо тег без атрибутів ширини та висоти, SVG збільшуватиметься до розміру контейнера. Написавши наш SVG на сторінку, ми могли б видалити заливку з вбудованого SVG і створити його в CSS:

.circle {
fill: #FFFF00;
}

Зниження кількості використаних даних для використання цього методу знову залежить від надання резервної копії PNG та використанням Modernizr для виявлення підтримки SVG браузером. Єдиний недолік полягає в тому, що вбудована SVG – будучи розміткою – не буде кешуватися браузером.

Як об’єкт

Ви також можете вставити SVG як об’єкт або iframe, який використовуватиме кеш браузера, при цьому підтримувати стиль SVG.

ДУЖЕ РАДИМО ПОЧИТАТИ:

Що я дізнався, створивши дизайн понад 10 000 екранів UI (Частина 1)

Як краще зрозуміти дизайн продукту: класні поради від американського дизайнера

Теорія кольору: короткий курс для дизайнерів (Частина 1)

Залишити відповідь