HTML5 SVG - Scalable Vector Graphics / Масштабируемая векторная графика
Что такое SVG?
- SVG расшифровывается как Scalable Vector Graphics - Масштабируемая векторная графика
- SVG используется для определения Web-графики
- 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, что означает, что каждый элемент доступен в SVG DOM. Вы можете присоединить обработчики событий JavaScript для элемента.
В SVG каждая нарисованная форма запоминается как объект. Если атрибуты объекта SVG изменены, браузер может автоматически повторно воспроизвести форму.
Canvas визуализируется пиксель за пикселем. В canvas, когда рисуется рисунок, он забывается браузером. Если его позицию надо изменить, то необходимо перерисовать всю сцену, включая любые объекты, которые могли быть покрыты графикой.
Сравнение Canvas и SVG
В таблице ниже показаны некоторые важные отличия между Canvas и SVG:
| Canvas | SVG |
|---|---|
|
|
SVG Учебник
Узнать больше про SVG можно, посетив SVG Учебник на нашем сайте W3Schools на русском.
