Як використовувати SVG правильно (Частина 2)

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.

Читайте у наступній частині – як писати SVG для Інтернету

Також рекомендуємо переглянути:

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

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