Памятка по SVG
Теги и атрибуты SVG
<svg>
Атрибуты svg:
xmlns="http://www.w3.org/2000/svg"
Указывает ссылку на спецификацию текущей версии формата SVG. Без этого атрибута браузеры не распознают файл SVG как картинку (выдадут ошибку и текстовое содержание файла). Внутри HTML-документов и внутри других SVG можно не указывать атрибут xmlns, это уменьшит код.
version="1.0 (default) | 1.1"
Указывает версию SVG. Без этого атрибута будет считаться что используется версия 1.0 по умолчанию.
width="300 (default) | 100%" height="150 (default) | 10%"
Размеры SVG-контейнера в пикселях или процентах.
viewBox="0 0 2 2 | 0 0 500 300"
Размеры координатной сетки, которые будут показаны в SVG-элементе. Первые два числа это координаты X и Y верхнего левого угла масштабируемой области, два других — её ширина и высота в пикселях. Этот атрибут можно указывать только в теге SVG, нельзя в CSS.
preserveAspectRatio: "[none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax] [meet | slice]"
Регулирует соотношение сторон. По умолчанию та область что указана во viewBox полностью показывается в размерах SVG-элемента, сохраняя свои пропорции (похоже на свойство contain в CSS). При указании preserveAspectRatio=“none” картинка из viewBox растянется по всему размеру SVG-элемента.
Общие атрибуты для всех элементов:
fill=" black (default?) | none | transparent | #fff | rgb(0,128,255) | hsla(50, 100%, 50%, .7)"
fill-opacity="1 (default?) | 0 | .63 | 25%"
stroke="none (default?) | transparent | black | #fff | #cccccc20 | rgb(0,128,255) | hsla(50, 100%, 50%, .7)"
stroke-width="1 (default) | 0 | 4 | 10% | 5px(?)"
stroke-opacity="1 (default?) | 0 | .63 | 25%"
stroke-dasharray="5 | 5,10 | 5,10,7"
stroke-linecap="butt (default) | round | square"
stroke-linejoin="miter (default) | round | bevel"
transform="translate(-36 45.5)" transform="rotate(-10 50 100) | rotate(-30,77,78)" transform="scale(1 0.5)" transform="skewX(40)" transform="matrix(3 1 -1 3 30 40)"
<path> — путь
<path d="M1 1 L7 24Z" />
Путь состоит из точек (current point: cpx, cpy) и соединяющих их линий (прямых или кривых), записанных в атрибуте “d”.
Синтаксис атрибута d:
- M — moveTo (M, m). Координаты текущей точки. d=“M0 10”.
- L — lineTo (L, l). Рисует прямую линию от текущей (прошлой?) точки до точки с заданными координатами. d=“M0 10 L20 30”.
- H — horizontal lineTo (H, h). Рисует горизонтальную линию от текущей точки (x). d=“M0 10 H20”.
- V — vertical lineTo (V, v). Рисует вертикальную линию от текущей точки (y). d=“M0 10 H30”.
- C — curveTo (C, c, S, s и Q, q T, t). Рисует кубическую и квадратичную кривую Безье. C, c указывает на две контрольные точки для кривой и точку окончания линии (C x1 y1, x2 y2, x y), а S, s используется когда контрольная точка является зеркальным отражением прошлой точки (S x2 y2, x y). Квадратичная кривая (Безье?) Q, q — это более простая кривая, которая имеет только одну совмещённую контрольную точку (Q x1 y1, x y). Есть сокращённая команда (T, t) для соединения нескольких квадратичных кривых (T x y), предыдущей командой должны быть Q или T.
- A — arc (A, a). Рисует эллиптическую дугу (A rx ry x-axis-rotation large-arc-flag sweep-flag x y). Этим свойством можно встраивать части кругов-эллипсов в контур фигуры. Это самое сложное при создании фигур, тут есть демо для создания дуг.
- Z — closePath (Z или z). Соединяет текущую точку с начальной, замыкая контур фигуры. Без этой буквы фигура останется незамкнутой, даже если начальная и конечная точки совпадают.
- Команды с заглавной буквы обозначают абсолютные координаты на странице, а команда со строчной буквой — относительные (например, перемещение от последней точки на 10px вверх и 7px влево).
<rect> — прямоугольник (rectangle).
<circle> — круг.
<ellipse> — эллипс.
<line> — линия.
<polyline> — ломаная линия.
<polygon> — многоугольник.
<text> — текст.
<g> — группа (group).
<linearGradient> — линейный градиент.
<radialGradient> — радиальный градиент.
<pattern> — шаблон.
<clipPath> — обрезка.
<mask> — маска.