Просмотр и разбор SVG path
Вставьте атрибут d из SVG path или целиком элемент path или svg — вы увидите фигуру с опорными точками и направляющими. Каждая команда расписана простыми словами, рядом — точная ограничивающая рамка и тот же путь, переписанный в абсолютных координатах.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Вставьте данные пути или элемент path или svg, скопированный из файла или графического редактора.
- Посмотрите на предпросмотр: круглые точки — конечные точки команд, квадраты — контрольные точки кривых Безье, пунктир — направляющие.
- Изучите список команд и рамку и при необходимости скопируйте абсолютную версию.
Как это работает
Данные пути делятся на команды и числа по правилам SVG: числа могут разделяться пробелами, запятыми или просто знаком, лишние пары чисел после M считаются командами линии, а флаги дуги можно писать без пробелов. Относительные точки прибавляются к текущей точке, а S и T отражают предыдущую контрольную точку. Рамка строится по точным экстремумам каждого сегмента.
Разбор примера
Сердечко из примера — M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z. Две дуги — полуокружности радиусом 20 с центрами в (30, 30) и (70, 30), поэтому их верх доходит до y = 10. Квадратичные кривые спускаются до (50, 90). Значит, рамка — от 10 до 90 по x и от 10 до 90 по y: ширина 80, высота 80, 6 команд в 1 подпути.
Советы
- Чтобы отцентрировать путь во viewBox, возьмите рамку: задайте viewBox как «x y ширина высота» с небольшим запасом.
- Множество мелких относительных команд обычно оставляет оптимизатор; в абсолютной записи их проще проследить.
- Если предпросмотр пустой, проверьте, нет ли в начале данных пропущенной буквы команды.
Частые вопросы
Что означают буквы в данных пути?
M переносит перо, L рисует линию, H и V — горизонтальную и вертикальную линии, C и S — кубические кривые Безье, Q и T — квадратичные, A — эллиптическую дугу, Z замыкает фигуру. Заглавная буква означает абсолютные координаты, строчная — относительные, от текущей точки.
Как считается ограничивающая рамка?
По самой кривой, а не по контрольным точкам. Для кривых Безье инструмент находит, где кривая разворачивается по каждой оси, а для дуг — точки, где эллипс в нарисованной части достигает крайнего левого, правого, верхнего и нижнего положения. Толщина обводки не учитывается.
Зачем нужен абсолютный путь?
Это та же фигура, где все точки записаны в абсолютных координатах, и её проще читать, править вручную или переносить в другую программу. Повторяющиеся числа после команды разбиваются на отдельные команды, числа округляются до 3 знаков после запятой.
Можно ли вставить целый SVG-файл?
Да. Инструмент берёт атрибут d у каждого найденного элемента path и объединяет их. Другие фигуры, например rect или circle, и атрибуты transform игнорируются.