Продовження дуже цікавого туторіалу про SVG від DesignTalk.club!
1-ша частина – Навіщо використовувати SVG: 8 ну ДУЖЕ переконливих причин причин
Де використовувати SVG?
SVG найкраще підходить для відображення логотипів, іконок, карт, прапорів, графіків та іншої графіки, створених у графічних редакторах на кшталт Illustrator та Sketch у інтернеті. SVG можна редагувати в текстовому редакторі, а також за допомогою JS та CSS. При цьому памятайте, що за допомогою SVG ви надсилаєте вказівки, як намалювати щось самому браузеру, а не безпосередньо малюнки.
Тег зображення
Ви можете вставити зображення SVG на сторінку так само, як і будь-яке інше зображення за допомогою тегу зображення HTML:
<img src="myAwesomeSVG.svg" alt="My Awesome SVG">
Вбудовування зображення на сторінку таким способом передбачає розмір оригінального файлу SVG, якщо ви не вкажете атрибут ширини та висоти в HTML або через CSS.
Використання тегу зображення добре для логотипів та іншого вмісту, коли вам потрібно мати доступ до атрибута alt. Ви можете підстрахуватися, якщо SVG не підтримується, використовуючи Modernizr для заміни на 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>
ДУЖЕ РАДИМО ПОЧИТАТИ:
Adobe випустила безкоштовну програму з основними функціями Photoshop, Illustrator та Premiere Pro
Як робити дизайн додатків: КЛАСНІ поради від американського дизайнера