<path> - самый универсальный элемент. С его помощью можно нарисовать любую простую фигуру svg. По своей универсальности он обходит <polyline> за счёт того что может рисовать кривые. Для определения пути нужен один атрибут d в котором указываются координаты точек и команды определяющие как рисовать.
Пять команд для рисования линий в SVG <path>
Для начала определим начало пути. Для этого воспользуемся командой M. Эта команда не рисует а перемещает курсор в точку с заданными координатами. Есть два варианта этой команды. М заглавная указывает что координаты абсолютные, а m указывает на относительные координаты(точка отсчёта - предыдущая точка пути). Вобще такой порядок определения работает для всех команд пути. Код ниже переместит курсор в точку с координатами 10 10
<path d="M10 10"/>
Для рисовария прямых линий есть три команды. Произвольная линия рисуется командой L или l. Если нужна горизонтальная линия используем команду H или h. В это случае указывается только одна координата x. Координата по y остаётся такойже как у предыдущей точки. Также есть команда для вертикальных линий V или v. Здесь указывается координата y. Когда указываете координаты не забывайте что точка отсчёта расположена в верхнем левом углу. При движении вправо увеличивается координата x. При движении вниз увеличивается координата y. Координаты могут принимать отрицательные значения. Пример ниже нарисует квадрат со стороной 80.
<path d="M10 10 h80 v80 h-80 L10 10"/>
Разберём путь по точкам.
- Сначала поставили курсор в точку 10 10 (команда M10 10)
- Рисуем горизонтальную линию 80px (h80). Так как h в нижнем регистре то точкой отсчёта были координаты предыдущей точки. Такую же линию можно нарисовать командой H90.
- Далее рисуем вертикальную линию на 80px вниз (v80). Тоже самое можно сделать командой V90.
- Мы находимся в нижнем правом углу. Команда h-80 рисует линию 80px влево.
- Последнюю линию я нарисовал с помощью команды L, хотя можно было воспользоваться ещё одной V или командой Z.
Z - закрывает путь связывая последнюю точку с первой. Такой же квадрат можно нарисовать так
<path d="M10 10 H90 V90 h-80 Z"/
Кривые <path> SVG
<path> умеет три вида кривых. Кубическая и квадратная кривые Безье и дуга.
Команда A рисует часть эллипса(дугу). Также как для элипса, для дуги нужно указать два радиуса rx и ry. Далее указываем на сколько градусов повёрнута ось X элипса. Следующие два значения определяют какую часть элипса показывать. Последними идут координаты конца дуги. На координатах и радиусах останавливаться не будем. Здесь всё понятно. Разберёмся с углом поворота. В случаес с графикой лучше один раз увидеть. Код ниже рисует две дуги. Вторая повёрнута на 45 градусов.
<path d="M10 70
H50
A20 50 0 1 1 100 70
H150
A20 50 45 1 1 200 70
h50"/>
Дуга это часть пути. Чтобы получить дугу нужно нарисовать эллипс через две контрольные точки. Проблема в том, что при заданных радиусах через две точки можно нарисовать четыре дуги. Как сделать так чтобы была нарисована та, что нам нужна? Для этого есть два значения - флага. Первый определяет должна ли дуга быть больше 180 градусов(1 - больше 180, 0 - меньше 180). Второй параметр определяет направление движения дуги. Через две точки мы можем провести дугу по часовой(значение 1) и против часовой(значение 0). Чтобы было понятней смотрим пример ниже. Первая и четвёртая дуга это части одного эллипса, втораяя и третья часть такогоже элипса но расположенного ниже. Предположим нам нужна третья дуга. Дуга больше 180 градусов значит первый параметр 1. Движение по дуге в отрицательную сторону, значит второй параметр 0.
<path d="M10 70
H50
A20 50 45 1 1 100 70
H120
A20 50 45 0 1 170 70
h20
A20 50 45 1 0 250 70
h20
A20 50 45 0 0 320 70
h10"/>
Кривые Безье
Для кубической кривой Безье Нужно задать три набора координат. Первые идут координаты контрольной точки начала линии, вторыми - координаты контрольной точки конца линии и последними координаты конечной точки линии. Если вы пользовались какой нибудь программой для svg графики вы наверняка помните, что если нарисовать линию и кликнуть по конечной точке, то появиться линия с точкой на конце. Если тянуть за эту точку в разные стороны то кривизна исходной линии будет изменяться. Это и есть контрольная точка. Контрольные точки определяют наклон линии. Функция Безье ведёт плавную линию от наклона в начале до наклона в конце. Для рисования таких линий используют команду C x1 y1, x2 y2, x y
Чтобы объеденить кривые Безье используют команду S x2 y2, x y. В этом случае значение первой контрольной точки принимается зеркальным значению второй конрольной точки предыдущей линии.
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
Если S не следует за другой командой S или C, то предпологается что обе контрольные точки одинаковые.
В SVG доступен ещё один тип кривой Безье. Квадратичная кривая проще чем кубическая. Нужна только одна контрольная точка, которая определяет наклон кривой в начальной и конечной точке. Рисуется с помощью команды
Q x1 y1, x y
Также как для кубической функции есть возможность объеденять несколько квадратичных с помощью команды
T x y
Функция работает только если перед ней была T или Q функция. В противном случае будет нарисована прямая.
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>
Обе кривые дают схожие результаты. Кубические позволяют боле точно настроить вид кривой.
- Войдите, чтобы оставлять комментарии
Вот всё больше мне нравится
Вот всё больше мне нравится этот формат. Непонятно другое. Есть у меня png-файл весом 21 кб... Я его открываю в Иллюстраторе и сохраняю как svg... Вес получается 29 кб... Выходит, что мне проще использовать png? Или я что-то не так делаю?
Попробуйте оптимизировать
Попробуйте оптимизировать файл в каком нибудь онлайн оптимизаторе. Илюстратор может закинуть лишнего.
А в какой программе рисовать,
А в какой программе рисовать, чтобы подсказки всплывали?
Не понял. Какие подсказки и
Не понял. Какие подсказки и где должны всплывать.
Если писать шарп код например
Если писать шарп код например в визуал студии - то большую часть кода пишет студия и следит за правильным синтаксисом.
Так вот спрашиваю в каком редакторе писать SVG чтобы все скобки, кавычки появлялись автоматически и чтобы при нажатии например пробела всплывала подсказка с параметрами, которые в данном конкретном месте можно использовать. Или таких редакторов не существует?
SVG это графика и редакторы
SVG это графика и редакторы выглядят соответственно, например Adobe illustrator. Можно не писать код в ручную а просто рисовать.