SVG, или Scalable Vector Graphics, — это векторный формат изображения на основе XML для двумерной графики.
Ключевые особенности:
- Масштабируемость: Изображения остаются четкими при любом масштабе, так как описываются математическими формулами, а не пикселями.
- XML-формат: Структура SVG-файлов описывается тегами, подобно HTML. Это делает их читаемыми и редактируемыми текстом.
- Интерактивность: Возможность добавлять интерактивные элементы с помощью JavaScript.
- Анимация: Поддержка анимации элементов с помощью CSS или JavaScript.
- Доступность: Возможность описания содержимого для людей с ограниченными возможностями.
- Легкость: SVG-файлы могут быть меньше растровых изображений при одинаковом качестве.
Способы использования SVG:
-
Встраивание в HTML через тег <svg>:
html
-
Использование как фонового изображения в CSS:
css
-
Через тег <img>:
html
-
Через тег <object> или <iframe>.
SVG идеально подходит для логотипов, иконок, иллюстраций, графиков и диаграмм, где важна четкость при различных размерах и возможность интерактивности.