Тег <svg>

Описание

Тег <svg> (Scalable Vector Graphics) создаёт контейнер для векторной графики, которая масштабируется без потери качества. Это основа для построения сложных векторных изображений непосредственно в HTML-документе.

Базовый синтаксис:
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red"/> </svg>
Примеры элементов SVG:
<!-- Простые фигуры --> <svg width="200" height="200"> <rect x="10" y="10" width="100" height="80" fill="blue"/> <circle cx="150" cy="50" r="40" fill="green"/> </svg> <!-- Текст и пути --> <svg viewBox="0 0 300 100"> <path d="M10 80 Q 150 10 290 80" stroke="black" fill="none"/> <text x="150" y="30" text-anchor="middle">SVG Текст</text> </svg> <!-- Анимация --> <svg width="100" height="100"> <circle cx="50" cy="50" r="30" fill="orange"> <animate attributeName="r" values="30;50;30" dur="3s" repeatCount="indefinite"/> </circle> </svg>

Ключевые особенности:

  • Разрешение-независимая графика
  • Поддержка анимации и интерактивности
  • Доступность через ARIA-атрибуты
  • Возможность стилизации через CSS
  • Полная интеграция с DOM

Рекомендации по использованию:

  • Используйте для иконок, диаграмм, сложной векторной графики
  • Оптимизируйте пути с помощью инструментов (SVGO)
  • Добавляйте aria-label для доступности
  • Для простых иконок предпочтительнее спрайты

Тег <svg> предоставляет мощные возможности для создания масштабируемой векторной графики, которая идеально подходит для современных адаптивных веб-интерфейсов.

Атрибуты

width Ширина SVG-изображения
height Высота SVG-изображения
viewBox Определяет систему координат и аспект
preserveAspectRatio Как сохранять пропорции
xmlns Пространство имен SVG
version Версия SVG
x Горизонтальное положение
y Вертикальное положение
accesskey Горячая клавиша для активации
class CSS-классы для стилизации
id Уникальный идентификатор
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
hidden Скрывает элемент
lang Язык содержимого
xml:lang Язык содержимого (XML)
role ARIA-роль
aria-* ARIA-атрибуты
data-* Пользовательские данные

Поддержка браузерами
9.0 4.0 10.1 3.0 3.2