mitorun studio

Шпаргалка по SVG

HTML:



Теги и атрибуты 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> – маска






Как вставить SVG на сайт

Примеры применения

Набери текст





Автор: Олег Миторун