Почему цвета SVG меняются после экспорта: найдите причину

Цвет SVG меняется после экспорта, когда внешний вид исходника и готовый файл интерпретируются по-разному. Экспортёр может преобразовать значения цветов. Сайт может переопределить fill через CSS или получить currentColor от родителя. Градиент, настройка прозрачности, режим смешивания или фильтр могут зависеть от функции, которую целевая среда обрабатывает иначе. Иногда экспортированная разметка правильная, а отличается лишь один импортёр.

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

Сопоставьте симптом с первой проверкой

Где искать в первую очередь

Изолируйте проблему за пять минут

1. Сохраните редактируемый оригинал нетронутым

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

2. Откройте экспортированный SVG в двух местах

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

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

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

3. Проверьте инструкции окрашивания

Откройте SVG в текстовом редакторе и найдите:

fill=
stroke=
currentColor
url(#
opacity=
fill-opacity=
mix-blend-mode
filter=

Пока вы изучаете структуру, а не переписываете её. Явное fill="#2F6BFF" указывает на другую ветвь проверки, чем fill="currentColor" или fill="url(#paint0)".

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

4. Упростите один проблемный объект

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

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

Причина 1: экспортёр преобразовал цветовое пространство

Шестнадцатеричные цвета и привычный синтаксис rgb() описывают цвета sRGB. Современный CSS также может выражать пространства с более широким охватом, например Display P3, через color(), как определено в CSS Color Module Level 4. Поэтому графическое приложение может хранить исходный цвет, требующий преобразования перед записью в шестнадцатеричное значение sRGB, а преобразование может изменить числа или ограничить цвет, выходящий за охват.

Проверьте проблему в следующем порядке:

1. запишите цветовое пространство исходного документа и числовое значение выделенного объекта;
2. экспортируйте один однотонный объект без прозрачности и эффектов;
3. откройте SVG как текст и прочитайте записанные fill или stroke;
4. сравните экспортированное число с исходным;
5. протестируйте тот же файл в целевой среде.

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

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

Причина 2: currentColor или CSS заменили окрашивание

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

currentColor — намеренное косвенное указание цвета. Справочник MDN по цвету SVG объясняет, что он предоставляет значение для fill, stroke, точек градиента и других свойств окрашивания. Это полезно для значков, которые должны следовать цвету окружающего текста, но также означает отсутствие фиксированного цвета в этом месте файла.

Используйте одну из двух стратегий передачи:

• Для веб-значка с поддержкой темы сохраните currentColor и задайте явный color на SVG или его нужном родителе.
• Для самостоятельного объекта, который должен сохранять свою палитру, задайте явные заливки и обводки, а область действия внутренних классов ограничьте именами, которые не будут конфликтовать с другими стилями.

Если несколько встроенных SVG содержат ID вроде paint0, clip0 или gradient1, сделайте их уникальными и одновременно обновите ссылки на них. Не меняйте только id: каждый url(#id) должен по-прежнему разрешаться.

Если ваша цель — намеренная перекраска, а не восстановление цвета после экспорта, используйте отдельное руководство по безопасному изменению цветов SVG.

Причина 3: сломалась ссылка на градиент или источник заливки

Градиенты и узоры SVG являются источниками заливки. Фигура указывает на них ссылкой вроде fill="url(#brandGradient)", а определение градиента обычно находится в <defs>. Спецификация источников заливки SVG 2 также определяет влияние координат и преобразований градиента на результат.

Три проверки выявляют большинство структурных проблем:

1. у каждого url(#id) есть соответствующее определение;
2. ID остаются уникальными после объединения нескольких SVG на одной странице или в одном документе;
3. целевая среда сохраняет используемые в файле тип заливки, единицы, преобразования и точки градиента.

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

Причина 4: прозрачность и смешивание изменили видимый результат

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

Это даёт два практических следствия:

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

Тестируйте на реальном фоне. Затем на дубликате поочерёдно удаляйте mix-blend-mode, фильтры, маски и прозрачность группы. Если целевая среда не сохраняет важный эффект, выбирайте между упрощённым векторным вариантом и сведённым объектом для передачи. Не сводите части дизайна, не связанные с проблемой.

Белый или цветной прямоугольник позади рисунка — отдельный случай. Руководство по прозрачному фону SVG показывает, как отличить настоящую фоновую фигуру от пустого холста.

Причина 5: целевая среда импортировала только часть SVG

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

Вместо этого выполните контролируемый тест импорта:

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

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

Выберите минимальное безопасное исправление

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

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

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

Список проверок перед передачей

• Сохраните редактируемый оригинал и вносите исправления в дубликат.
• Сравните экспортированный файл в браузере и реальной целевой среде на одном фоне.
• Проверьте, изменились ли записанные значения fill и stroke.
• Найдите currentColor, общие имена классов и повторяющиеся ID.
• Сопоставьте каждую ссылку url(#id) с её определением.
• Отдельно протестируйте прозрачность группы, режимы смешивания, фильтры и маски.
• Упростите только ту функцию, которую целевая среда не воспроизводит.
• Снова откройте или импортируйте окончательный передаваемый файл перед заменой предыдущей версии.

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

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

Всегда ли файлы SVG используют RGB? Обычные шестнадцатеричные цвета и rgb() относятся к sRGB, а современный CSS также может выражать пространства вроде Display P3. Графические и печатные приложения могут преобразовывать эти цвета при экспорте или импорте. Проверьте записанный цвет и используйте запрошенный типографией производственный формат для CMYK или плашечных цветов.

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

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

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

Источники

1. W3C — стили SVG 2 — Определяет стили CSS, атрибуты класса и стиля, атрибуты представления, поведение каскада и наследование в SVG.
2. MDN — атрибут SVG color — Объясняет, как currentColor предоставляет значения окрашивания для заливок, обводок, точек градиента и связанных свойств.
3. W3C — источники заливки SVG 2 — Определяет линейные и радиальные градиенты, ссылки на заливки, координатные системы, преобразования и интерполяцию цветов.
4. W3C — цветовой модуль CSS, уровень 4 — Определяет синтаксис цветов sRGB и более широкие предопределённые пространства, включая Display P3.
5. W3C — композиция и смешивание, уровень 1 — Определяет группы прозрачности, порядок композиции, фоны и режимы смешивания для SVG и CSS.

Если лучший сохранившийся исходник — PNG или JPG, восстановите его как SVG с PerfectVector, затем сравните результат в отдельном браузере и окончательной целевой среде перед заменой старого файла.