Программисты любят делать маленькие языки для всего - пути SVG - тому пример. Формат SVG - это формат векторных изображений, то есть он позволяет рисовать изображения, которые не становятся пиксельными при изменении их размера. SVG имеет множество встроенных средств для рисования кругов, прямоугольников и т. Д., Но иногда вам просто нужно нарисовать произвольную форму, которая не попадает в эти основные категории.

Язык путей SVG позволяет вам это сделать. Возможно, вы видели это в файлах SVG, длинные последовательности неразборчивых букв и цифр:

Это очень больно читать, но, как оказалось, не так уж и сложно. Каждая буква - это инструкция, а каждая цифра, следующая за буквой, - это параметры этой инструкции.

У вас есть некоторое представление о текущем местоположении, в котором находится ваше перо, и, давая инструкции, вы можете перейти к новой точке и рисовать линии и кривые по мере движения. (Метафора похожа на Черепаха, если вам это знакомо, но у вас нет ориентации.) Вот и все!

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

Языковые правила

  • Формат всегда представляет собой инструкцию (букву), за которой следуют аргументы (в основном числа). например «M 100 100 L 150 150»
  • Запятые и пробелы можно опускать, кроме случаев, когда это абсолютно необходимо для различения отдельных команд (например, «M100 100L150 150»). Это сбивает с толку, но об этом полезно знать при чтении путей, которые вы не создавали.
  • Если вы используете одну и ту же инструкцию несколько раз подряд, вы можете отбросить указанную выше букву. (например, «l 100 100 -200 100» вместо «l 100 100 l -200 100») Опять же, это сбивает с толку, но вы часто увидите это в природе.

Перемещение без рисования («M x1 y1»)

Чаще всего это требуется, когда вы начинаете рисовать что-то, что не начинается в верхнем левом углу холста. В качестве альтернативы вы можете использовать это в середине пути, если вы рисуете отдельные линии.

Перемещение и рисование прямых линий («L x1 y1», «H y» и «V x»)

L - линия, H - горизонтальная, V - вертикальная. L принимает два параметра, описывающих место, куда нужно переместиться и куда нужно рисовать. H и V берут только один.

Вот глупый пример со строками, в которых используются все три:

Перемещение и рисование кривых

Для более сложных вещей вы можете рисовать эллиптические дуги (сегменты круга / эллипса) или Кривые Безье. Параметры для них более сложные, поэтому я не буду вдаваться в них здесь, но вам лучше просто взглянуть на спецификацию SVG.

  • Кубический: C и S
  • Квадратичный: Q и T
  • Эллиптическая дуга: A

Возвращение домой: ClosePath («Z»)

Просто рисует прямую линию от текущей точки до начальной точки текущего рисуемого подпути, «закрывая» форму. Для этого определения новый подпуть считается начатым всякий раз, когда выполняется инструкция «M». Итак, вы можете нарисовать треугольник, нарисовав две линии, а затем используя Z, чтобы завершить форму, например:

Относительный vs Абсолютный

Если буква инструкции написана в верхнем регистре, она интерпретирует свои параметры в «абсолютном» режиме, что означает, что все спецификации местоположения считаются относительными к (0,0). С другой стороны, если он в нижнем регистре, он находится в «относительном» режиме, то есть значения расстояния относятся к последнему месту, в котором находилось перо. Это означает, что вам не нужно всегда отслеживать текущие координаты, вы можете просто сказать «на 80 больше, чем я был».

Относительные команды интересны тем, что они обеспечивают своего рода уровень абстракции - почти как функции в других языках программирования. С помощью относительных команд вы можете нарисовать небольшую вещь как часть текущего пути, независимо от того, где вы сейчас находитесь:

Так в чем смысл всего этого?

Вы могли заметить, что это материал очень низкого уровня. Никто бы не хотел делать это вручную. Обычно вы используете какое-то программное обеспечение, такое как Adobe Illustrator или Inkscape, чтобы иметь возможность графически рисовать изображения, которые затем выводят файл, содержащий страницы и страницы с этими путями, например:

Или, возможно, вы уже используете контуры, даже не подозревая об этом, если вы используете такую ​​библиотеку, как D3 или аналогичную, для рисования диаграмм SVG со сложными формами. В любом случае, знание этого пригодится, если вам когда-нибудь понадобится отлаживать эти изображения или если вы захотите сгенерировать свои собственные.

Это должно быть больше всего того, во что вам нужно нырнуть и запачкать руки дорожками. Не забудьте ознакомиться с действующей ссылкой на SVG-путь для уточнения деталей!