Тег <svg>
Описание
Используется в качестве контейнера для создания векторных изображений. r - Радиус окружности. x - Положение x верхнего левого угла прямоугольника. rx - Радиус x эллипса. x1 - Положение x точки 1. points - Список точек, каждая разделённая пробелом, запятой, EOL или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: '0 0, 1 1, 2 2'. points - Список точек, каждая разделённая пробелом, запятой, EOL или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: '0 0, 1 1, 2 2'. d - Список точек и другой информации о том, как рисовать путь.
Векторная графика полезна тем, что у нее меньше размер, чем у .png, к примеру. А также при увеличении векторного изображения его разрешенин никак не поменяется. Поэтому svg используют множество сайтов, в том числе и мы.
Основные фигуры:circle - Круг.
Пример
Атрибуты
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 - Прямоугольник.
Пример
Атрибуты
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 - Элипс.
Пример
Атрибуты
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 - Линия.
Пример
Атрибуты
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 - Ломанная линия.
Пример
Атрибуты
< !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 - Многоугольник.
Пример
Атрибуты
< !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 - Путь по точкам.
Пример
Атрибуты
Для данных пути доступны команды:
• 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>Читайте также
Тег <a>
Используется для создания ссылки, а так же якоря для перемещения к какому-либо элементу на странице.
Тег <hr>
Используется для создания горизонтальной черты между блоками.
Тег <tbody>
Указывает 'тело' таблицы. Включает в себя <span class='samp'>tr и ...
Тег <strong>
Используется для выделения текста полужирным шрифтом. Семантический тег.
Тег <option>
Элемент выпадающего списка <span class='samp'>select</span>.