Тег HTML 5 SVG - httpdoc.ru

HTML SVG

SVG - это масштабируемая векторная графика. HTML SVG используется для описания графики. Его намного проще использовать, чем холст. Это рекомендация W3C. SVG используется в основном для диаграмм векторных типов , таких как круговые диаграммы, 2-мерных графиков в X, Y системы координат и т.д. SVG имеет несколько методов для рисования paths , boxes , circles , text , и graphic images .


Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML SVG Circle Method </title>  
</head>
<body>

<svg width="100" height="100"> <circle cx="50" cy="50" r="40" 
	stroke="black" stroke-width="1" fill="green" /> 
</svg>

</body>
</html>

Выход

HTML SVG Circle Method

HTML SVG прямоугольник

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML SVG Rectangle Method </title>  
</head>
<body>

<svg width="400" height="100">  
  <rect width="400" height="100" stroke="black" stroke-width="1" fill="lightgray" />  
</svg>

</body>
</html>

Выход

HTML SVG Rectangle Method Examples

Звезда HTML SVG

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML SVG Star Method </title>  
</head>
<body>

<svg height="200" width="300">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:red;stroke:green;stroke-width:1;fill-rule:evenodd;" />
</svg>

</body>
</html>

Выход

HTML SVG Star Method Examples

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

SVG называется основанным на форме, а Canvas - как основанный на пикселях. Из-за своих возможностей для рендеринга больших приложений он подходит для приложений с большими областями рендеринга, таких как карты Google, тогда как Canvas не так хорош в возможностях рендеринга.

SVG более гибкие, чтобы увеличивать размер сверх своего естественного размера, тогда как изображения Canvas не так гибки.

Кроме того, SVG поддерживает работу с обработчиками событий, но Canvas не поддерживает их. Что касается игр, SVG также не подходит для игровых приложений, но, с другой стороны, Canvas хорошо подходит для этих приложений.

В SVG, изображения не могут быть сохранены в других форматах , но Canvas позволяет сохранить полученные изображения в .png и .jpg формате.


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

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<svg>
да
да
да
да
да