Для создания контура используется элемент <path>.
В качестве данных контура используются следующие команды:
- M = переместить указатель
- L = нарисовать линию
- H = нарисовать горизонтальную линию
- V = нарисовать вертикальную линию
- C = нарисовать кубическую кривую Безье с двумя контрольными точками
- S = нарисовать сглаженную кубическую кривую Безье с одной контрольной точкой
- Q = нарисовать квадратичную кривую Безье с одной контрольной точкой
- T = нарисовать сглаженную квадратичную кривую Безье. Контрольной точкой будет отражение контрольной точки предыдущей команды.
- A = нарисовать эллиптическую кривую
- Z = закрыть контур
Примечание: Все вышеприведенные команды имеют вариант записи в нижнем регистре. Если команда записана большими буквами, то позиционирование будет абсолютным. Если маленькими буквами, то позиционирование будет относительным.
Пример №1
В следующем примере определяется контур, который начинается в координатах (150,0), затем проводится линия в координаты (75,200), затем проводится линия в координаты (225,200) и, наконец, контур закрывается в начальных координатах (150,0):
SVG код:
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
Пример №2
Кривые Безье используются для моделирования плавных кривых линий, масштаб которых можно бесконечно увеличивать или уменьшать. Обычно, выбирается две конечных точных точки и одну или две контрольных. Кривую Безье с одной контрольной точкой называют квадратичной кривой Безье, а с двумя контрольными точками — кубической.
В следующем примере создается кубическая кривая Безье. Здесь A и C — соответственно начальная и конечная точки, B — контрольная точка:
SVG код:
<svg height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
stroke-width="3" fill="none" />
<path id="lineBC" d="M 250 50 l 150 300" stroke="red"
stroke-width="3" fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue"
stroke-width="5" fill="none" />
<!-- Пометим соответствующие точки -->
<g stroke="black" stroke-width="3" fill="black">
<circle id="pointA" cx="100" cy="350" r="3" />
<circle id="pointB" cx="250" cy="50" r="3" />
<circle id="pointC" cx="400" cy="350" r="3" />
</g>
<!-- Поставим метки точек -->
<g font-size="30" font-family="sans-serif" fill="black" stroke="none"
text-anchor="middle">
<text x="100" y="350" dx="-30">A</text>
<text x="250" y="50" dy="-10">B</text>
<text x="400" y="350" dx="30">C</text>
</g>
</svg>
Сложно? ДА!!!! Именно из-за сложности при рисовании контуров и рекомендуется использовать специальный SVG редактор для создания сложной графики.
