Тег <svg> - графика в HTML5

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

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

SVG поддерживается всеми современными браузерами для ПК и мобильных телефонов.

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

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

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

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

1. Прямая вставка SVG-кода в Web-документ
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <!-- SVG-код -->
</svg>
2. Использование SVG-файла в качестве фонового изображения
<style>
    .telegram {
        display: block;
        width: 50px;
        height: 50px;
        background: url(/images/svg/telegram.svg) 0 0;
        background-size: contain;
    }
</style>
<a href="/" class="telegram"></a>
3. Подключение SVG-файла с помощью тега img
<img src="/images/svg/telegram.svg">
4. Подключение SVG-файла с помощью тега embed
<embed src="/images/svg/telegram.svg" type="image/svg+xml"></embed>
5. Подключение SVG-файла с помощью тега object
<object data="/images/svg/telegram.svg" type="image/svg+xml"></object>
6. Подключение SVG-файла с помощью тега iframe
<iframe src="/images/svg/telegram.svg" width="50" height="50" style="border: none"></iframe>
7. Подключение SVG-файла с помощью функции include
<?php include($_SERVER['DOCUMENT_ROOT'].'/images/svg/telegram.svg'); ?>

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

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

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

X Y

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

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

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

stroke
Цвет линии
stroke-width
Толщина линии
stroke-linecap
Стиль концов линии.
Возможные значения атрибута:
  • round – по форме круга;
  • square – по форме квадрата.
Например: 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

    <line x1="5" y1="5" x2="500" y2="5" stroke="#b4241b" stroke-width="10" />
    <line x1="5" y1="25" x2="500" y2="25" stroke="#b4241b" stroke-width="10" stroke-linecap="round" />
    <line x1="5" y1="45" x2="500" y2="45" stroke="#b4241b" stroke-width="10" stroke-linecap="square" />

</svg>
stroke-dasharray
Чередование штрихов и пробелов в пунктирной линии. Например: 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

    <line stroke-dasharray="10" x1="5" y1="5" x2="500" y2="5" stroke="#b4241b" stroke-width="10" />
    <line stroke-dasharray="20,10" x1="5" y1="25" x2="500" y2="25" stroke="#b4241b" stroke-width="10" />
    <line stroke-dasharray="10,20,30" x1="5" y1="45" x2="500" y2="45" stroke="#b4241b" stroke-width="10" />

</svg>
stroke-dashoffset
Сдвиг пунктира. Например: 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

    <line stroke-dasharray="40,20" x1="5" y1="5" x2="500" y2="5" stroke="#b4241b" stroke-width="10" />
    <line stroke-dashoffset="-5" stroke-dasharray="40,20" x1="5" y1="25" x2="500" y2="25" stroke="#b4241b" stroke-width="10" />
    <line stroke-dashoffset="5" stroke-dasharray="40,20" x1="5" y1="45" x2="500" y2="45" stroke="#b4241b" stroke-width="10" />

</svg>
fill
Цвет заливки (none – без заливки)
fill-opacity
Прозрачность заливки (от 0 до 1)
fill-rule
Правило заливки.
Возможные значения атрибута:
  • nonzero – сплошная заливка;
  • evenodd – внутренняя часть фигуры не заливается.
style
Стиль элемента
class
Класс элемента

line - Прямая линия

Задается тегом <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>.

Атрибут тега <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>. Всегда выводит замкнутые фигуры, автоматически проводя линию из конца последнего отрезка в начало первого.

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

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

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="100">

    <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>.

Атрибуты тега <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>.

Атрибуты тега <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>.

Атрибуты тега <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 - Сложная траектория

Задается тегом <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>

Основные преобразования SVG-элементов

Все преобразования задаются в атрибуте transform SVG-элемента. Можно указать несколько пребразований через пробел.

translate() перемещение
rotate() поворот
scale() масштабирование
skewX() и skewY()   искажение
matrix() комплексное преобразование

Перемещение

Элемент можно переместить на x пикселей по вправо и y пикселей вниз с помощью функции translate(x,y).

В примере, приведенном ниже, прямоугольник передвигается из точки (2,2) в точку (92,17).

Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

        <rect x="2" y="2" width="500" height="50" stroke="#ccc" stroke-width="3"
        fill="#fff" />
        <rect x="2" y="2" width="500" height="50" stroke="#b4241b" stroke-width="3"
        fill="#ffff00" transform="translate(90,15)" />

</svg>

Поворот

Элемент можно повернуть при помощи функции rotate(x), где x – угол поворота в градусах относительно начала координат. Если x>0, то поворт по часовой стрелке, если x<0, то поворот против часовой стрелке.

В примере, приведенном ниже, квадрат поворачивается на 5° относительно точки (0,0).

Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

        <rect x="100" y="2" width="50" height="50" stroke="#ccc" stroke-width="3"
        fill="#fff" />
        <rect x="100" y="2" width="50" height="50" stroke="#b4241b" stroke-width="3"
        fill="#ffff00" transform="rotate(5)" />

</svg>

Масштабирование

Изменить размер элемента можно с помощью функции scale(x,y), где x – коэффициент масштабирования по оси Х, а y – по оси Y. Если коэффициенты совпадают, то указывают только один параметр.

Обратите внимание на то, что в примере, приведенном ниже, квадрат не только уменьшается в два раза, но и перемещается из точки (100,10) в точку (50,5).

Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

        <rect x="100" y="10" width="50" height="50" stroke="#ccc" stroke-width="3"
        fill="#fff" />
        <rect x="100" y="10" width="50" height="50" stroke="#b4241b" stroke-width="3"
        fill="#ffff00" transform="scale(0.5)" />

</svg>

skew - Искажение

Элемент можно исказить на заданное количество градусов с помощью функций skewX(x) и/или skewY(y) по оси X и/или Y соответственно.

Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

    <rect x="100" y="2" width="50" height="50" stroke="#ccc" stroke-width="3"
    fill="#fff" />
    <rect x="100" y="2" width="50" height="50" stroke="#b4241b" stroke-width="3"
    fill="#ffff00" transform="skewX(45)" />

</svg>

matrix - Комплексное преобразование

Чтобы объединить несколько преобразований, можно установить результирующую матрицу с помощью функции matrix(a, b, c, d, e, f), которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:

xnewCoordSys=axprevCoordSys+cyprevCoordSys+e
ynewCoordSys=bxprevCoordSys+dyprevCoordSys+f

Пример
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="70">

    <rect x="2" y="2" width="10" height="10" fill="#ccc" />
    <rect x="2" y="2" width="10" height="10" fill="#b4241b"
    transform="matrix(3 1 -1 3 60 20)" />

</svg>
Справочник HTML⌕≡
×
Справочник HTML