<svg>
- 25 января 2023
Тег <svg>
используется для определения векторного изображения, которое можно бесконечно масштабировать без потери качества. Он позволяет создавать сложные фигуры, анимацию и интерактивную графику.
Синтаксис тега <svg>
<svg>
<!-- SVG графика и фигуры -->
</svg>
Вот простой пример, который рисует красный круг:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <svg>
является семантическим, поскольку он придает смысл содержимому, которое содержит.
Примеры использования
Рисование основных фигур:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="blue" />
<circle cx="100" cy="100" r="40" fill="white" />
<line x1="50" y1="150" x2="150" y2="50" stroke="white" stroke-width="5" />
</svg>
Создание анимации:
<svg width="200" height="200">
<circle cx="100" cy="100" r="40" fill="blue">
<animate attributeName="cx" values="50;150;50" dur="2s" repeatCount="indefinite" />
</circle>
</svg>
Построение интерактивной графики:
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="red" onclick="alert('Clicked!')" />
</svg>
Для чего использовать тег <svg>
- создание иконок или логотипов;
- построение интерактивных графиков и диаграмм;
- рисование иллюстраций и анимации;
- создание карт и планов этажей;
- проектирование интерфейсов;
Атрибуты тега <svg>
width
— ширина в пикселях или процентах.
height
— высота в пикселях или процентах.
viewBox
— положение и размер области просмотра.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
- Изображения SVG могут быть более сложными, чем обычные изображения, что может привести к увеличению размера файла и замедлению загрузки страницы.
- Синтаксис SVG может быть сложнее обычного HTML.
- Некоторые старые веб-браузеры могут не поддерживать все возможности SVG.
Нюансы
В некоторых ситуациях SVG-изображение отображается не так, как ожидалось, из-за неправильного синтаксиса или использования неподдерживаемых функций.
Поддержка браузеров
Тег поддерживается всеми современными браузерами.
Актуальная информация — на сaniuse.
Альтернативные теги
Альтернативными тегами тегу <svg>
являются <canvas>
и <img>
. Однако, эти теги имеют другие случаи использования и возможности по сравнению с SVG.
Актуальность
Тег <svg>
не устарел.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023