HTML-тег <svg>
Тег <svg> используется в качестве контейнера для графики SVG.
SVG (Scalable Vector Graphics) — это язык для двумерной графики на основе XML с поддержкой анимации и интерактивности. Для рисования изображений он использует простые геометрические фигуры (круг, линии, полигон и т. д.).
DANGER
Атрибут xmlns требуется только для внешнего элемента <svg> в автономных SVG-документах. Он не требуется для внутренних элементов <svg> или в HTML-документах.
Синтаксис <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>Пример использования HTML-тега <svg> для рисования эллипса:
Пример использования 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>Различия между SVG и Canvas
На первый взгляд, и SVG, и Canvas выполняют одну и ту же задачу — рисуют векторную графику с использованием координатных точек. Однако между ними есть различия. Рассмотрим их.
SVG — это язык описания 2D-графики в формате XML, тогда как Canvas используется для рисования 2D-графики в реальном времени (с помощью JavaScript).
SVG похож на программу «draw». Графика представляет собой набор инструкций для каждой фигуры, и любую часть любой фигуры можно изменить. Графика ориентирована на объекты (фигуры).
Canvas похож на программу «paint». Как только пиксели попадают на экран, рисунок готов. Изменять фигуры можно только перезаписывая их другими пикселями. Графика ориентирована на пиксели.
SVG основан на XML, что означает, что каждый элемент доступен в DOM-дереве SVG. В SVG нарисованная фигура запоминается как объект. В Canvas браузер забывает нарисованную форму сразу же после её отрисовки. Если вам нужно внести изменения в рисунок, его придётся рисовать заново.
Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| baseProfile | none (default), full, basic, tiny | Описывает минимальный профиль языка SVG, который, по мнению автора, необходим для корректного отображения содержимого. Не поддерживается после SVG2. |
| contentScriptType | content-type | Указывает язык скриптов по умолчанию для данного фрагмента документа. Не поддерживается после SVG2. |
| contentStyleType | content-type | Определяет язык таблиц стилей по умолчанию, используемый фрагментом SVG. Не поддерживается после SVG2. |
| height | length, percentage | Определяет высоту элемента SVG. |
| preserveAspectRatio | none, xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax, meet (default), slice | Определяет, как фрагмент SVG должен деформироваться, если он встроен в контейнер с другим соотношением сторон. |
| version | number | Определяет версию SVG, используемую для внутреннего содержимого элемента. Не поддерживается после SVG2. |
| viewBox | list-of-numbers | Определяет границы области просмотра SVG для текущего фрагмента SVG. |
| width | length, percentage | Определяет ширину элемента SVG. |
| x | length, percentage | Определяет координату x контейнера SVG. Не влияет на внешние элементы SVG. |
| y | length, percentage | Определяет координату y контейнера SVG. Не влияет на внешние элементы SVG. |
Практика
Каково назначение тега SVG в HTML?