HTML5 SVG - Scalable Vector Graphics

Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих

Что такое SVG?

HTML элемент <svg>

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

SVG имеет несколько методов для рисования контуров, боксов, кругов, текста и графических изображений.

Поддержка браузерами

Цифры в таблице определяют первую версию браузера, которая полностью поддерживает элемент <svg>.

Элемент
<svg> 4.0 9.0 3.0 3.2 10.1

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="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Попробуйте сами »

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.

Пример:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Попробуйте сами »

SVG Лого

SVG К сожалению, ваш браузер не поддерживает встроенный SVG.

Пример:

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </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 - это язык для описания 2D-графики в XML.

Canvas рисует 2D графику на лету (с помощью JavaScript).

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

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

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

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

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

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

SVG Учебник

Узнать больше про SVG можно, посетив Учебник по SVG.