Как векторизованный файл устроен внутри

Трассировка группирует результат по объектам: сначала идет <g> для фона (если он есть на изображении), затем по одному <g> на каждый отдельный объект, и у каждого есть имя в <title> (Background, Object 1, Object 2 …). Внутри группы каждая фигура — отдельный элемент <path> с атрибутом fill и атрибутом d, где контур записан командами перемещения, линий и кубических кривых. Фигуры вложены по тому, что их окружает: фигура, внутри которой есть другие (лицо с глазами), становится отдельной группой (Part 1.1, Part 1.1.1 …), а ее первый контур — сама эта фигура, нарисованная целиком под тем, что в ней лежит. Поэтому если скрыть глаз, будет видно лицо, а не дыру. Крапинки меньше нескольких пикселей остаются безымянными контурами внутри родителя. Обводок и текстовых элементов нет: надпись в логотипе — это залитый контур, а не шрифт. Если в настройках для параметра Слои выбрано По цвету, групп в файле нет, а вместо них по одному <path> на цвет.

Небольшой круглый SVG с пейзажем, а затем каждый из четырех его контуров отдельно: синий круг, кремовое небо, темно-синяя гора и оранжевое солнце с отражением

SVG-пример с нашей главной страницы (слева), а затем каждый из четырех его контуров по отдельности: каждая фигура — отдельный элемент со своей заливкой, который можно выделить, перекрасить или удалить.

Редактор читает ровно эту структуру — в собственном размере и координатах файла. Каждый контур — это фигура, которую можно выделить кликом. Список слоев показывает группы верхнего уровня: файл, где фигуры лежат прямо в SVG (трассировка «По цвету»), открывается одним слоем, а файл с группировкой по объектам — со слоем на каждую группу, названным по ней.

Что хорошо получается в браузерном редакторе

  • Перекрасить фигуру. Выделите ее и выберите новую заливку. Один контур содержит все области этого цвета внутри объекта, поэтому если перекрасить «синий», изменятся сразу все синие участки этого объекта; если две из них должны отличаться, их нужно разделить в настольном редакторе.
  • Переместить и масштабировать. Перетаскивайте, чтобы двигать, и тяните за маркеры, чтобы менять размер. Вектор при масштабировании не размывается, так что из одного файла можно сделать вариант для шапки сайта и еще один для favicon.
  • Двигать отдельные точки. Выделите фигуру и переключитесь на инструмент «Точки» (N): у каждой опорной точки векторизованной кривой появится маркер, который можно тянуть, а ее направляющие изгибают соседние сегменты. Так можно исправить дрожащую линию или выпрямить край, не уходя из браузера.
  • Выравнивать и распределять фигуры. Выделите несколько фигур и выровняйте их края или центры друг относительно друга или относительно графики (одна фигура всегда выравнивается относительно графики); если выделено три фигуры или больше, «Распределить» расставит их с равными промежутками.
  • Объединить, вычесть, пересечь. Выделите две фигуры или больше и используйте «Объединить фигуры»: «Объединить» сваривает их в один контур, «Вычесть» вырезает верхние фигуры из нижней, «Пересечь» оставляет только перекрытие, «Исключить» — то, что не перекрывается, а «Разделить» превращает каждое перекрытие в отдельную фигуру. Кривые остаются кривыми, результат получает цвет и слой нижней фигуры, а одна отмена возвращает исходные фигуры. Это обычный шаг перед резкой: сварить перекрывающиеся буквы в одну деталь или вычесть фигуру, чтобы получить прорезь.
  • Привязка к сетке. Включите магнит и выберите шаг сетки: всё, что вы двигаете, рисуете, масштабируете или правите по точкам, будет попадать на сетку, а сама сетка видна поверх графики, пока привязка включена. Редактор запоминает эту настройку в вашем браузере.
  • Повторно использовать фигуры и работать с несколькими файлами. Сохраните выделенное в «Мои элементы» (они хранятся в браузере для вашего аккаунта, их можно экспортировать в файл) и добавляйте в любой другой рисунок. Откройте еще один разблокированный файл в новой вкладке, чтобы копировать между ними: у каждой вкладки своя история отмены, и сохраняется она как новая версия своего файла.
  • Менять порядок, скрывать и блокировать. Слои можно скрывать, блокировать (тогда клики попадают на фигуры под ними), переименовывать и двигать выше или ниже; внутри слоя Ctrl+D дублирует фигуру, а стрелки сдвигают ее.
  • Удалить мусор. Контуры-крапинки и оставшийся прямоугольник фона удаляются в один клик. Обычно это первая правка после трассировки JPEG.
  • Экспорт. Сохраните SVG или экспортируйте PNG нужной ширины в пикселях с сохранением прозрачности. Редактирование разблокированного результата не тратит дополнительные кредиты.

Редактор открывает только ваши векторы: загруженный вами SVG или результат, который вы разблокировали. Предпросмотры — это растровые картинки с водяным знаком, их редактировать нельзя: так платный вектор не уходит в сеть, пока за него не заплатили.

Что лучше делать в настольном векторном редакторе

Некоторые изменения требуют операций с контурами, которых в браузерном редакторе нет:

  • Разделить цвет на отдельные объекты (две синие фигуры, которые должны двигаться независимо): команда «Разбить» (Break Apart) в настольном редакторе.
  • Сместить контур (увеличить или уменьшить его на фиксированное расстояние — например, для линии реза стикера).
  • Превратить заливки в осевые линии для перьевых плоттеров или однолинейной гравировки.
  • Перевести текст в кривые. Браузерный редактор добавляет и сохраняет живой текст, но в контуры его не превращает.

Inkscape (бесплатный, с открытым исходным кодом) умеет всё это; коммерческие редакторы — тоже. Откройте SVG, при необходимости используйте «Разбить» (Break Apart), «Растянуть» (Outset) или инструмент узлов и сохраните. Файл — обычный SVG со стандартными данными контуров, поэтому он ничем не привязан к png2svg.art.

Разумный порядок работы

  1. Разблокируйте результат и откройте его в редакторе. Удалите лишние фигуры, поправьте явно неверные цвета, сгладьте дрожащий край по точкам, проверьте порядок слоев.
  2. Сварите или вырежьте фигуры через «Объединить фигуры» и выровняйте то, что должно стоять ровно.
  3. Сохраните SVG. Если важен размер, пропустите его через оптимизатор (удаление метаданных и округление координат; сверьте размер до и после).
  4. Если задача требует, сместите контур или разбейте его на части в настольном редакторе.
  5. Держите разблокированный результат в своих файлах: повторно скачивать его можно бесплатно, пока он хранится, а открыть в редакторе — в любой момент в течение срока хранения.

Ограничения, о которых стоит помнить

  • Добавить градиент редактор не может: заливки бывают только сплошные или никакие. Обводки (цвет и толщину) добавить можно, а градиенты, обводки и живой текст, которые уже есть в файле, сохраняются. Всё, что редактор не может сохранить, он покажет списком до сохранения.
  • Очень большие трассировки (тысячи контуров из детальной иллюстрации) медленно редактируются в любом браузере; перед правкой упростите трассировку, уменьшив число цветов.
  • Экспортированные PNG — это растр выбранного размера: экспортируйте в самом большом размере, который понадобится, или продолжайте пользоваться SVG.