Рисунки SVG чистым кодом

По большей части для создания SVG используются графические редакторы вроде Adobe Illustrator или CorelDraw, но они дают на выходе, как правило, достаточно объемный код. Дело в том, что эти программы все же предназначены для дизайна, а не фронт-энд разработки с готовой оптимизацией. И во многих случаях можно использовать рисунки SVG чистым кодом, особенно когда подразумевается простая графика — иконки, несложные текстуры, схемы, планы и т.д. Более того, сложную векторную графику тоже можно рисовать без графических редакторов. Единственный ограничитель в данном случае — невозможность отредактировать результат человеку без опыта работы с кодом.

Определение путей и их стилей в SVG

Рисунки SVG начинаются с путей (path) внутри тега <g> и их стилей внутри тега <style>. Это необходимые и достаточные условия для получения простейших форм. Для того чтобы задать координаты путей нужно знать общие размеры рисунка и положение ключевых опорных точек (хотя бы примерно).

Ось координат x направлена вправо, ось y вниз, то есть точка отсчета в сетке SVG — левый верхний угол. Мы можем также задать смещение начальной точки в параметре viewBox. Например, viewBox=«10 10 80 80» будет означать, что все элементы будут смещены вправо и вниз на 10px, а сам рисунок имеет ширину и высоту 80px.

На примере выше показаны опорные точки двух треугольников и радиус круга. Сетка имеет шаг в 10px. Открыв элемент <path> и задав ему id для последующей связи со стилями, мы начинаем задавать значения атрибута «d»:

<path id="north" d="M40 10, 50 40, 30 40z"/>

Команда «M» означает перемещение к указанной точке. Поскольку один путь может состоять и из нескольких объектов, не соединенных между собой, мы можем прерывать ограничивающий абрис этой командой. «Z» означает, что контур замкнут.

Окружности в SVG рисуются следующим кодом, где cx и cy — смещение центра по осям, r — радиус:

<circle id="circle" cx="40" cy="40" r="35"/>

Но кроме этого, нам необходимо также определить стили этих путей. Для этого используются id или классы, для которых задается оформление внутри тега <style>. В итоге мы получаем следующий код изображения:

See the Pen SVG clean code compass by Alexander Webmassa (@Webmassa) on CodePen.

Обратите внимание, что все пути заключены в тег <g> (группа). Группам тоже можно задавать id или классы для переопределения их стилей, трансформаций и различных анимаций SMIL, CSS и JS. При этом групп может быть несколько, соответственно мы можем объединять элементы в подгруппы с множеством порядков, но единая родительская группа обязательно должна присутствовать.

Квадратичные кривые Безье в SVG

Квадратичные кривые Безье задаются тремя опорными точками. Две из них — это начало и конец, третья задает направление векторам, направленным из первых. В SVG квадратичная кривая задается командой «Q» после координат первой точки.

Кривые не обязательно должны быть симметричны, но направляющие векторы всегда направлены в одну точку. В итоге мы получаем следующий очень простой код:

See the Pen Quadratic Bezier line by Alexander Webmassa (@Webmassa) on CodePen.

Кубические кривые Безье в SVG

Кубические кривые сложнее, они определяются четырьмя точками, то есть направление векторов из начала и конца может быть различным. Кубическая кривая задается командой «C» после координаты первой точки. Далее следует координата конца первой направляющей, затем второй, затем замыкающей точки кривой.

Код такой кривой будет выглядеть так:

<path d="M10 70 C 30 30, 70 30, 70 70"/>

Но обычно рисунки SVG содержат более сложные контуры, которые совмещают несколько кривых, а также дуг, окружностей и прямых линий в одном абрисе. Для продолжения кубических кривых Безье используется команда «S».

Например у нас есть кубическая кривая такого плана. На рисунке показано, что она состоит как будто из двух частей, хотя в итоге образует единый элемент:

Точка 100, 80 не нужна в коде, поскольку команда «S» задает тот же тип кривой, что и был. Из этого следует, что первый вектор следующей кривой является отражением последнего в предыдущей.

Итоговый код:

<path d="M5 70 C 30 0, 60 0, 80 40 S 130 80, 155 10"/>

Для объединения квадратичных кривых используется команда «T».

Если же вы объединяете разные типы кривых или прямых линий, то вместо команды объединения ставится команда, определяющая тип пути:

А — дуга;

L — линия;

H — горизонтальная линия. Например, «H 50 150» означает, что линия будет проведена от 50px до 150px по оси х. При этом по умолчанию ее положение по оси y — верхний край вьюбокса, но если до этого шла другая фигура — координата ее последней точки по оси y;

V — вертикальная линия. То же самое, что в предыдущем случае;

C — кубическая кривая Безье;

Q — квадратичная кривая Безье.

SVG-символы (<symbol>)

В конце мы расскажем о том, как поступать, если объектов на рисунке много, но хотя бы часть из них имеет одинаковые очертания. Совершенно не обязательно рисовать все одинаковые объекты по координатам. Копировать группы и затем позиционировать их на css — тоже неправильный путь с точки зрения оптимизации кода.

Пути SVG можно превращать в так называемые символы, а затем использовать их несколько раз. Для этого мы заворачиваем все содержимое внутри тега <path> в новый тег <symbol> с собственным классом или id.

А теперь внутри тега <g> можно несколько раз использовать этот символ через тег <use> и xlink. Эти команды очень полезны в векторных рисунках. С их помощью можно использовать внутри SVG практически любые элементы, в том числе внешние растровые изображения, iframe, тексты и даже видео. Их можно объединять в группы и подгруппы, трансформировать, подключать к ним внешние скрипты и так далее — все то же самое, что предлагает нам формат SVG в простом виде. Ниже показан результат, а если хотите увидеть больше примеров использования векторной графики — заходите к нам на codepen:

See the Pen Using SVG symbols by Alexander Webmassa (@Webmassa) on CodePen.