Редактор SVG-пути

Вставьте значение d, выберите команду и измените форму пути. Редактор показывает сегмент на рисунке, позволяет двигать точки и выдаёт готовый SVG. Всё работает локально в браузере.

Как пользоваться редактором

Вставляйте команды без тега path и кавычек. В списке выберите сегмент: он выделится толстой линией. Круг обозначает конечную точку, квадрат — управляющую. Перетаскивайте маркеры или используйте Tab и стрелки (шаг 1, с Shift — 10). Точные координаты задаются числовыми полями.

Поля всегда показывают абсолютные координаты. Кнопки «В абсолютные» и «В относительные» меняют запись пути, сохраняя форму. При редактировании H/V разворачиваются в L, S/T — в C/Q с явными управляющими точками. Поэтому после перемещения соседние сегменты сохраняют свои управляющие точки; автоматическая гладкость S/T больше не действует.

Кнопка «Показать весь путь» подбирает область просмотра. Во время перетаскивания масштаб фиксирован. При перемещении координаты округляются до сотых; числовые поля сохраняют введённую точность. Экспорт содержит один путь без заливки с обводкой currentColor.

Под рисунком доступны PNG-экспорт и анимация рисования текущего пути через stroke-dasharray и stroke-dashoffset. Настройте длительность, задержку, повтор и обводку; скачайте готовый CSS или SVG с анимацией. При уменьшении движения показывается законченная линия. Подробнее: штриховка в SVG 2.

Для вашего удобства рекомендую использовать полноэкранный режим.

Вставьте только команды пути, без тега path. Изменения применяются сразу.

Круг — конец сегмента, квадрат — управляющая точка. Перетащите маркер или выберите его клавишей Tab и двигайте стрелками; Shift увеличивает шаг до 10.

Параметры команды
Скачать PNG
Размер PNG

Рисунок вписывается без растяжения по центру. Свободные поля сохраняют выбранный фон.

Выберите размер и скачайте файл; повторите для остальных размеров иконки или favicon. Это PNG, не ICO. Обработка локальная. Внешние картинки и шрифты не загружаются; currentColor в отдельном файле обычно чёрный. Анимация не сохраняется в PNG.

Анимация рисования линии

Используется текущий путь редактора. PathLength="1" нормализует длину: dasharray: 1 задаёт штрих длиной в путь, dashoffset меняется от 1 до 0. Несколько под-контуров M начинают штриховку заново; для последовательного рисования разделите их на отдельные path.

Параметры рисования

При prefers-reduced-motion: reduce показывается готовая линия. CSS ниже рассчитан на path с class="draw-line" и pathLength="1"; скачиваемый SVG уже содержит эти атрибуты и стили.

CSS рисования линии

SVG с анимацией
Готовый SVG
Для редактирования включите JavaScript. Например, M 10 10 L 90 10 L 50 90 Z рисует треугольник: M начинает контур, L проводит прямую, Z замыкает его.


Что означают команды


    
    
  • M x y начинает контур; следующие пары без буквы становятся линиями L.
    • 
    
  • L x y рисует прямую, H x — горизонтальную, V y — вертикальную.
    • 
    
  • C x1 y1 x2 y2 x y задаёт кубическую кривую с двумя управляющими точками; Q x1 y1 x y — квадратичную с одной.
    • 
    
  • S и T продолжают кривую, отражая предыдущую управляющую точку. Если подходящей кривой перед ними нет, отражённая точка совпадает с началом сегмента.
    • 
    
  • A rx ry angle large-arc sweep x y рисует дугу: два радиуса, поворот, флаги 0/1 и конец. Первый флаг выбирает большую дугу, второй — направление. Радиусы при необходимости увеличивает сам SVG-рендерер.
    • 
    
  • Z замыкает контур и возвращает текущую точку к последней M.
    • 



Заглавные буквы задают координаты от начала системы, строчные — смещения от начала текущего сегмента. Например, M 10 20 L 40 50 и m 10 20 l 30 30 рисуют одну линию. После Z относительные координаты отсчитываются от начала замкнутого контура.


Редактор предназначен для отдельных путей, а не целого SVG с transform и стилями. Поддерживается до 500 команд и 100 000 символов, координаты в диапазоне ±1 000 000. Ошибка очищает рисунок и экспорт, чтобы неполный путь не выглядел готовым результатом.


Подробнее: команды пути в спецификации SVG. Готовый файл можно оптимизировать или преобразовать в CSS-фон.