SVG-графика с точки зрения практического применения это, прежде всего, SVG-код в текстовом файле, в начале которого необходимо указать тип документа.
Простой SVG-файл, рисующий черный круг, будет выглядеть следующим образом:
<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" > <title>A Circle</title>
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2px" fill="none"/>
</svg>
Атрибуты svg
Посредством атрибутов x, y, width и height
— координаты и размеры с указанием единиц измерения прямоугольной области, в которой следует отобразить содержимое, заданное последующими тегами.
Если в SVG-документе планируются ссылки на внешние ресурсы или внутренние объекты, то в тег <svg> следует добавить еще один атрибут:
xmlns:xlink="http://www.w3.org/1999/xlink"
Внедрение SVG изображений на страницу
Наиболее простым способом встроить файл является использование тега img. Выглядеть это будет примерно вот так:
<img src="file.svg" alt="SVG File">
<object type="image/svg+xml" data="path-to/my- pic.svg">
Ваш браузер не поддерживает формат SVG </object>
<iframe src="path-to/my-pic.svg" width="300" height="100"></iframe>
Основные SVG-фигуры
Согласно официальной спецификации можно рисовать простые объекты с помощью SVG: прямоугольник, окружность, линию, эллипс, ломаную линию или многоугольник при помощи тега svg.
Простая линия с помощью тега line с всего двумя параметрами — точками начала (x1 и x2) и конца (y1 и y2):
<svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
Атрибуты простых фигур
Чтобы указать уровень непрозрачности от 0 до 1, применяют атрибуты fill-opacity и stroke-opacity соответственно для области заливки и обводки.
Параметры обводки определяют посредством атрибутов stroke (цвет) и stroke-width (толщина).
Атрибут stroke-dasharray — определяет стиль линии (пунктирная, штриховая и штрих-пунктирная); принимает в качестве значения одно, два или три числа, разделенных запятыми;
единственное число указывает размер точек пунктирной (точечной) линии
пара чисел определяет соответственно размер штрихов и интервал между ними
тройка чисел — размер точек, интервал между ними и размер штрихов между точками.
Прямоугольник
<rect x="100" y="100" width="150" height="150" fill="#FAFAA2" stroke="#000" />
<rect x="300" y="100" rx="20" ry="20" width="150" height="150" fill="#FAFAA2" stroke="#000" />
Многоугольник задается тегом <polygon> c атрибутом points, принимающим в качестве параметра строку, которая содержит координаты вершин.
<polygon points="20,10 200,20 180,90 120,150 50,100" fill="#00ffff" stroke="blue" stroke- width="5" />
<polygon points="20,210 200,220 30,290 120,350" fill="none" stroke="blue"
<radialGradient id="radial" cx="20%" cy="20%"> <stop stop-color="#000" offset="30%"/> <stop stop-color="#FAFAA2" offset="70%"/> <stop stop-color="#C00" offset="100%"/>
</radialGradient>
<circle cx="375" cy="375" r="275" fill="url(#radial)" stroke="#000“ stroke-width="50"/>
<linearGradient id="linear" x1="20%" y1="20%" x2="80%" y2="80%"> <stop stop-color="#FAFAA2" offset="10%"/>
<stop stop-color="#000" offset="50%"/> <stop stop-color="#C00" offset="90%"/>
</linearGradient>
<circle cx="375" cy="375" r="275" fill="url(#linear)" stroke="#000" stroke-width="50"/>
Эллипс задается тегом <ellipse> с возможными атрибутами:
cx, cy — горизонтальная и вертикальная координаты центра эллипса;
rx, ry — длины горизонтальной и вертикальной полуосей эллипса (горизонтальный и вертикальный радиусы).
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200px" height="200px">
<rect x="0" y="0" width="100%" height="100%"
fill="none" stroke="black"/>
<ellipse cx="100" cy="100" rx="50" ry="80" style="stroke: black; fill: red;"/>
</svg>