HTML5 SVG - Scalable Vector Graphics / Масштабируемая векторная графика
Что такое SVG?
- SVG расшифровывается как Scalable Vector Graphics — Масштабируемая векторная графика
- SVG используется для отображения веб‑графики
- SVG является рекомендацией W3C (Консорциума Всемирной паутины)
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="red" stroke-width="4" fill="orange" />
</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 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:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</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, что означает, что каждый элемент доступен в DOM. Вы можете назначать обработчики событий JavaScript для отдельных элементов.
В SVG каждая фигура сохраняется как объект. Если изменить её атрибуты, браузер автоматически перерисует форму.
Canvas визуализируется пиксельно. После отрисовки браузер «забывает» содержимое. Чтобы изменить позицию объекта, нужно перерисовать всю сцену, включая перекрытые элементы.
Сравнение Canvas и SVG
В таблице ниже приведены ключевые различия между Canvas и SVG:
| Canvas | SVG |
|---|---|
|
|
SVG Учебник
Узнать больше о SVG вы можете в SVG Учебнике на нашем сайте W3Schools на русском.
