HTML тег svg — Learn HTML

Тег <svg> используется как контейнер для SVG-графики.

SVG (Scalable Vector Graphics) — это язык для двумерной графики, основанный на XML. В отличие от растровых форматов, таких как PNG или JPEG, изображение SVG описывается фигурами и координатами, а не фиксированной сеткой пикселей, поэтому оно остаётся чётким при любом размере и масштабируется без потери качества. SVG также поддерживает интерактивность, анимацию и полный доступ к каждому элементу через DOM.

На этой странице рассматривается, как встраивать SVG непосредственно в HTML, ключевая концепция системы координат viewBox, базовые фигуры для рисования, способы обеспечения доступности SVG, атрибуты элемента <svg>, а также сравнение SVG и <canvas>.

Синтаксис `<svg>`

Тег <svg> используется парами. Фигуры, которые нужно нарисовать, записываются между открывающим (<svg>) и закрывающим (</svg>) тегами.

Пример использования HTML-тега `<svg>`:

HTML-тег <svg>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div style="display:flex; flex-flow:row wrap;">
      <svg width="180" height="180">
        <rect x="20" y="20" rx="20" ry="20" width="100" height="100" style="fill:lightgray; stroke:#1c87c9; stroke-width:4;"/>
      </svg>
      <svg width="200" height="200">
        <circle cx="100" cy="70" r="60" stroke="#1c87c9" stroke-width="4" fill="lightgray"/>
      </svg>
      <svg width="200" height="200">
        <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lightgray; stroke:#1c87c9; stroke-width:4; fill-rule:evenodd;"/>
      </svg>
    </div>
  </body>
</html>

Попробуйте сами »

Опасно

Атрибут xmlns требуется только для внешнего элемента <svg> самостоятельных SVG-документов (файлов .svg). Он не нужен для вложенных элементов <svg> или при встраивании SVG непосредственно в HTML-документ.

Пример HTML-тега `<svg>`, рисующего эллипс:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#1c87c9" />
    </svg>
  </body>
</html>

Попробуйте сами »

viewBox и система координат SVG

viewBox — это наиболее важная концепция в SVG. Она определяет систему координат, в которой рисуются все фигуры, и именно она делает SVG по-настоящему масштабируемым.

Атрибуты width и height задают размер SVG-блока на странице (в пикселях CSS). Атрибут viewBox, напротив, определяет внутреннюю систему координат с помощью четырёх чисел:

viewBox="min-x min-y width height"

min-x, min-y — координаты верхнего левого угла области просмотра.
width, height — ширина и высота области просмотра в пользовательских единицах.

Браузер затем отображает эту внутреннюю область просмотра на экранные значения width/height, масштабируя по мере необходимости. Таким образом, окружность, нарисованная при cx="50" cy="50" с viewBox="0 0 100 100", всегда будет находиться по центру, независимо от того, насколько большим будет отрендерен SVG.

Пример ниже рисует одну и ту же окружность в двух SVG. Первый полагается только на width/height, поэтому координаты являются пиксельными и окружность привязана к этому размеру. Второй добавляет viewBox, поэтому рисунок масштабируется, заполняя значительно больший блок, а код при этом остаётся идентичным:

<!-- No viewBox: coordinates are pixels, fixed 100×100 drawing -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

<!-- viewBox: same coordinates, but the 0 0 100 100 grid is
     stretched to fill a 300×300 box on the page -->
<svg width="300" height="300" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#1c87c9" />
</svg>

Поскольку второй SVG разделяет систему координат (viewBox) и отрендеренный размер (width/height), его можно изменять в размере — даже с помощью CSS — и каждая фигура будет масштабироваться пропорционально. Именно поэтому viewBox необходим для адаптивных иконок и иллюстраций.

Фигуры SVG

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

<rect> — прямоугольник, позиционируемый с помощью x/y и задаваемый по размеру атрибутами width/height; rx/ry скругляют углы. См. SVG Rectangle.
<circle> — окружность, определяемая центром cx/cy и радиусом r. См. SVG Circle.
<ellipse> — как окружность, но с двумя радиусами: rx и ry. См. SVG Ellipse.
<line> — прямая линия от (x1,y1) до (x2,y2). См. SVG Line.
<polygon> — замкнутая фигура, заданная списком points. См. SVG Polygon.
<path> — наиболее мощная фигура; атрибут d кодирует линии, кривые и дуги, позволяя нарисовать почти что угодно. См. SVG Path.

Большинство фигур разделяют атрибуты представления: fill (цвет заливки), stroke (цвет обводки) и stroke-width (толщина обводки). Полный список элементов и атрибутов см. в SVG Reference.

Доступность

Встроенный SVG является частью DOM страницы, поэтому программы чтения с экрана могут его читать — но только при наличии доступного текста. Декоративная фигура без метки будет объявлена как что-то бесполезное.

Для значимых SVG (иконок, диаграмм, логотипов) выполните следующее:

Добавьте элемент <title> в качестве первого дочернего — он служит доступным именем (и отображается как подсказка).
При необходимости добавьте элемент <desc> с более подробным описанием.
Укажите role="img" на <svg>, чтобы вспомогательные технологии воспринимали его как единое изображение.
Ссылайтесь на текст с помощью aria-labelledby или используйте aria-label напрямую.

<svg width="120" height="120" viewBox="0 0 120 120"
     role="img" aria-labelledby="logoTitle logoDesc">
  <title id="logoTitle">W3Docs logo</title>
  <desc id="logoDesc">A blue circle with a light gray center.</desc>
  <circle cx="60" cy="60" r="50" fill="#1c87c9" />
  <circle cx="60" cy="60" r="25" fill="lightgray" />
</svg>

Если SVG является исключительно декоративным и не несёт никакой информации, скройте его от вспомогательных технологий с помощью aria-hidden="true".

Различия между SVG и Canvas

На первый взгляд, и SVG, и Canvas делают одно и то же — рисуют векторную графику с помощью координатных точек. Однако между ними есть различия. Рассмотрим их.

SVG — это язык для описания двумерной графики в XML, тогда как Canvas используется для рисования двумерной графики на лету (с помощью JavaScript).

SVG похож на программу «рисования». Рисунок — это инструкция рисования для каждой фигуры, и любую часть любой фигуры можно изменить. Рисунки ориентированы на фигуры.

Canvas похож на программу «покраски». Когда пиксели попадают на экран — это и есть ваш рисунок. Изменить фигуры можно только путём перезаписи их другими пикселями. Изображения ориентированы на пиксели.

SVG основан на XML, что означает, что каждый элемент доступен в DOM SVG. В SVG нарисованная фигура запоминается как объект. В Canvas браузер забывает нарисованную форму сразу после её отрисовки. Если нужно внести изменения в рисунок, его придётся рисовать заново.

Атрибуты

Атрибут	Значение	Описание
height	length, percentage	Определяет высоту элемента SVG на странице.
width	length, percentage	Определяет ширину элемента SVG на странице.
viewBox	min-x min-y width height	Определяет положение и размер внутренней системы координат (области просмотра SVG).
preserveAspectRatio	alignment + meetOrSlice (см. ниже)	Управляет тем, как `viewBox` масштабируется и выравнивается, когда его соотношение сторон отличается от блока SVG.
x	length, percentage	Задаёт координату x вложенного SVG-контейнера. Не влияет на внешний `<svg>`.
y	length, percentage	Задаёт координату y вложенного SVG-контейнера. Не влияет на внешний `<svg>`.

Значения preserveAspectRatio

Когда соотношение сторон viewBox не совпадает с блоком SVG, атрибут preserveAspectRatio определяет способ подгонки. Он принимает значение выравнивания, за которым может следовать значение meetOrSlice:

Выравнивание (к какому краю/центру привязываться):

none — растянуть для заполнения, игнорируя соотношение сторон.
xMinYMin, xMidYMin, xMaxYMin
xMinYMid, xMidYMid (по умолчанию), xMaxYMid
xMinYMax, xMidYMax, xMaxYMax

Meet или slice (способ масштабирования):

meet (по умолчанию) — масштабировать до тех пор, пока весь viewBox не уместится внутри блока.
slice — масштабировать до тех пор, пока viewBox не покроет весь блок, обрезая выступающее.

Удалённые атрибуты

Атрибуты version, baseProfile, contentScriptType и contentStyleType использовались в SVG 1.1, но устарели и удалены в SVG 2 и больше не нужны. SVG 2 — это текущая редакция спецификации SVG, более тесно интегрированная с HTML и CSS; современные браузеры отрисовывают SVG без этих атрибутов.

Практика

Какие утверждения о теге SVG верны? (Выберите все подходящие)

Тег SVG является контейнером для векторной графики в HTML.Графика SVG НЕ теряет качество при увеличении или изменении размера.Графика SVG основана на пикселях, как PNG или JPEG.Атрибут viewBox определяет внутреннюю систему координат SVG.Атрибут xmlns обязателен для встроенного SVG внутри HTML-документа.

Синтаксис <svg>

Пример использования HTML-тега <svg>:

Пример HTML-тега <svg>, рисующего эллипс: