0

Тег <svg>

Описание

Используется в качестве контейнера для создания векторных изображений.
Векторная графика полезна тем, что у нее меньше размер, чем у .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 > 

Для элемента доступны универсальные атрибуты и события.

См. код языков.

См. MIME - типы.

Синтаксис

<svg>...</svg>
Internet Explorer Edge Chrome Opera Safari Firefox Android WebView Firefox для Android Opera для Android iOS Safari
2 12 1 2 1 1 1 1 6 1
Поддерживается Частичная поддержка Не поддерживается

Атрибуты

Здесь приведены основные атрибуты для svg, на самом деле их очень много. Если хотите посмотреть все атрибуты, посетите developer.mozilla.org.

fill - Заливка контейнера или фигуры.
stroke - Обводка фигуры.
viewBox - Указывает размеры окна отображения. Значением будет 4 цифры: min-x, min-y, width и height.
width - Ширина.
height - Высота.
x - Координата по оси X. Используется для дочерних SVG элементов внутри SVG.
y - Координата по оси Y. Используется для дочерних SVG элементов внутри SVG.

Устаревшие атрибуты

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<svg viewBox='0 0 200 100' width='300' x='5' style='background-color: lightblue;'>
<circle cx='100' cy='50' r='30'/>
</svg>n</body>
</html>

Читайте также