Импорт SVG в Penpot: редактируемые фигуры в дизайне

Чтобы импортировать SVG в Penpot, откройте файл дизайна и перетащите .svg на его холст или выберите инструмент изображений на панели для выбора файла. Команда Import files на главной панели предназначена для файлов проектов Penpot. Если нужно разместить значок, начните внутри дизайна. Рекомендации Penpot по вставке слоев и документация по импорту проектов описывают эти отдельные способы.

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

Проверьте импорт перед повторным использованием

Сохраните исходный SVG, импортируйте один характерный значок и работайте с дубликатом. Проверьте внешний вид, одну заливку, одну кривую и редактируемый текст. Экспортируйте отдельный SVG и сравните с оригиналом перед повторением процесса для набора.

Начните с холста, затем проверьте слои

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

Выделите импортированную графику и раскройте запись на панели Layers. Группа — полезная организация, а не доказательство превращения SVG в растр. Можно выделить дочерний элемент из панели или войти в группу двойным нажатием; Penpot также поддерживает глубокое выделение через Ctrl-click или Command-click. Это описано в руководстве по выделению слоев.

Разное содержимое SVG может стать разными типами объектов. В выпущенной версии импортера Penpot распространенные фигуры, например контуры, прямоугольники и эллипсы, имеют обработчики, преобразующие их во внутренние фигуры Penpot; другие элементы могут сохраняться как необработанный SVG. Импортер также отдельно обрабатывает элементы изображений. Поэтому одно имя файла не определяет способ редактирования каждой части. См. импортер фигур SVG.

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

Проверьте одну заливку и одну кривую

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

На дубликате импортированного значка:

1. Выделите слой горшка и измените заливку на контрастный цвет. Проверьте изменение только нужной области.
2. Выделите контур одного листа. Нажмите Enter для редактирования узлов, немного переместите одну точку, затем отмените. Penpot описывает это в инструкциях редактирования узлов.
3. Сравните дубликат с нетронутым импортом. Подтвердите сохранение исходного силуэта, мелких зазоров и толщины обводки после отмены проверки.

Если горшок и листья меняются вместе, проверьте выделение и структуру исходника. Возможно, выделена внешняя группа или исходник объединяет несколько областей в один контур. Успешная смена цвета не доказывает, что каждый контур — отдельный контур во внутреннем формате Penpot.

Необработанное содержимое SVG — еще один вариант. У Penpot есть отдельная панель его параметров, включая управление видом поддерживаемых элементов. Поэтому наличие настроек заливки или обводки не гарантирует обычное редактирование узлов. Если часть нельзя редактировать как нужно, упростите или перерисуйте ее в исходном редакторе и импортируйте новую копию. Различие видно в реализации параметров необработанного SVG Penpot.

Диагностируйте симптом перед изменением файла

Используйте неизмененный SVG как образец. Откройте в браузере и сравните отрисовку с импортом Penpot. Если в браузере он уже выглядит неверно, вернитесь к исходному экспорту перед исправлением копии Penpot.

Отсутствующие обводки и невидимая графика

Проверьте заливку и обводку выбранного слоя перед удалением. Penpot дает управление цветом обводки, непрозрачностью, шириной, стилем и видимостью, а также окончаниями открытых контуров. Короткий штрих может выглядеть совершенно иначе с другим окончанием, поэтому сравните фигуру вместо предположения об отсутствии линии. Доступное управление описано в Color and Strokes.

Для невидимого объекта также проверьте скрытые слои и обрезку. Если браузер правильно отображает исходник, а Penpot — нет, изолируйте проблемный элемент в копии исходника. Экспортируйте упрощенный образец заново и сравните. Это дает конкретный файл и симптом для исследования вместо одновременной смены нескольких настроек.

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

Текст выглядит правильно, но не редактируется

Для подписи кнопки попробуйте изменить одно слово. Для логотипа решите, достаточно ли сохранения форм букв. Это разные требования.

Импортированные буквы могут уже быть контурами или оставаться содержимым SVG вместо текстового слоя во внутреннем формате Penpot. Не предполагайте превращение каждого импортированного текстового элемента SVG в редактируемый текст Penpot. Если формулировка требует регулярных изменений, воссоздайте ее текстовым инструментом Penpot, выберите нужный шрифт и сравните интервалы и переносы строк. Руководство Penpot по тексту объясняет создание текстовых слоев и правку содержимого.

Если буквы меняют форму или переносы, используйте руководство по проблемам шрифтов SVG. Сохраните копию с редактируемым текстом, даже если версии для передачи нужны буквы в контурах.

Когда PerfectVector нужен в процессе

PerfectVector полезен, если есть растровый значок или иллюстрация и нужны редактируемые контуры в Penpot. Преобразуйте PNG или JPG в контуры SVG, проверьте силуэт и цветовые области, затем импортируйте результат и выполните проверку одной заливки и одной кривой. Трассировку все еще нужно оценить относительно нужной графики.

Растровая картинка внутри SVG не приобретает редактируемые контуры листа или горшка только из-за смены контейнера. Импортер Penpot имеет отдельный обработчик изображений; он не превращает изображение в объекты контуров во внутреннем формате Penpot, обрабатываемые в другом месте кода импортера.

Используйте исходный векторный экспорт, если он есть. Для простого символа интерфейса рисование встроенными фигурами Penpot может дать более продуманную геометрию, чем трассировка. Сохраняйте фотографии и графику с обилием текстур как изображения, если пиксели — часть дизайна. Объяснение векторизации изображений рассматривает, что трассировка может восстановить и что меняет.

Экспортируйте один образец перед построением набора

Сохраните рабочий дизайн в Penpot и экспортируйте отдельный SVG для передачи. Выделите значок или монтажную область, добавьте настройку экспорта кнопкой плюс в разделе Export панели Design и выберите SVG. Penpot описывает это в Exporting layers.

Откройте экспорт в браузере. Сравните цвета, обводки, вид текста, обрезку и пустое пространство с образцом. Если файл должен вернуться в редактор дизайна, импортируйте экспорт в отдельную область и повторите проверку редактирования. Правильный вид и полезная структура редактирования требуют отдельных проверок.

Перед добавлением образца в большой набор подтвердите:

• Области с нужными отдельными цветами выделяются независимо.
• Контуры для изменения формы дают пригодные элементы редактирования.
• Редактируемые подписи остаются текстом в рабочем дизайне.
• Экспортированный значок имеет нужные границы и поля.
• Значок все еще четко читается в реальном размере интерфейса.

Затем примените те же проверки ко всему набору. Процесс значков PNG в SVG для UI kit добавляет общие сетки, оптический размер и правила названий после проверки отдельных импортов.

Частые вопросы

Почему диалог Import files Penpot отвергает SVG? Этот диалог импортирует файлы проектов Penpot. Чтобы разместить SVG-графику, откройте файл дизайна и используйте инструмент изображений или перетащите SVG на холст.

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

Нужно ли разгруппировать импортированный SVG? Только если изменение структуры группы помогает задаче. Сначала попробуйте выделить дочерний элемент на панели Layers. Сохранение полезной группы не препятствует редактированию ее выделяемых частей.

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

Источники

1. Penpot: Layers — Вставка графики, выделение дочерних элементов и редактирование узлов контуров.
2. Penpot: Export and import Penpot files — Импорт проектов в формате Penpot отдельно от вставки графики на холст.
3. Penpot: SVG shape importer — Отдельная обработка фигур во внутреннем формате Penpot, изображений и необработанного SVG в выпущенной версии.
4. Penpot: Raw SVG options — Управление видом само по себе не подтверждает редактируемость контуров во внутреннем формате Penpot.
5. Penpot: Color and Strokes — Управление заливкой, обводкой и окончаниями в диагностических проверках.
6. Penpot: Text and Typography — Создание текстовых слоев во внутреннем формате Penpot и редактирование содержимого.
7. Penpot: Exporting layers — Добавление настройки экспорта SVG для слоя или монтажной области.

---

Если исходник — PNG или JPG и нужны редактируемые фигуры, подготовьте SVG с PerfectVector. Импортируйте в Penpot, измените одну заливку и проверьте одну кривую перед добавлением графики в набор дизайна.