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 контейнера.


4+	3+	4+	10+

10+