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 прямоугольник
<!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
<!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>Выход
Разница между SVG и Canvas
SVG называется основанным на форме, а Canvas - как основанный на пикселях. Из-за своих возможностей для рендеринга больших приложений он подходит для приложений с большими областями рендеринга, таких как карты Google, тогда как Canvas не так хорош в возможностях рендеринга.
SVG более гибкие, чтобы увеличивать размер сверх своего естественного размера, тогда как изображения Canvas не так гибки.
Кроме того, SVG поддерживает работу с обработчиками событий, но Canvas не поддерживает их. Что касается игр, SVG также не подходит для игровых приложений, но, с другой стороны, Canvas хорошо подходит для этих приложений.
В SVG, изображения не могут быть сохранены в других форматах ,
но Canvas позволяет сохранить полученные изображения в
.png
и
.jpg
формате.
Поддержка браузера
|
|
Край
|
Хром
|
Fire Fox
|
Опера
|
Сафари
|
|---|---|---|---|---|---|
<svg>
|
|
|
|
|
|