Обводки SVG исчезают после экспорта: найдите причину

Когда обводка SVG исчезает после экспорта, сначала выясните, существует ли ещё геометрия контура. Невидимая на вид линия может не иметь цвета обводки, совпадать с фоном, стать слишком тонкой в новом масштабе, оказаться вне viewBox или обрезаться краем страницы. Она также может использовать кисть, профиль переменной ширины, фильтр или правило CSS, которых конечное приложение не понимает.

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

Быстрая диагностика

1. Откройте один и тот же SVG в современном браузере и одном векторном редакторе.
2. Выделите пропавшую линию и убедитесь, что её контур и узлы существуют.
3. В тестовой копии задайте яркий цвет обводки, полную непрозрачность и временно увеличьте ширину.
4. Отодвиньте её от края страницы и по одному отключайте обтравки, маски и фильтры.
5. Удалите преобразования или проверьте их влияние на ширину обводки.
6. Если ошибка возникает лишь в одном приложении, замените неподдерживаемое оформление в копии для передачи.

Четыре результата для обводки

Сначала проверьте, остался ли контур

Откройте копию SVG в текстовом редакторе и найдите обычные элементы фигур: <path>, <line>, <polyline>, <circle> или <rect>. Затем выделите пропавший объект в векторном редакторе и переключитесь в контурный или каркасный режим.

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

До редактирования сравните два средства отображения. Обводка, видимая в Chrome, но отсутствующая в настольном редакторе, указывает на ограничение импорта или зависимость от CSS. Если линия не видна нигде, вероятнее неверная окраска, обрезка, неправильные границы или отсутствие геометрии. Если пуст весь документ, а не только линии, используйте более общее руководство по диагностике пустого SVG.

Если обводка исчезает именно в Penpot, используйте проверки импорта SVG в Penpot, чтобы локализовать проблему передачи.

Причина 1. У обводки нет видимой окраски

SVG рассматривает заливку и обводку как отдельные свойства окраски. Контур может существовать, не отображая линию. Руководство MDN по заливкам и обводкам описывает основные свойства, включая stroke, stroke-width и непрозрачность.

Проверьте выбранный объект и его унаследованные стили на наличие:

• stroke="none";
• отсутствующего stroke в сочетании с fill="none";
• stroke-width="0" или очень малой ширины;
• opacity="0" или stroke-opacity="0";
• цвета обводки, совпадающего со страницей или окружающей фигурой;
• display="none" или visibility="hidden" на объекте или родительской группе;
• класса CSS, переопределяющего атрибуты представления.

В тестовой копии задайте насыщенный цвет, непрозрачность 100% и увеличьте ширину обводки в несколько раз. Если толстая обводка перекрывает внутреннюю часть букв с заливкой, перед изменением контуров сравните порядок рисования обводки и заливки SVG. Поместите позади контрастный прямоугольник. Если линия появилась, восстановите нужный цвет и выберите ширину, читаемую в окончательном размере.

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

Причина 2. Линия обрезается краем страницы или рамки

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

Проверьте это, переместив объект внутрь или временно увеличив viewBox. Если пропавшая часть вернулась, добавьте осознанный отступ вокруг видимой графики. Не расширяйте холст вслепую: рассчитайте место для максимальной ширины обводки, окончаний, соединений и эффектов.

Также проверьте ссылки на clipPath и mask. Обтравка по границам заливки может срезать выступающую за них обводку. Вложенные элементы SVG могут создавать собственные области просмотра, а поведение overflow может различаться между браузером и импортёром дизайнерского инструмента.

Если исчезает лишь один угол, проверьте взаимодействие с высоким stroke-miterlimit. Острое соединение может сильно выступать за контур. Иногда правильнее заменить его круглым или скошенным, чем увеличивать область просмотра, но только если это сохраняет задуманный дизайн.

Причина 3. Масштабирование или преобразования изменили вид обводки

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

Проверьте SVG на transform="scale(...)" у контура и родительских групп. Сравните viewBox, width и height документа, затем проверьте при масштабе 100% и окончательном физическом размере. Если весь дизайн импортируется в неверных размерах, исправьте отображение документа по тесту масштаба SVG с известным размером, а не компенсируйте ошибку произвольной шириной обводки.

SVG также поддерживает vector-effect="non-scaling-stroke". Как объясняет справка MDN по vector-effect, распространённое значение non-scaling-stroke не позволяет ширине отображаемой обводки следовать преобразованиям элемента. Это может быть полезно для интерфейсных схем и карт; проверяйте результат в нужном импортёре, поскольку поддержка вне браузеров зависит от приложения.

Не добавляйте non-scaling-stroke как универсальное исправление. Решите, должна ли линия масштабироваться вместе с графикой. При увеличении логотипа для печати обводки обычно должны расти вместе с ним. Если линия карты должна оставаться шириной в один экранный пиксель при увеличении, немасштабируемая обводка может быть осознанной.

Причина 4. Конечное приложение не воспроизводит оформление

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

Выполните тест упрощения на копии:

1. удалите фильтр, сохранив основную обводку;
2. замените узор или кисть простой сплошной обводкой;
3. уберите переменную ширину;
4. устраните вложенные преобразования;
5. экспортируйте один объект как минимальный SVG;
6. откройте этот файл в конечном приложении.

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

Внешние CSS и ресурсы — ещё один риск переносимости. SVG на сайте может наследовать правило класса или пользовательское свойство страницы, а тот же файл отдельно — нет. И наоборот, настольный редактор может отбросить селекторы, не сопоставляемые с его моделью объектов. Для самостоятельного передаваемого файла используйте самодостаточные стили, которые целевое приложение доказанно импортирует.

Редактируемая обводка или контурная геометрия?

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

Преобразуйте обводки в копии для передачи, когда конечное приложение не сохраняет важное оформление кисти или переменной ширины либо поставщик явно требует геометрию с заливкой. Документация Adobe по разбору объектов описывает преобразование обводок в составляющие объекты.

Сохраните оригинал с редактируемыми обводками, потому что преобразование может:

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

Особенно опасно преобразование, когда перьевой плоттер или процесс гравировки предполагает однократное движение по осевому контуру. Преобразованная в контуры обводка даёт машине две границы. Для такого процесса используйте руководство по однолинейному SVG.

Выберите исправление под конечную систему

Проверяйте конкретное конечное приложение, а не просто другой редактор того же производителя. Браузер, дизайнерский холст, печатный процесс, резак и импортёр CAD могут поддерживать разные подмножества SVG.

Безопасный порядок исправления

Двигайтесь от обратимых проверок к структурному преобразованию:

1. сохраните редактируемый источник и создайте копию;
2. подтвердите наличие геометрии;
3. сравните два средства отображения;
4. проверьте явные настройки цвета, ширины и непрозрачности обводки;
5. проверьте контраст с фоном и унаследованный CSS;
6. изучите границы страницы, обтравки, маски и вложенные области просмотра;
7. проверьте преобразования и отображение в окончательном размере;
8. упрощайте по одному неподдерживаемому оформлению;
9. преобразуйте только необходимые обводки в контуры в копии для передачи;
10. снова откройте передаваемый SVG и сравните с источником.

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

Где полезен PerfectVector

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

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

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

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

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

Почему обводка обрезается у края SVG? Обводка выступает за осевой контур, поэтому контур на границе viewBox может потерять половину ширины. Окончания, соединения, фильтры, обтравки и маски тоже могут требовать дополнительного отступа. Сдвиньте контур внутрь или осознанно задайте область просмотра и обтравку вокруг полного оформления.

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

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

Источники

1. W3C — окраска SVG 2 — Определяет заливку, обводку, её ширину, окончания, соединения и векторные эффекты.
2. W3C — системы координат SVG 2 — Описывает области просмотра, viewBox, единицы и преобразования.
3. MDN — vector-effect — Объясняет поведение non-scaling-stroke.
4. Adobe Illustrator — группировка и разбор объектов — Описывает разбор обводок на редактируемые составляющие объекты.

---

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