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

Продовження дуже цікавого туторіалу про від DesignTalk.club!

1-ша частина – Навіщо використовувати SVG: 8 ну ДУЖЕ переконливих причин причин

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

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

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

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

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

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

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

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

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

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

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

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

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

.hero {
  background-image: url('myAwesomeSVGfallback.png');
  background-image: url('myAwesomeSVG.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>

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

Adobe випустила безкоштовну програму з основними функціями Photoshop, Illustrator та Premiere Pro

Як робити дизайн додатків: КЛАСНІ поради від американського дизайнера

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

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