SVG графика в HTML5

SVG (Scalable Vector Graphics – масштабируемая векторная графика) – стандарт векторной графики, разработанный консорциумом W3C.

SVG – это язык разметки для описания двухмерных графических приложений и изображений, входящий в подмножество расширяемого языка разметки XML. Сюда относится также ряд связанных графических скриптов.

SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов. Некоторые функции, такие как SMIL анимации и SVG Fonts распространены не так широко.

Базовая поддержка SVG браузерами.

Последней версией полной спецификации является SVG 1.1.

SVG 2 находится в стадии разработки. В нее будут добавлены новые, простые в использовании функции для SVG, а также идут работы по более тесной интеграции с HTML, CSS и DOM.

Достоинства SVG

• Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать. Таким образом векторные изображения масштабируются лучше, чем растровые.
• Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
• SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
• Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
• Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
• В SVG изображение можно добавить несколько ссылок.
• К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера <style>...</style> или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.

Вставка SVG на Web-страницу

SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу (при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить SVG-код в файле с расширением .svg.

Итак, способы вставки SVG-изображения на Web-страницу:

• прямая вставка кода в HTML-документ в контейнере <svg>...</svg>;
• использование SVG-файла в качестве фонового изображения;
• подключение SVG-файла в HTML-документ с помощью тегов img, embed, object и iframe;
• подключение SVG-файла в PHP-документ с помощью функции include.

1. Прямая вставка SVG-кода в Web-документ

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- SVG-код -->
</svg>

2. Использование SVG-файла в качестве фонового изображения

<style>
    .home {
        display: block;
        width: 200px;
        height: 300px;
        background: url(example.svg) 0 0;
        background-size: contain;
    }
</style>
<a href="/" class="home"></a>

3. Подключение SVG-файла с помощью тега img

<img src="example.svg">

4. Подключение SVG-файла с помощью тега embed

<embed src="example.svg" type="image/svg+xml">

5. Подключение SVG-файла с помощью тега object

<object data="example.svg" type="image/svg+xml"></object>

6. Подключение SVG-файла с помощью тега iframe

<iframe src="example.svg" width="200" height="300" style="border: none"></iframe>

7. Подключение SVG-файла с помощью функции include

<? include("example.svg"); ?>

Система координат

Размеры и координаты можно задавать в различных единицах (px, pt, pc, cm, mm, em, in). Если единицы измерения не указаны, то это пиксели.

Начало отсчета координат – это верхний левый угол экрана, т.е.

Базовые SVG-элементы

line	прямая линия
polyline	ломанная линия
polygon	многоугольник
rect	прямоугольник
circle	круг
ellipse	эллипс
path	сложная траектория

Общие атрибуты тегов SVG-элементов

stroke	Цвет линии
stroke-width	Толщина линии
stroke-linecap	Стиль концов линии. Возможные значения атрибута: round по форме круга; square по форме квадрата. Пример
stroke-dasharray	Чередование штрихов и пробелов в пунктирной линии Пример
stroke-dashoffset	Сдвиг пунктира Пример
fill	Цвет заливки (none – без заливки)
fill-opacity	Прозрачность заливки (от 0 до 1)
fill-rule	Правило заливки. Возможные значения атрибута: nonzero сплошная заливка; evenodd внутренняя часть фигуры не заливается.
style	Стиль элемента
class	Класс элемента

Прямая линия

Задается тегом <line>.

Атрибуты тега <line>

x1	Координата начальной точки линии по оси X
y1	Координата начальной точки линии по оси Y
x2	Координата конечной точки линии по оси X
y2	Координата конечной точки линии по оси Y

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
    <line x1="5" y1="5" x2="500" y2="60" stroke="#b4241b" stroke-width="3" />
</svg>

Ломаная линия

Задается тегом <polyline>.

Атрибут тега <polyline>

points

Координаты точек ломанной линии парами x,y через пробел

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
    <polyline points="5,5 5,20, 150,20, 150,35, 295,35, 295,50, 440,50 440,65"
              stroke="#b4241b" stroke-width="3" fill="none" />
</svg>

Многоугольник

Задается тегом <polygon>. Всегда выводит замкнутые фигуры, автоматически проводя линию из конца последнего отрезка в начало первого.

Атрибут тега <polygon>

points

Координаты точек многоугольника парами x,y через пробел

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
    <polygon points="88,10 56,90 136,42 40,42 120,90"
             stroke="#b4241b" stroke-width="3" fill="#ffff00" fill-rule="nonzero"/>
    <polygon points="188,10 156,90 236,42 140,42 220,90"
             stroke="#b4241b" stroke-width="3" fill="#ffff00" fill-rule="evenodd"/>
</svg>

Прямоугольник

Задается тегом <rect>.

Атрибуты тега <rect>

x	Координата левой верхней точки прямоугольника по оси X
y	Координата левой верхней точки прямоугольника по оси Y
width	Ширина прямоугольника
height	Высота прямоугольника
rx	Радиус закругления углов прямоугольника по оси X
ry	Радиус закругления углов прямоугольника по оси Y

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
    <rect x="5" y="5" width="500" height="50" rx="10" ry="20"
          stroke="#b4241b" stroke-width="3" fill="#ffff00" />
</svg>

Круг

Задается тегом <circle>.

Атрибуты тега <circle>

cx	Координата центра круга по оси X
cy	Координата центра круга по оси Y
r	Радиус круга

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
    <circle cx="35" cy="35" r="30"
            stroke="#b4241b" stroke-width="3" fill="#ffff00" />
</svg>

Эллипс

Задается тегом <ellipse>.

Атрибуты тега <ellipse>

cx	Координата центра эллипса по оси X
cy	Координата центра эллипса по оси Y
rx	Радиус эллипса по оси X
ry	Радиус эллипса по оси Y

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">
    <ellipse cx="80" cy="35" rx="70" ry="30"
             stroke="#b4241b" stroke-width="3" fill="#ffff00" />
</svg>

Сложная траектория

Задается тегом <path>. Является самым универсальным из SVG-элементов. Позволяет создавать произвольные фигуры. Форма фигуры задается атрибутов d, значение которого – это набор специальных команд. Эти команды могут быть и в верхнем, и в нижнем регистре. Верхний регистр указывает на то, что применяется абсолютное позиционирование, а нижний – относительное.

Команды, определяющие траекторию и направление фигурной линии

M, m	Начальная точка Mx,y
L, l	Отрезок прямой Lx,y
H, h	Горизонтальная линия Hx,y или hx
V, v	Вертикальная линия Vx,y или vy
A, a	Дуга эллипса Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y rx,ry – радиусы дуги эллипса; x-axis-rotation – угол поворота дуги относительно оси X; large-arc-flag – если (=1), то строится большая части дуги, если (=0) – меньшая; sweep-flag – если (=1), то дуга строится по часовой стрелке, если (=0) – против часовой стрелке; x,y – координаты конечной точки дуги.
C, c	Кубическая кривая Безье Cx1,y1 x2,y2 x,y x1,y1 – координаты первой контрольной точки; x2,y2 – координаты второй контрольной точки; x,y – координаты конечной точки кривой.
S, s	Гладкая кубическая кривая Безье Sx2,y2 x,y x2,y2 – координаты второй контрольной точки; x,y – координаты конечной точки кривой. Первая контрольная точка является зеркальным отражением второй контрольной точки.
Q, q	Квадратичная кривая Безье Qx1,y1 x,y x1,y1 – координаты контрольной точки; x,y – координаты конечной точки кривой.
T, t	Гладкая квадратичная кривая Безье Qx1,y1 x,y x,y – координаты конечной точки кривой. Контрольная точка этой команды является зеркальным отражением контрольной точки предыдущей команды.
Z, z	Замыкание траектории

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="100">
    <path d="M10,15 h50 v60 L110,55 A25,35 -30 0,1 150,30
        M160,50 C160,110 260,110 260,50 S360,-10 360,50
        M370,50 Q420,100 470,50 T570,50 z"
        stroke="#b4241b" stroke-width="3" fill="none" />
</svg>

Читать дальше: WML - язык разметки для мобильных телефонов

.