HTML тег <svg>

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

SVG (Scalable Vector Graphics – масштабируемая векторная графика) - язык разметки, расширенный из XML для описания двухмерной векторной графики.

Для создания изображения в векторной графике используются простые геометрические фигуры (точки, линии, кривые, многоугольники). С их помощью можно создавать масштабируемые изображения, которые не теряют в качестве при масштабировании.

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</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>

Результат

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

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

SVG - язык для описания 2D графиков в XML. Canvas чертит 2D графики в JavaScript.

SVG основан на XML и каждый элемент доступен в пределах SVG DOM. Можно применить обработчики событий JavaScript для этого элемента.

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

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

Атрибуты

Атрибут Значение Описание
baseProfile
none (default)
full
basic
tiny
Описывает минимальный профиль SVG языка, необходимый для корректного отображения содержания.
Не поддерживается после SVG2.
contentScriptType content-type Устанавливает язык скрипта по умолчанию для SVG фрагмента.
Не поддерживается после SVG2.
contentStyleType content-type Устанавливает таблицу стилей по умолчанию для SVG фрагмента.
Не поддерживается после SVG2.
height length |
percentage
Устанавливает высоту элемента.
preserveAspectRatio none
xMinYMin,br/> xMidYMin
xMaxYMin
xMinYMid
xMidYMid
xMaxYMid
xMinYMax
xMidYMax
xMaxYMax
Определяет выравнивание отмасштабированного изображения относительно области просмотра.
meet (default) Указывает, что изображение должно сохранить свои пропорции и быть полностью видимым.
slice Указывает, что изображение должно сохранить свои пропорции и будет отмасштабировано в соответствии с максимальным граничным значением области просмотра. Части изображения, которые не помещаются в область просмотра, будут обрезаны.
version number Устанавливает версию SVG.
Не поддерживается после SVG2
viewbox length |
percentage
Устанавливает ширину элемента.
x length |
percentage
Указывает координату оси x SVG контейнера.
y length |
percentage
Указывает координату оси y SVG контейнера.

Browser support

4+ 9+ 3+ 4+ 10+



Related articles