Что такое SVG?
- SVG означает Scalable Vector Graphics
- SVG используется для определения графики для Web
- SVG является рекомендацией W3C
Scalable Vector Graphics (SVG) является векторный формат изображения XML на основе для двумерной графики с поддержкой интерактивности и анимации. Спецификация SVG является открытым стандартом, разработанным консорциумом World Wide Web (W3C) с 1999 года.
SVG изображений и их поведение определены в текстовых файлах XML. Это означает, что они могут быть найдены, индексируются, сценарий, и прессуют. Как файлы XML, SVG изображение может быть создано и отредактирован с помощью любого текстового редактора, а также с программным обеспечением для рисования.
Все основные современные веб-браузеры, включая Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari и Microsoft Edge-есть SVG оказания поддержки.
HTML <svg> Элемент
HTML <svg> элемент (introduced in HTML5) представляет собой контейнер для 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 Прямоугольник
RGB (0,0,0) ">
пример
<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 Rounded Rectangle
К сожалению, ваш браузер не поддерживает встроенный 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 Star
К сожалению, ваш браузер не поддерживает встроенный 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 Logo
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>
Sorry, your browser does not support inline SVG.
</svg>
Различия между SVG и Canvas
SVG является языком для описания 2D-графики в формате XML.
Canvas рисует 2D - графики, на лету (with a JavaScript) .
SVG является XML на основе, что означает, что каждый элемент доступен в SVG DOM. Вы можете прикрепить обработчик событий JavaScript для элемента.
В SVG, каждый обращается форма запоминается как объект. Если атрибуты объекта SVG изменяются, браузер может автоматически повторно визуализировать форму.
Холст оказывается пиксель за пикселем. В полотне, когда графический рисуется, забывается в браузере. Если его положение должно быть изменено, вся сцена должна быть перерисована, в том числе любых объектов, которые, возможно, были охвачены графиками.
Сравнение Canvas и SVG
В таблице ниже приведены некоторые важные различия между Canvas и SVG:
| Canvas | SVG |
|---|---|
|
|
Чтобы узнать больше о SVG, пожалуйста , ознакомьтесь с SVG Учебник .