<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.