Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023