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

В этом руководстве рассматривается экспорт векторного рисунка из актуального настольного приложения Affinity на Mac и проверка его отображения в браузере или другом настольном приложении. Пути в меню соответствуют актуальному Справочному центру Affinity; в более старых версиях Affinity Designer пункты меню могут располагаться иначе.

Начните с одной кривой и контролируемого экспорта

Сохраните рабочую копию документа Affinity. Выберите кривую, на которой проблема хорошо заметна, и запишите ожидаемый результат: например, «синий изогнутый штрих без внутренней заливки» или «залитое кольцо с прозрачным центром». Так будет проще оценивать каждую проверку, не меняя сразу несколько несвязанных свойств.

Откройте Файл > Экспорт > Экспорт, выберите формат SVG и проверьте настройки справа. Дополнительные параметры находятся в разделе Дополнительно. Для отдельного объекта выберите Область: Только выделенное; параметр Область выделения также включает перекрывающиеся слои. Affinity описывает эти различия в справке по диалоговому окну экспорта.

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

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

Видимый симптом Первая проверка Что поможет выяснить результат
Кривая становится размытой при увеличении Сравните настройки растрирования Растровое содержимое или сохранённая геометрия
Внутри изогнутого штриха появляется сплошная заливка Проверьте заливку выбранного объекта Нежелательная заливка или вид штриха
Отверстие исчезает или область перекрытия оказывается залитой Сравните режимы заливки Разные способы определения внутренней области фигуры
Файл неправильно отображается только в одном принимающем приложении Проверьте упрощённую копию Обработка в целевом приложении или общая проблема экспорта

Почему в SVG могут быть размытые кривые?

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

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

Сравните три варианта растрирования

Для экспорта SVG в Affinity доступны три варианта параметра Растрировать: Ничего не выполняет растрирование при экспорте и исключает неподдерживаемые элементы; Неподдерживаемые свойства растрирует неподдерживаемые элементы; Всё растрирует все элементы. Поэтому вариант Ничего может удалить содержимое вместо того, чтобы сохранить его вид в виде векторов. См. Настройки экспорта.

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

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

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

Выберите между сохранением внешнего вида и геометрии

Для сохранённого растрового содержимого параметр DPI растра задаёт разрешение растрированных эффектов; параметр Уменьшать разрешение изображений может снизить разрешение растровой графики. Параметр Использовать сжатие JPEG и настройка Качество влияют на растрированное содержимое. Параметр Использовать узоры из плиток может поместить растрированную область в векторную фигуру с растровой заливкой; некоторые приложения поддерживают это ограниченно. Эти параметры описаны в разделе Настройки экспорта.

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

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

Почему у открытой кривой появляется неожиданная заливка?

У кривой могут быть одновременно штрих и заливка. В SVG открытые подпути заливаются так, будто их конечные точки соединены замыкающим отрезком. Из-за этого может появиться клин или обширная внутренняя область, хотя видимый штрих остаётся открытым. В SVG исходным значением заливки также задан чёрный цвет, а заливка наследуется. Эти правила описаны в SVG 1.1: заливка и обводка.

Выберите проблемную кривую и откройте Окно > Общие > Цвет. Активируйте селектор Заливка и выберите образец Нет, если объект должен быть штрихом без внутренней заливки. Убедитесь, что изменили заливку, а не обводку. В актуальной документации панели «Цвет» описаны отдельные селекторы и образец «Нет».

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

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

Если отдельный SVG правильно отображается в Safari, но после импорта в другое приложение приобретает заливку, повторите проверку с простой открытой кривой, для которой явно задано отсутствие заливки. Так вы сосредоточитесь на поведении целевого приложения. Не делайте вывод по одной только чёрной области, что Affinity обязательно экспортировала чёрную заливку.

Почему меняются отверстия и области перекрытия?

Залитая область внутри сложной кривой — это иной случай, чем нежелательная заливка простого открытого штриха. В Affinity есть режимы заливки Альтернативный и Ненулевой, которые определяют, какие области самопересекающейся кривой считаются внутренними. Выберите объект и откройте команду Вектор > Режим заливки. См. Режимы заливки.

В альтернативном режиме используется подсчёт пересечений по чётности. В ненулевом режиме ведётся знаковый подсчёт с учётом направления контура. В терминологии SVG им соответствуют значения evenodd и nonzero. Различие важно для самопересечений и вложенных подпутей, как объясняется в справке Affinity о режимах заливки и спецификации SVG fill-rule.

Сравните оба режима на копии проблемного объекта. Проверьте каждое предполагаемое отверстие и перекрытие, прежде чем выбирать режим. Если нужно проверить направление контуров, Affinity описывает параметр Показывать направление кривой в разделе Настройки контекстной панели инструмента «Перо» или «Узел». Он отображает сведения, важные для ненулевого режима. См. Режимы заливки.

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

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

Когда следует преобразовать обводку или применить преобразования?

Используйте Развернуть обводку, если воспроизводимая проблема связана с интерпретацией векторной обводки. Affinity описывает следующий способ: выберите объект инструментом «Перемещение» или «Узел», затем выполните команду Вектор > Развернуть обводку. Команда превращает границы обводки в замкнутые кривые и специально предназначена для подготовки обводок к экспорту в SVG. См. Развернуть обводку.

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

У этого способа есть два документированных ограничения: после преобразования обводка теряет возможность редактирования исходным инструментом, а обводки, созданные растровыми кистями, преобразовать нельзя, поскольку они основаны на растре. Таким образом, преобразование — поддерживаемый способ обработки векторных обводок, но не универсальное преобразование растровой графики в векторную. См. Развернуть обводку.

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

Перед применением исправления проверьте весь рисунок

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

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

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

Источники