SVG и системы иконок
Что это такое
SVG — это формат векторной графики на основе XML, и браузер отрисовывает её как часть страницы. Разметка, а не файл изображения: поэтому фигуры можно стилизовать и анимировать через CSS, а поведение описать на JavaScript. Система иконок задаёт способ, которым проект организует набор таких иконок — спрайты, встроенную в разметку графику или шрифт иконок, — чтобы применять их единообразно и отдавать эффективно.
Почему это важно
Иконок много, они малы, и ошибиться в них легко. Сделанные хорошо, они остаются чёткими при любом масштабе, соразмерны шрифту и наследуют текущий цвет, а декоративные иконки скринридер не читает. Если сделать плохо, получатся растровые картинки, которые размываются, шрифт, который молча ломается, когда нужного глифа нет, или кнопка без подписи, которая ничего не сообщает. Решений немного — как доставлять иконки, как задавать их размер и цвет, как подписывать, — но каждое распространяется на все иконки продукта. Поэтому место иконкам в системе, а не в папке со скачанными файлами.
Что в этом треке
- Основы SVG (02-frontend/17-svg-icon-systems/01-svg-fundamentals) — система координат, фигуры и то, почему одну и ту же разметку можно стилизовать через CSS.
- Системы иконок и доступность (02-frontend/17-svg-icon-systems/02-icon-systems-and-accessibility) — способы доставки и правила подписи, сохраняющие иконки осмысленными.
Предварительные требования
- Язык гипертекстовой разметки (HTML) (02-frontend/03-html)
- Каскадные таблицы стилей (CSS) (02-frontend/05-css)
Что читать дальше
- Доступность (WCAG / a11y) (02-frontend/11-accessibility-wcag-a11y) — подпись иконок напрямую следует из правил доступного имени.
- Моушн-дизайн (02-frontend/16-motion-design) — иконки часто становятся местом для небольшой осмысленной анимации.
- Инструменты разработчика в браузере (02-frontend/27-browser-devtools) — если открыть отрисованный SVG в инспекторе, видно структуру DOM, которую можно стилизовать.