Softonic

Конструктор SVG-путей

Шаг 1 / 2

Нажмите на пустую область, чтобы добавить точки. Перетаскивайте точки, чтобы двигать их. Удаляйте последнюю кнопкой.

Далее

Атрибут d в SVG <path> представляет собой небольшой предметно-ориентированный язык: M 10 10 L 100 10 C 120 10 120 60 100 60 Z. Каждая буква соответствует команде (moveto, lineto, cubic Bezier, close-path), а каждое число, координате или контрольной точке. Этот конструктор позволяет кликать по холсту, чтобы расставлять опорные точки, и перетаскивать их для изменения формы, наблюдая за построением пути в реальном времени. Включите сглаживание, чтобы превратить прямые отрезки в кубические кривые Безье, замкните фигуру, а затем скопируйте сформированный атрибут d или весь SVG.

Как создать путь

  1. 1

    Кликайте, чтобы добавлять точки

    Каждый клик ставит опорную точку на холсте, а путь соединяет их по порядку, начиная с `M` (moveto).

  2. 2

    Перетаскивайте, чтобы менять форму

    Перетащите любую точку, чтобы сдвинуть её, и удалите последнюю кнопкой. Минимум, две точки.

  3. 3

    Прямые или плавные

    Оставьте точки соединёнными прямыми отрезками `L` или включите Сглаживание, чтобы превратить их в кубические кривые Безье `C`.

  4. 4

    Замкнуть или оставить открытым

    Включите Замкнуть путь, чтобы добавить `Z` обратно к началу, или оставьте путь открытым для ломаной линии/обводки.

  5. 5

    Копируйте атрибут d

    Сформированная строка `d` чистая и разделена пробелами, готова к вставке в любой SVG; вы также можете скопировать или скачать весь SVG.

Краткая справка по командам путей SVG

Визуальный конструктор выше формирует команды M, L, C и Z (moveto, прямая линия, кубическая кривая Безье и close-path). Остальные команды ниже, это справка для чтения и ручного редактирования любой строки d, которую вы вставляете в другом месте. Прописные буквы используют абсолютные координаты, а строчные, относительные смещения по отношению к текущему положению пера.

Команда Название Синтаксис
M / m Moveto M x y
L / l Lineto L x y
H / h Горизонтальная линия H x
V / v Вертикальная линия V y
C / c Кубический Безье C x1 y1 x2 y2 x y
S / s Гладкий кубический Безье S x2 y2 x y
Q / q Квадратичный Безье Q x1 y1 x y
T / t Гладкий квадратичный Безье T x y
A / a Арка A rx ry x-axis-rot lg sweep x y
Z / z Closepath Z

Пример реализации: скруглённая галочка

M 4 12 L 10 18 L 20 6

Три команды: переместить в точку (4, 12), пройти по линии до точки (10, 18) и пройти по линии до точки (20, 6). Добавьте stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" к пути, и вы получите чистый графический символ с отметкой.

Команда arc самая сложная

A rx ry x-axis-rotation large-arc-flag sweep-flag x y принимает семь чисел:

  • rx, ry, радиусы эллипса
  • x-axis-rotation, поворот эллипса в градусах
  • large-arc-flag, 0 для короткой дуги, 1 для длинной
  • sweep-flag, 0 против часовой стрелки, 1 по часовой стрелке
  • x, y, конечная точка

Переключайте флаги по одному, чтобы увидеть, как те же две конечные точки могут соединяться четырьмя разными способами.

Советы

  • Держите числа небольшими и округлёнными. Привязывайте координаты к пиксельной сетке или полупикселю; избегайте 17 знаков после запятой.
  • Предпочитайте команды в верхнем регистре, когда путь самостоятельный. Строчные (относительные) удобны, когда путь позже нужно будет сдвигать.
  • Замыкайте только при заливке. Если путь только обводится, Z не даёт визуальных изменений и экономит один байт.
  • Прогоните через SVGO. Хвостовые нули, повторяющиеся пробелы и повторяющиеся команды аккуратно сворачиваются.

Часто задаваемые вопросы

Координаты в d выражены в тех же единицах, что и область изображения. Путь, созданный для viewBox="0 0 24 24" и размещённый на viewBox="0 0 100 100", будет отображаться в верхнем левом квадранте. Можно либо масштабировать координаты, либо изменить размер области изображения.

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

Да. Значение <polyline points="0,0 10,10 20,0"> изменяется на <path d="M 0 0 L 10 10 L 20 0" />; для многоугольника добавляется дополнительное значение Z. Большинство оптимизаторов выполняют это автоматически, поскольку такие пути лучше сжимаются.

Для эффектов втягивания используйте CSS stroke-dasharray и stroke-dashoffset. Для перемещения элемента по пути используйте SMIL <animateMotion>, где href указывает на идентификатор пути.

Нет. Команды пути вычисляются в браузере и никогда не отправляются никуда.

Сопутствующие инструменты

Сжать GIF

Уменьшайте анимированные GIF прямо в браузере: снижайте размеры, оставляйте меньше кадров и настраивайте качество кодирования. Проверьте петлю перед скачиванием.

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Конвертер JPG в Word

Конвертируйте JPG-фото или скриншот текста в редактируемый документ Word. Инструмент считывает слова с помощью OCR и раскладывает их, чтобы вы могли переписать, отформатировать и переиспользовать их.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Конструктор флагов

Создайте в браузере простой собственный флаг 3:2 с шестью компоновками, цветами, текстом и символом. Скачайте SVG или PNG либо откройте диалог печати браузера.

Инструмент доступен на других языках