Продолжая разговор об СВГ, расскажу об ещё одной фишке этого формата в вебе.
Напомню, что СВГ — векторный формат графики, который хранит внутри не информацию о пикселях, а код, набор инструкций для построения изображения из примитивных фигур и кривых. Подробнее о векторной и растровой графике читайте в прошлом совете.
Так вот, СВГ‑картинки можно показать на сайте минимум тремя способами:
Во‑первых, показать тегом img как любую другую картинку:
<img src="logo.svg">Во‑вторых, установить свойством background как изображение фона:
.pattern {
background: url('pattern.svg');
background-size: 20%;
}Чтобы увидеть СВГ‑код, откройте файл .svg в любом текстовом редакторе
В‑третьих, вставить СВГ‑код прямо внутрь ХТМЛ‑кода. Оба этих языка относятся к семейству языков разметки XML, имеют схожий синтаксис — теги, атрибуты, вложенность и древовидную структуру — и ХТМЛ допускает встраивание СВГ:
Чтобы увидеть СВГ‑код, откройте файл .svg в любом текстовом редакторе
<!-- Пример СВГ-иконки внутри ХТМЛ-разметки -->
<nav class="bottom-nav">
<!-- … -->
<a href="/users">
<!-- Начало СВГ-кода -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<!-- Конец СВГ-кода -->
</a>
</nav>
Громоздкость СВГ‑кода компенсируют использованием программ‑шаблонизаторов, а при ручной вёрстке работу может облегчить тег use.
use. МДН
Встраивание кода громоздко, но даёт нам возможность работать с СВГ‑тегами, в том числе — стилизовать их с помощью ЦСС, причём стилизовать даже отдельные фигуры и кривые внутри картинки. Как и в ХТМЛ, можно указать классы для точечной стилизации.
Громоздкость СВГ‑кода компенсируют использованием программ‑шаблонизаторов, а при ручной вёрстке работу может облегчить тег use.
use. МДН
Всё это позволяет, например, перекрашивать иконку:
<svg class="book" width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Дадим класс части иконки, которую хотим перекрашивать -->
<path class="book-in" d="M3.5 1H17V21H3.5C2.83696 21 …" fill="#FF2121" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 18.5C1 17.837 …" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
/* Прицеливаемся в фигуру по классу */
.book.is-typography .book-in {
/* fill — уникальное свойство цвета заливки для СВГ-элементов */
fill: #e30016;
}
.book.is-text .book-in {
fill: #004f83;
}
.book.is-fff .book-in {
fill: #007a78;
}Работать с толщиной и типом линий:
<svg class="icon-shield" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>
<svg class="icon-shield is-active" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">…</svg>.icon-shield {
/* Уникальное свойство толщины контура для СВГ-элементов */
stroke-width: 1;
}
.icon-shield.light {
stroke-width: .5;
}
.icon-shield.dashed {
/* Уникальное свойство контура для СВГ-элементов */
stroke-dasharray: 1px;
}
Переключать видимость отдельных элементов:
<svg class="battery" width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="battery-in" d="M17 1H3C1.89543 1 1 1.89543 1 3V11C1 12.1046 1.89543 13 3 13H17C18.1046 13 19 12.1046 19 11V3C19 1.89543 18.1046 1 17 1Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="black"/>
<path d="M23 8V6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path class="battery-lightning" d="M10.1491 5.09091L10.3636 3.36364L9.48 4.42545M12.3891 7.33091L13.2727 6.27273H11.3309M8.54545 5.54545L6.72727 7.72727H10L9.63636 10.6364L11.4545 8.45455M6 3L14 11" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
.battery:not(.is-empty) .battery-lightning {
display: none;
}И пламенеть сердца:
<svg class="icon-heart" width="21" height="19" viewBox="0 0 21 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.2913 1.61183C18.7805 1.10083 18.1741 0.695472 17.5066 …" />
</svg>
@keyframes icon-heart-idle {
0%, 100% {
fill: oklch(0.5 0.23 30);
}
50% {
fill: oklch(0.68 0.27 35);
}
}
.icon-heart path {
animation: icon-heart-idle 2s ease-in-out infinite;
}К СВГ‑тегам применимо большинство обычных ЦСС‑свойств, а также несколько уникальных, вроде fill, stroke, stroke-width, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset.
Управление СВГ из ЦСС может избавить проект от вороха отдельно лежащих вариантов иконок и иллюстраций, а также добавить самой векторной графике жизнь и изюминку.
Важно: несмотря на схожесть кода, у СВГ‑тегов хватает своих нюансов и капризов. Эти нюансы редко всплывают при решении базовых задач, но если вы захотите сделать что‑нибудь эдакое‑нестандартное, обязательно проверьте результат работы в разных браузерах на предмет сюрпризов и будьте готовы к увлекательной отладке.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.