Введение в SVG в HTML

В этой статье и связанном с ней примере показано, как использовать встроенный SVG.

Базовый пример

Чтобы добавить встроенный SVG в HTML-файл, вставьте в него содержимое всего SVG-файла.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>SVG Demo</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>
    <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" role="img">
      <title>A gradient</title>
      <linearGradient id="gradient">
        <stop class="begin" offset="0%" stop-color="red" />
        <stop class="end" offset="100%" stop-color="black" />
      </linearGradient>
      <rect x="0" y="0" width="100" height="100" fill="url(#gradient)" />
      <circle cx="50" cy="50" r="30" fill="url(#gradient)" />
    </svg>
  </body>
</html>

Обсуждение

Страница представляет собой обычный HTML и CSS с единственным SVG. Единственная интересная часть — содержащийся в нём элемент <svg>. Для этого элемента и его дочерних элементов задано пространство имён SVG. Элемент содержит градиент и две фигуры, залитые этим градиентом. Цвета цветовых остановок градиента задаются с помощью CSS.

Стоит отметить три атрибута и один вложенный элемент:

1. Атрибут viewBox задаёт логическую систему координат, относительно которой определяются координаты изображения SVG. В данном случае изображение размещается в области просмотра размером 100 на 100.

2. Атрибут preserveAspectRatio указывает, что соотношение сторон необходимо сохранить: изображение центрируется в доступной области, масштабируется до максимального размера по высоте или ширине, а затем всё, что выходит за её пределы, обрезается.

3. Добавление role="img" гарантирует, что вспомогательные технологии будут воспринимать SVG как изображение.

4. Элемент <title> внутри SVG содержит краткое текстовое описание графики для обеспечения доступности. Текст заголовка не отображается, но браузеры могут показывать его как всплывающую подсказку при наведении указателя на SVG. Элемент <title> должен быть первым элементом после открывающего тега <svg>.

Рекомендации

Если SVG добавлен с помощью элемента <img>, атрибут alt задаёт альтернативный текст, благодаря которому изображение становится доступным. Встроенный SVG не поддерживает атрибут alt. Однако есть несколько других способов обеспечить его доступность. При использовании встроенных SVG исходный код доступен в DOM, а значит, вся разметка встроенного SVG-файла доступна для объектной модели доступности (AOM). Добавление элемента <title> обеспечивает альтернативный текст.

Если изображение передаёт больше, чем можно описать кратким заголовком, добавьте развёрнутое описание с помощью элемента <desc>. Элемент <desc> содержит развёрнутое текстовое описание для обеспечения доступности. Как и текст <title>, текст внутри элемента <desc> не отображается на экране.

Если SVG можно снабдить подписью в виде видимого текста, укажите ссылку на этот текст с помощью атрибута aria-labelledby. В качестве альтернативы добавьте атрибут aria-labelledby со значением id элемента <title>.

<svg viewBox="0 0 100 125" role="img" aria-labelledby="svgTitle svgDescription">
  <title id="svgTitle">Manual</title>
  <desc id="svgDescription">
    A nondescript twelve page booklet opened to the middle page
  </desc>
  <defs>
    <style>
      rect {
        fill: #cccccc;
        stroke: #666666;
        transform-origin: top;
      }
    </style>
  </defs>

  <rect width="36" height="60" x="13" y="18" ry="2" transform="skewy(24deg)" />
  <rect width="39" height="60" x="11" y="20" ry="2" transform="skewY(18deg)" />
  <rect width="42" height="90" x="8" y="22" ry="2" transform="skewY(12deg)" />
  <rect width="36" height="60" x="50" y="18" ry="2" transform="skewY(-24deg)" />
  <rect width="39" height="60" x="50" y="20" ry="2" transform="skewY(-18deg)" />
  <rect width="42" height="90" x="50" y="22" ry="2" transform="skewY(-12deg)" />
</svg>

Если SVG можно описать видимым текстом, на этот текст можно сослаться с помощью атрибута aria-describedby. Если используется aria-describedby, он имеет приоритет над <desc>.

В нашем примере мы указали и описание, и заголовок в атрибуте aria-labelledby, поскольку он поддерживается вспомогательными технологиями лучше, чем aria-describedby.

См. также

• Начало работы с SVG