HTML5 встроенный SVG

Предыдущая: HTML5 Canvas

Далее: HTML5 перетаскивания

HTML5 поддерживают встроенный SVG.

Что такое SVG?

SVG масштабируемая векторная графика средство (Scalable Vector Graphics)
SVG для графики используется для определения вектора на основе сети
SVG использует графику определения формата XML
SVG изображение, чтобы увеличить или изменение размера его качества изображения не будут потеряны
SVG является стандартом Консорциум World Wide Web

SVG преимущество

По сравнению с другими форматами изображений (например, JPEG и GIF), используя SVG преимущества:

SVG изображения могут быть созданы и изменены с помощью текстового редактора
SVG изображения могут быть найдены, индексируется, сценарий или сжатый
SVG является масштабируемым
SVG изображения могут быть напечатаны в любом высокого разрешения качества
SVG могут быть преувеличены в качество изображения не снижается

Поддержка браузеров

Internet Explorer 9 +, Firefox, Opera, Chrome, Safari и поддержка встроенного SVG.

SVG встроен непосредственно в HTML-страницы

В HTML5, вы сможете SVG элементы непосредственно в страницу HTML:

примеров

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

Попробуйте »

Результаты:

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

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

Разница SVG и Canvas между двумя

SVG является 2D графики с использованием XML-описания языка.

Холст рисовать 2D графики с использованием JavaScript.

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

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

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

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

В следующей таблице перечислены некоторые различия между холстом и SVG.

Canvas	SVG
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏，其中的许多对象会被频繁重绘	不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）不适合游戏应用