HTML SVG Графика
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 width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="400" height="120">
<rect x="10" y="10" width="200" height="100" stroke="red" stroke-width="6" fill="blue"/>
</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 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 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>
Sorry, your browser does not support inline SVG.
</svg>
Различия между SVG и Canvas
SVG - это язык для описания 2D-графики в XML, в то время как Canvas рисует 2D-графику на лету (с помощью JavaScript).
SVG основан на XML, что означает, что каждый элемент доступен в SVG DOM. Вы можете прикрепить обработчики событий JavaScript к графике SVG.
В SVG каждая нарисованная форма запоминается как объект. Если атрибуты объекта SVG изменены, браузер может автоматически повторно отобразить форму.
Холст отображается пиксель за пикселем. На холсте, как только графика нарисована, она забывается браузером. Если его положение должно быть изменено, всю сцену необходимо перерисовать, включая любые объекты, которые могли быть покрыты графикой.