HTML SVG

SVG определяет векторную графику в формате XML, которую можно напрямую встраивать в HTML‑страницы.

Графика SVG масштабируется и не теряет качества при увеличении или изменении размера:

SVG поддерживается всеми основными браузерами.

Что такое SVG?

SVG расшифровывается как Scalable Vector Graphics (Масштабируемая векторная графика)
SVG используется для определения векторной графики в вебе.
SVG определяет графику в формате XML.
Каждый элемент и атрибут в файлах SVG можно анимировать.
SVG — рекомендация W3C.
SVG интегрируется с другими стандартами, такими как CSS, DOM, XSL и JavaScript.

Элемент <svg>

HTML элемент <svg> — это контейнер для графики SVG.

В SVG есть несколько методов для рисования контуров, прямоугольников, кругов, многоугольников, текста и многого другого.

Круг в SVG

Пример

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

Прямоугольник в SVG

Пример

<svg width="400" height="120">
  <rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue" />
</svg>

Прямоугольник в SVG с прозрачностью и скруглёнными углами

Пример

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Звезда в SVG

Пример

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:red;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Эллипс с градиентом и текст в SVG

Пример

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  Извините, ваш браузер не поддерживает встроенную SVG‑графику.
</svg>

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

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

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

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

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

Сравнение SVG и Canvas

В таблице ниже показаны некоторые важные различия между Canvas и SVG:

SVG	Canvas
Независимость от разрешения	Зависимость от разрешения
Поддержка обработчиков событий	Отсутствие поддержки обработчиков событий
Хорошие возможности рендеринга текста	Плохие возможности рендеринга текста
Медленный рендеринг при высокой сложности	Возможность сохранить итоговое изображение в формате .png или .jpg
Не подходит для игровых приложений	Хорошо подходит для графических игр с высокой нагрузкой