Импорт SVG в Excalidraw: что можно редактировать?

Перетаскивание SVG в Excalidraw может дать четкое масштабируемое изображение без возможности редактировать отдельные контуры. Если нужно перекрасить или переместить часть, нужна сцена Excalidraw из нативных элементов. Конвертер SVG в Excalidraw может построить такие элементы, но результат все равно нужно проверить визуально. Обсуждение импорта SVG в Excalidraw описывает именно эту проблему: один объект вместо редактируемых частей.

Мы проверили маленькую двухцветную иконку с прозрачным отверстием. Конвертер закрепленной версии создал три выделяемых элемента Excalidraw, но заполнил отверстие, которое было прозрачным в SVG. Это полезное напоминание: редактируемость и точность проверяются отдельно.

Три значения выражения «SVG в Excalidraw»

Третий случай идет в обратном направлении. Инструмент может поместить исходные данные Excalidraw в экспорт SVG, чтобы его собственный рисунок снова открывался для редактирования. Например, расширение Excalidraw для VS Code описывает файлы .excalidraw.svg со встроенными данными сцены. Это не означает, что произвольная иллюстрация SVG уже содержит фигуры Excalidraw.

Если импортированная графика не разгруппировывается, сначала определите структуру выбранного объекта. Наше руководство по разгруппировке SVG различает объекты изображений, составные контуры и настоящие группы; Excalidraw добавляет к вопросу исходного файла собственный формат сцены.

Если нужно только редактировать контуры SVG, следуйте проверкам трассировки или импорта в Boxy SVG и сохраните оригинал SVG. Конвертируйте в сцену Excalidraw, когда нужны нативные элементы сцены.

Небольшой тест конвертации: фигуры сохранились, отверстие — нет

Наш исходник — написанный вручную SVG: бирюзовое кольцо из составного контура с правилом even-odd и золотой круг. Центр кольца был действительно прозрачным в оригинале, а не закрашенным белым. Мы обработали его через официальный репозиторий svg-to-excalidraw с версией пакета npm 0.0.2, сохранили возвращенную сцену как файл .excalidraw, открыли в Excalidraw и экспортировали прозрачный PNG для сравнения.

Исходник и конвертированная сцена

Конвертация не сообщила об ошибках и создала три нативных элемента: два бирюзовых элемента рисования и один золотой эллипс. Золотой акцент выделялся отдельно. Но прозрачный центр не прошел визуальную проверку. В исходном рендеринге центральный пиксель был прозрачным; в прозрачном PNG, экспортированном Excalidraw, соответствующий пиксель стал непрозрачным бирюзовым. Ответ конвертера без ошибок не гарантировал совпадающей картинки.

Это один намеренно узкий тест, а не утверждение обо всех SVG или всех способах конвертации. Отдельный эксперимент SVG Chop также рассматривает сложные структуры SVG как проблему конвертации. Беглого взгляда на количество объектов недостаточно. Отверстия, маски, обрезка, градиенты, текст и вложенные группы заслуживают отдельных тестов, если они есть в вашем дизайне.

Как проверить свой SVG

1. Сохраните оригинальный SVG. Сделайте копию перед импортом или конвертацией. Проверьте, является ли область, которую вы хотите изменить, отдельным контуром или фигурой. Один составной контур может иметь отверстие без отдельных выделяемых частей.
2. Определите, что значит «редактируемый» для этого рисунка. Если нужно только масштабировать и размещать иллюстрацию, изображения может хватить. Для перемещения или перекрашивания части она должна существовать как нативный элемент сцены.
3. Попробуйте конвертацию на копии. Открытый проект SVG-to-Excalidraw превращает геометрию SVG в содержимое сцены Excalidraw. Изучите актуальные инструкции по настройке и зафиксируйте используемую версию пакета. Импортируйте или откройте полученную сцену, а не предполагайте, что обычное размещение изображения откроет контуры.
4. Посчитайте и выделите части. Можно ли выделить акцент отдельно от основной части? Можно ли перекрасить его, не меняя другой цвет? Снова откройте сохраненную сцену и повторите редактирование.
5. Сравните картинку, а не только объекты. Поместите оригинал и экспорт Excalidraw на контрастные фоны. Проверьте отверстия, перекрытия, края, текст и нужные эффекты. Наш тест прошел бы проверку «три элемента», но провалился здесь.

Если конвертация разбивает одну задуманную часть на множество элементов рисования, группировка может облегчить перемещение, но не восстанавливает исходную структуру контура. Если отверстие исчезает, измените исходник или используйте другой редактор для этой графики. Храните редактируемый оригинал в векторном редакторе, когда Excalidraw не сохраняет нужную возможность.

Где подходит PerfectVector

PerfectVector помогает на предыдущем этапе только для растрового исходника, например плоской иконки PNG, у которой еще нет контуров SVG. Конвертируйте клипарт в SVG, проверьте сохранность цветовых областей и негативного пространства и очистите геометрию перед конвертацией в Excalidraw. Руководство по подготовке маленьких иконок описывает четкость и согласованность исходников. Векторизация сама по себе не превращает размещенное изображение Excalidraw в нативные элементы сцены, а новый трассированный SVG все равно требует описанной выше проверки целевого приложения.

Для SVG с уже подходящими векторными фигурами пропустите повторную трассировку. Вместо этого сравните оригинал с конвертированной сценой. Связанное руководство по пользовательским фигурам SVG в draw.io делает аналогичное различие между изображением и нативной фигурой для другого редактора диаграмм.

FAQ

Можно ли разгруппировать размещенное изображение SVG в фигуры Excalidraw? Выделение всего изображения не открывает исходные части SVG как нативные элементы Excalidraw. Если нужны отдельные фигуры сцены, используйте процесс конвертации, затем проверьте результат.

Сохраняет ли конвертация SVG в Excalidraw все отверстия? Не предполагайте этого. В тесте версии 0.0.2 кольцо even-odd стало редактируемыми элементами рисования, но прозрачный центр заполнился. Сравните свой исходник и сохраненную сцену, особенно там, где важно пустое пространство.

Стоит ли векторизовать SVG перед импортом? Нет. Если SVG уже содержит нужные фигуры, проверьте его структуру и конвертацию Excalidraw. Векторизация нужна, когда исходное изображение растровое, например PNG или JPG.

Sources

1. Excalidraw discussion #6082 — Вопрос пользователя об импортированном SVG, который ведет себя как один блок вместо редактируемых частей.
2. Excalidraw — svg-to-excalidraw — Официальный открытый способ конвертации, использованный в тесте оригинальной иконки с закрепленной версией.
3. Excalidraw Editor extension for VS Code — Описывает файлы сцены Excalidraw и экспорт SVG/PNG со встроенными данными сцены.
4. Minixcali — SVG Chop — Независимый эксперимент по конвертации частей SVG в элементы Excalidraw с оговорками о геометрии.

Если вы начинаете с иконки PNG, создайте вариант SVG с PerfectVector, проверьте отдельные области и отверстия, затем проверьте сохраненную сцену Excalidraw перед использованием в рисунке.