Визуализатор и анализатор команд SVG Path

Чтение команд

Команды в верхнем регистре используют абсолютные координаты, а команды в нижнем регистре перемещаются относительно текущей точки. Для каждой команды требуется фиксированное число значений: H и V — одно, M, L и T — два, S и Q — четыре, C — шесть, A — семь, а Z не требует значений. Дополнительные значения повторяют команду, а дополнительные пары после M обрабатываются как L. Семь значений дуги — это два радиуса, угол поворота, два флага для выбора большой или малой дуги и её направления, а также конечная точка.

Размер предпросмотра и компактная запись чисел

В предпросмотре отображается область размером 200 × 200 единиц, начиная от начала координат. Значок, нарисованный в сетке 24 единицы, будет выглядеть маленьким в левом верхнем углу, а контуры из набора значков размером 512 единиц выйдут за край; это особенность холста, а не контура.

Оптимизаторы часто удаляют разделители, записывая два числа как M10-5 или .5.5. Разбор выполняется так же, как в браузерах: знак минус или вторая десятичная точка начинает новое число, поэтому .5.5 — это 0.5 и 0.5. Флаги дуги состоят из одной цифры, поэтому в a5 5 0 015 5 флаги — 0 и 1, а конечная точка — 5 5. Чтобы изменить форму, а не просто прочитать её, откройте её в редакторе SVG.

Как пользоваться

1. Вставьте данные пути SVG (например, M10 10 L90 90 Z).
2. Изучите токены команд и их описания.
3. Просмотрите визуализацию векторного пути.

Конфиденциальность и ограничения

Обработка на 100% выполняется в браузере; данные не сохраняются.