SVG Path Editor: редактирование контуров и примеры
Поправьте иконку, изгиб или декоративную волну: редактор SVG-контуров, разбор команд d, управляющих точек и viewBox. Практические примеры и сохранение результата.
SVG-контур удобно поправлять глазами: передвинуть вершину иконки, сделать изгиб мягче, убрать лишний отступ. Но результат остаётся кодом. В этой статье разберём, как читать атрибут d, управлять узлами и сохранять небольшой SVG, который можно использовать на сайте.
Ниже работает наш редактор на основе svg-path-editor-lib — самостоятельной библиотеки проекта SVG Path Editor. Оболочка, учебные заготовки и организация работы созданы для ae-nekrasov.ru. Здесь удобно редактировать один path; для сложной иллюстрации из множества объектов потребуется редактор всего SVG-документа.
Круглые узлы задают начало и конец кривой. Ручки меняют её изгиб; команда C хранит те же координаты в коде.
Увеличить изображение ⤢Когда нужен редактор контуров и что именно мы меняем
Представьте, что дизайнер передал иконку, а её галочка слишком широкая для кнопки. Перерисовывать весь знак необязательно: достаточно изменить несколько координат. Такая же работа возникает с разделителем секций, маленьким логотипом, линией графика или декоративной волной.
<path> описывает движение по двумерной плоскости. Строка d хранит маршрут, а fill и stroke отвечают за заливку и обводку. В обычной системе SVG ось X направлена вправо, Y — вниз. Поэтому увеличение Y опускает точку, а отрицательное смещение по Y поднимает её. Числа в маршруте относятся к системе координат SVG, а не обязательно к пикселям экрана.
Полезно сразу разделить три задачи: изменить геометрию, настроить оформление, разместить готовую фигуру в нужной области. Если рисунок кажется большим, сначала выясните, какая из этих задач перед вами. Уменьшение самого контура и уменьшение размера его изображения дают разные изменения в коде.
d или SVG-файла. Для первого упражнения достаточно короткого маршрута без фильтров, масок и внешних картинок. Так проще увидеть связь между одним числом и одним изменением формы.Первое упражнение: от заготовки к своему контуру
Начните с заготовки «Волна» или «Стрелка». Выберите узел на холсте и передвиньте его. В панели «Выбранная команда» изменившиеся координаты показывают, какая часть маршрута отвечает за этот участок. Команду можно выбрать и через список «Команда в контуре».
Выберите заготовку, передвиньте точки и настройте кривую. Скопируйте контур или скачайте готовый SVG. Без регистрации: данные обрабатываются в этой вкладке. Отдельная вкладка удобна для работы с контуром на широком экране. Это снимок редактора на нашем сайте: заготовки, контур, выбранная команда и параметры помогают быстро получить SVG для проекта.Редактор SVG-контуров
- Откройте заготовку и отметьте её начальную точку.
- Переместите одну конечную точку. Следите за соседними участками, а не только за выбранным маркером.
- Верните изменение через отмену. Задайте координату числом, нажмите «Применить значения» и сравните результат.
- Измените цвет или толщину обводки. Убедитесь, что маршрут остаётся прежним.
- Нажмите «Скачать SVG» и откройте файл отдельно, чтобы проверить фигуру без сетки и маркеров.
Вставьте строку и нажмите «Применить d». При ошибке сохраняется последний рабочий контур; «Вернуть рабочий d» восстанавливает его текст. Проверьте количество параметров, начальное M и десятичную точку: 12.5 — одно число, 12,5 — два параметра.
В примерах статьи показан полный SVG. Чтобы повторить форму в редакторе, перенесите в поле d только значение этого атрибута, без кавычек и разметки <svg>. Параметры viewBox и оформление задайте отдельно по примеру. Полный блок кода пригодится уже для использования на сайте.
Перетаскивание удобно для поиска формы, числовые поля — для точной правки. На телефоне используйте поля, когда маленький маркер трудно захватить пальцем. Делайте один осмысленный шаг за раз: тогда отмена возвращает понятное изменение, а не случайную цепочку действий.
Команды M, L, H, V и Z: читаем маршрут по частям
Буква определяет действие, следующие числа — его параметры. Заглавные команды задают абсолютные координаты, строчные — смещения от текущей точки. Это два способа записать одну и ту же фигуру; преобразование между ними должно сохранять её вид.
| Команда | Что задаёт | На что смотреть |
|---|---|---|
M / m |
Перемещение без рисования линии. | Начало нового подконтура. |
L / l |
Отрезок к точке X, Y. | Обе координаты конца. |
H / h, V / v |
Горизонтальный или вертикальный отрезок. | Одна координата или одно смещение. |
C / c, S / s |
Кубическая кривая Безье и её сокращённое продолжение. | Конец и управляющие точки. |
Q / q, T / t |
Квадратичная кривая и её сокращённое продолжение. | Одна управляющая точка. |
A / a |
Дуга эллипса. | Радиусы, угол, два флага и конец. |
Z / z |
Замыкание к началу текущего подконтура. | Замыкающий участок и соединение обводки. |
Например, M5 12 L10 17 L19 7 и M5 12 l5 5 l9 -10 задают одинаковую галочку. В первой строке перечислены точки, во второй — переходы между ними. Менять только регистр букв нельзя: числа при настоящем преобразовании тоже пересчитываются.
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" width="24" height="24"
role="img" aria-labelledby="check-title">
<title id="check-title">Готово</title>
<path d="M5 12 L10 17 L19 7" fill="none"
stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>Упражнение: поменяйте конечную точку с 19 7 на 18 6. Верхний правый конец сместится влево и вверх. Если фигура изменилась целиком, проверьте, не редактируете ли вы относительное смещение раннего сегмента: положение следующих относительных команд зависит от текущей точки.
Z не принимает координат. Оно замыкает текущий подконтур; повторное M позволяет начать другой. Для открытой линии явно задавайте fill="none": заливка открытого подконтура может создавать неожиданную область между его концами. Замыкание и простое совпадение первой и последней точек также различаются оформлением соединения обводки.
Кривые Безье: конечные точки, ручки и плавный стык
У конечной точки и управляющей точки разные роли. Конец лежит на кривой. Управляющая точка задаёт направление и силу изгиба, но сама кривая обычно через неё не проходит. Если тянуть ручку, чтобы «передвинуть вершину», легко получить сильный перегиб вместо нужного смещения.
У C две управляющие точки и конец: C x1 y1 x2 y2 x y. У Q одна: Q x1 y1 x y. Для волны удобно начать с кубической кривой и смотреть, как расстояние ручек от концов меняет её характер.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120">
<path d="M12 60 C48 4 72 116 120 60 S192 116 228 60"
fill="none" stroke="#176c72" stroke-width="4"
stroke-linecap="round" />
</svg>В этом примере первая кривая заканчивается в 120 60. Команда S отражает предыдущую последнюю ручку относительно этой точки, если предыдущая команда — C или S. Иначе первая ручка совпадает с началом сегмента. Аналогично T продолжает Q или T. Сокращение не гарантирует удачную форму любого рисунка, но избавляет от повторной записи отражённой точки.
В нашей мастерской отражённая ручка показана для понимания формы, но отдельно не перетаскивается. Чтобы изменить её положение, поправьте исходную ручку предыдущего сегмента либо смените тип команды на кривую с явными управляющими точками.
Для второй тренировки возьмите замкнутое сердце. Здесь четыре явные кубические команды: удобно сравнивать левую и правую половины и видеть, как каждая пара ручек отвечает за плечо или нижний изгиб.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M50 85 C42 76 12 56 12 32
C12 10 38 8 50 27 C62 8 88 10 88 32
C88 56 58 76 50 85 Z"
fill="#e6a4b5" stroke="#9e3756" stroke-width="2" />
</svg>Практическая задача: сделайте верхнюю выемку менее глубокой, сохранив нижний кончик. Сначала измените узел 50 27, затем проверьте примыкающие ручки. Не добавляйте новые сегменты, пока существующими можно получить нужную форму. Чем меньше лишних точек, тем легче поддерживать контур позже.
Дуга A: радиусы и два флага без угадывания
У дуги другой набор параметров: A rx ry rotation large-arc-flag sweep-flag x y. rx и ry задают радиусы эллипса, rotation — угол его осей. Последние X, Y задают конец дуги. В относительной a конец записывается смещением; радиусы и флаги от этого не становятся относительными координатами.
large-arc-flag выбирает меньший или больший обход, sweep-flag — направление. Оба принимают только 0 или 1. Начальная и конечная точки вместе с этими параметрами определяют нужный участок эллипса. Если радиусы слишком малы для соединения концов, SVG корректирует их; это может выглядеть неожиданно при ручном подборе.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80">
<path d="M20 40 A50 24 0 0 1 100 40"
fill="none" stroke="#176c72" stroke-width="3" />
</svg>Оставьте координаты и радиусы неизменными, затем по очереди переключите каждый флаг. Так проще увидеть их действие. Начните с этих достаточно широких радиусов: на точном полуэллипсе различие малого и большого обхода может исчезать. Для круга нужны равные радиусы; одной дугой с совпадающими началом и концом целый круг не получится.
Когда нужна произвольная мягкая линия, часто проще выбрать Безье. Дуга подходит, если форма действительно связана с окружностью или эллипсом. Не пытайтесь управлять ею так же, как кубической кривой: радиус и флаг — другие способы изменения геометрии.
viewBox, масштаб и поворот: что менять при обрезанном рисунке
viewBox="minX minY width height" задаёт видимую область в координатах SVG. Атрибуты width, height или CSS определяют размер изображения на странице. Например, один контур с viewBox="0 0 24 24" можно показывать шириной 24 или 96 пикселей без переписывания d.
Изменение viewBox меняет область и отображение маршрута, но не его координаты. Преобразование геометрии пересчитывает сам контур. Перенос полезен для выравнивания фигуры, масштаб — для согласования координат, поворот — для изменения направления. Неодинаковый масштаб по X и Y растягивает форму: круг становится эллипсом.
В мастерской −/+ меняют только масштаб просмотра. «Масштабировать d» изменяет геометрию, «Применить viewBox» задаёт область готового SVG, «Вписать контур с отступом» подбирает её автоматически. Для поворота задайте также координаты центра.
- Проверьте область viewBox и крайние точки контура.
- Оставьте запас под обводку, особенно у острых соединений.
- Сравните размеры SVG и пропорции viewBox.
- Только затем меняйте геометрию, если размер самого маршрута действительно неверный.
По умолчанию SVG сохраняет пропорции при вписывании области. Настройка preserveAspectRatio управляет этим соответствием; none допускает растяжение. Для декоративного разделителя оно иногда нужно, для привычной иконки обычно ухудшает вид. Проверяйте результат в размерах реальной кнопки, а не только на большом холсте редактора.
Если требуется постоянная визуальная толщина линии при масштабировании, изучите vector-effect="non-scaling-stroke". Это настройка обводки, а не исправление неправильно подобранных координат. При повороте также важно знать центр: поворот вокруг начала координат и вокруг центра фигуры размещает её по-разному.
Сохранение SVG и проекта: переносим результат на сайт
«Копировать SVG» и «Скачать SVG» дают готовое изображение с корневым <svg>, viewBox и оформлением. «Копировать d» нужно, когда элемент уже есть в вашем компоненте. «Сохранить проект» создаёт JSON для продолжения работы; браузер не покажет его как иконку.
Наш JSON-проект содержит строку d, название, стиль и viewBox. Его можно открыть снова или передать коллеге, сохранив эти настройки. Редактор рассчитан на небольшие контуры до 300 команд; для большого составного рисунка удобнее выбрать полноценный векторный редактор.
«Открыть SVG / проект» принимает наш JSON либо извлекает первый path и выбранные атрибуты из SVG. Группы, transform, CSS и остальные фигуры не переносятся. Поэтому сложная иллюстрация после импорта может выглядеть иначе.
Перед экспортом отключите мысленно все вспомогательные элементы: сетка, узлы и ручки служат редактору. Проверьте только фигуру, её поля и цвет. У галочки из первого примера currentColor берёт цвет окружающего элемента при inline-вставке. У отдельного SVG-файла, подключённого через <img>, цвет внешнего текста так не наследуется.
Заливка и обводка решают разные задачи. Для открытой волны оставьте заливку выключенной; для сердца настройте обе. stroke-linecap меняет концы открытой линии, stroke-linejoin — соединения сегментов. На маленьком размере слишком толстая обводка может закрыть промежутки, которые хорошо видны на рабочем холсте.
Осмысленному изображению нужен доступный текст: в inline SVG можно связать <title> с aria-labelledby, как в первом примере. Если повторяете иконку несколько раз, идентификаторы заголовков должны быть уникальными. Декоративный значок рядом с подписанной кнопкой можно скрыть от вспомогательных технологий, сохранив понятную подпись самой кнопки.
Для переноса чужого SVG используйте только нужные данные контура и известные настройки. Полноценный SVG-документ может содержать скрипты, ссылки и дополнительные элементы. Редактирование геометрии одного path не является универсальной проверкой безопасности произвольного SVG. Не вставляйте весь неизвестный исходник в HTML только потому, что он выглядит как маленькая картинка.
Оригинальный SVG Path Editor и следующий шаг в работе
В оригинальном приложении Yann Armelin можно вставить маршрут, добавить команду через +, переместить точки и использовать панель команд. Меню … содержит операции над выбранной командой. Переключение типа команды меняет абсолютную и относительную запись; Zoom to Fit помогает подобрать область просмотра.
Его README описывает преобразования Scale, Translate, Rotate, округление и оптимизацию. Там же перечислены клавиатурные сокращения: буквы команд для вставки, Shift с буквой для смены типа, Ctrl/Cmd+Z для отмены. Это инструкция к интерфейсу оригинального приложения; набор действий нашей мастерской смотрите непосредственно в её панелях.
Для запуска исходного Angular-приложения официальный README предлагает установить зависимости командой npm install, затем выполнить npm start и открыть http://localhost:4200/. Сборка выполняется через npm run build. Наш HTML5-редактор использует самостоятельную библиотеку svg-path-editor-lib; инструкция его скачиваемого проекта находится в README архива.
Для скачанного проекта нашей мастерской выполните npm ci и npm run dev. Дополнительный setup не нужен: версия библиотеки закреплена в lockfile.
Библиотеку можно использовать и в своём JavaScript-проекте. Этот короткий пример разобранного контура сдвигает галочку на две единицы вправо и одну вверх. Метод translate изменяет сам объект; asString возвращает строку для атрибута d.
import { SvgPath } from "svg-path-editor-lib";
const path = new SvgPath("M5 12 L10 17 L19 7");
path.translate(2, -1);
const d = path.asString(2);
console.log(d);Здесь 2 в asString(2) задаёт точность округления. Для очень маленьких деталей проверьте силуэт после уменьшения точности: короткий код не должен разрушать форму. Версия библиотеки в нашей мастерской закреплена как 1.0.4; при использовании другой версии сверяйте API и примеры её README.
Проект SVG Path Editor опубликован под Apache License 2.0. Авторство библиотеки и сведения о зависимостях сохранены в поставляемых уведомлениях. Собственные учебные SVG-примеры в статье помогают изучить формат, а возможности оболочки можно развивать независимо.
После первых упражнений полезно взять реальную иконку из своего проекта. Сформулируйте одну задачу: поправить пропорции, выровнять стык или убрать обрезание. Измените минимум необходимых параметров, сравните исходник и результат в интерфейсе и сохраните рабочую заготовку. Такой подход даёт больше контроля, чем случайное перемещение всех точек подряд.
Справочные материалы: команды d в MDN, кривые и маршруты, viewBox, спецификация SVG Paths.
