Используется в качестве контейнера для создания векторных изображений. Векторная графика полезна тем, что у нее меньше размер, чем у .png, к примеру. А также при увеличении векторного изображения его разрешенин никак не поменяется. Поэтому svg используют множество сайтов, в том числе и мы.
Основные фигуры: circle - Круг.
Пример
Атрибуты
r - Радиус окружности. cx - Положение x центра окружности. cy - Положение y центра окружности.
< !DOCTYPE html >
< html lang='ru' >
< head >
< meta charset='UTF-8' >
< meta name='viewport' content='width=device-width, initial-scale=1.0' >
< meta http-equiv='X-UA-Compatible' content='ie=edge' >
< title >
svg< /title >
< /head >
< body >
< svg viewBox='0 0 200 100' width='200' x='5' style='background-color: lightblue;' >
< polygon points='100,10 20,100 100,110' style='fill:lime;stroke:purple;stroke-width:1' / >
< /svg >
< /body >
< /html >
rect - Прямоугольник.
Пример
Атрибуты
x - Положение x верхнего левого угла прямоугольника. y - Положение y верхнего левого угла прямоугольника. width - Ширина прямоугольника. height - Высота прямоугольника. rx - Радиус x углов прямоугольника. ry - Радиус y углов прямоугольника.
< !DOCTYPE html >
< html lang='ru' >
< head >
< meta charset='UTF-8' >
< meta name='viewport' content='width=device-width, initial-scale=1.0' >
< meta http-equiv='X-UA-Compatible' content='ie=edge' >
< title >
svg< /title >
< /head >
< body >
< svg viewBox='0 0 200 100' width='200' x='5' style='background-color: lightblue;' >
< rect x='50' y='30' width='30' height='30'/ >
< rect x='100' y='50' rx='10' ry='10' width='30' height='30'/ >
< /svg >
< /body >
< /html >
ellipse - Элипс.
Пример
Атрибуты
rx - Радиус x эллипса. ry - Радиус y эллипса. cx - Положение x центра эллипса. cy - Положение y центра эллипса.
< !DOCTYPE html >
< html lang='ru' >
< head >
< meta charset='UTF-8' >
< meta name='viewport' content='width=device-width, initial-scale=1.0' >
< meta http-equiv='X-UA-Compatible' content='ie=edge' >
< title >
svg< /title >
< /head >
< body >
< svg viewBox='0 0 200 100' width='200' x='5' style='background-color: lightblue;' >
< ellipse cx='100' cy='55' rx='50' ry='30'/ >
< /svg >
< /body >
< /html >
line - Линия.
Пример
Атрибуты
x1 - Положение x точки 1. y1 - Положение y точки 1. x2 - Положение x точки 2. y2 - Положение y точки 2.
< !DOCTYPE html >
< html lang='ru' >
< head >
< meta charset='UTF-8' >
< meta name='viewport' content='width=device-width, initial-scale=1.0' >
< meta http-equiv='X-UA-Compatible' content='ie=edge' >
< title >
svg< /title >
< /head >
< body >
< svg viewBox='0 0 200 100' width='200' x='5' style='background-color: lightblue;' >
< line x1='50' x2='155' y1='30' y2='75' style='stroke: black; stroke-width: 3;'/ >
< /svg >
< /body >
< /html >
polyline - Ломанная линия.
Пример
Атрибуты
points - Список точек, каждая разделённая пробелом, запятой, EOL или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: '0 0, 1 1, 2 2'.
< !DOCTYPE html >
< html lang='ru' >
< head >
< meta charset='UTF-8' >
< meta name='viewport' content='width=device-width, initial-scale=1.0' >
< meta http-equiv='X-UA-Compatible' content='ie=edge' >
< title >
svg< /title >
< /head >
< body >
< svg viewBox='0 0 200 100' width='200' x='5' style='background-color: lightblue;' >
< polyline points='20,50 40,25 100,90 80' style='fill:none;stroke:black;stroke-width:3'/ >
< /svg >
< /body >
< /html >
polygon - Многоугольник.
Пример
Атрибуты
points - Список точек, каждая разделённая пробелом, запятой, EOL или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: '0 0, 1 1, 2 2'.
< !DOCTYPE html >
< html lang='ru' >
< head >
< meta charset='UTF-8' >
< meta name='viewport' content='width=device-width, initial-scale=1.0' >
< meta http-equiv='X-UA-Compatible' content='ie=edge' >
< title >
svg< /title >
< /head >
< body >
< svg viewBox='0 0 200 100' width='200' x='5' style='background-color: lightblue;' >
< polygon points='100,10 20,100 100,110' style='fill:lime;stroke:purple;stroke-width:1' / >
< /svg >
< /body >
< /html >
path - Путь по точкам.
Пример
Атрибуты
d - Список точек и другой информации о том, как рисовать путь. Для данных пути доступны команды: • M = перемещение • L = линия • H = горизонтальная линия • V = вертикальная линия • C = кривизна • S = плавная кривизна • Q = квадратичная кривая Безье • T = гладкая квадратичная кривая Безье • A = эллиптическая дуга • Z = близкий путь
< !DOCTYPE html >
< html lang='ru' >
< head >
< meta charset='UTF-8' >
< meta name='viewport' content='width=device-width, initial-scale=1.0' >
< meta http-equiv='X-UA-Compatible' content='ie=edge' >
< title >
svg< /title >
< /head >
< body >
< svg viewBox='0 0 200 100' width='200' x='5' style='background-color: lightblue;' >
< path d='M50 0 L195 50 L90 50 Z' / >
< /svg >
< /body >
< /html >
Здесь приведены основные атрибуты для svg, на самом деле их очень много. Если хотите посмотреть все атрибуты, посетите developer.mozilla.org.
fill - Заливка контейнера или фигуры. stroke - Обводка фигуры. viewBox - Указывает размеры окна отображения. Значением будет 4 цифры: min-x, min-y, width и height. width - Ширина. height - Высота. x - Координата по оси X. Используется для дочерних SVG элементов внутри SVG. y - Координата по оси Y. Используется для дочерних SVG элементов внутри SVG.
