SVG feColorMatrix: смена цвета без изменения заливок

Фильтр SVG feColorMatrix меняет цвета, которые показывает средство отрисовки. Он не переписывает значения fill ваших контуров. Поэтому он полезен для обратимых визуальных эффектов, но предпросмотр с фильтром и SVG с отредактированной палитрой — разные результаты для передачи.

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

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

Выберите нужный результат смены цвета

Руководство по редактированию цвета SVG объясняет, как находить заливки, обводки и правила стилей. Здесь рассматривается более узкий вопрос: что фильтр оставляет в файле. MDN описывает feColorMatrix как преобразование цветовых каналов пикселей, а руководство по заливкам и обводкам — как параметры окрашивания применяются к фигурам.

Двухцветный пример, который можно проверить

Сохраните это как filtered-leaves.svg и откройте в браузере. Первый лист изначально имеет оранжевую заливку #cc6633; второй — зеленую заливку #339966 с половинной непрозрачностью. Матрица меняет местами красный и синий каналы, сохраняя зеленый и альфа-канал.

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 260 220" width="260" height="220">
  <defs>
    <filter id="swap-red-blue" color-interpolation-filters="sRGB">
      <feColorMatrix type="matrix" values="
        0 0 1 0 0
        0 1 0 0 0
        1 0 0 0 0
        0 0 0 1 0" />
    </filter>
  </defs>
  <g filter="url(#swap-red-blue)">
    <path fill="#cc6633"
      d="M40 125 C25 35 105 15 150 35 C165 105 120 150 40 125Z" />
    <path fill="#339966" fill-opacity="0.5"
      d="M100 175 C90 90 180 65 225 90 C230 155 175 200 100 175Z" />
  </g>
</svg>

Мы отобразили в браузере четыре версии этого исходного мотива: исходные цвета, вариант с фильтром, прямую правку и копию с удаленным фильтром. При прямой правке первая заливка была изменена на #3366cc, а вторая — на #669933, без фильтра. Оба способа перекрашивания дали сине-оливковый мотив. Проверка DOM версии с фильтром по-прежнему возвращала исходные оранжевый и зеленый атрибуты заливки. Удаление фильтра вернуло исходную палитру.

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

Чтобы повторить проверку исходника, откройте SVG в текстовом редакторе и найдите fill=. Затем удалите из группы только filter="url(#swap-red-blue)" и обновите браузер. Храните рядом неизмененный файл для сравнения результата.

Читайте четыре строки без заучивания матрицы

При type="matrix" атрибут values содержит двадцать чисел: четыре строки по пять. Каждая строка вычисляет один выходной канал. Столбцы используют входные красный, зеленый, синий, альфа-канал и постоянное смещение. Справка MDN по матрице показывает уравнения и единичную матрицу.

В нашем примере первая строка берет синий как новый красный. Вторая сохраняет зеленый. Третья берет красный как новый синий. Четвертая сохраняет альфа-канал:

0 0 0 1 0

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

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

Задавайте sRGB, если числа взяты из образца RGB

Примитивы фильтров SVG по умолчанию используют linearRGB. Образец вроде rgb(128, 128, 128) обычно задается в sRGB, поэтому константа матрицы 0.5 в пространстве фильтра по умолчанию не означает тот же отображаемый серый, что половина шкалы sRGB. Используйте color-interpolation-filters="sRGB", если матрица должна работать с этими значениями каналов sRGB. Это отличается от color-interpolation: изменение того атрибута не выбирает цветовое пространство фильтра. MDN описывает значения по умолчанию и это различие.

Для одноцветного силуэта #3366cc нормализованные значения RGB равны 51/255, 102/255 и 204/255, или 0.2, 0.4 и 0.8. Следующий фильтр отбрасывает входные значения RGB и задает эти константы, сохраняя входной альфа-канал:

<filter id="solid-blue" color-interpolation-filters="sRGB">
  <feColorMatrix type="matrix" values="
    0 0 0 0 0.2
    0 0 0 0 0.4
    0 0 0 0 0.8
    0 0 0 1 0" />
</filter>

Укажите ссылку на этот фильтр у объекта через filter="url(#solid-blue)". Он намеренно убирает различия между непрозрачными исходными цветами. Это подходит для силуэта, но не для сохранения тональных деталей фотографии. Спецификация Filter Effects определяет преобразование каналов и работу с цветовыми значениями, не умноженными предварительно на альфа-канал.

Задание sRGB — выбор пространства вычисления, а не гарантия одинакового цвета на каждом дисплее или в печати. Для более общего несовпадения при передаче используйте список проверок цвета при экспорте SVG.

Проверяйте передаваемый файл, а не только предпросмотр

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

Перед передачей вектора проверьте реальную целевую среду:

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

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

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

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

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

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

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

Меняет ли feColorMatrix значения заливки в моем SVG? Нет. Он преобразует отображаемые цветовые каналы. Исходные атрибуты заливки остаются неизменными, если вы не редактируете их отдельно.

Почему выбранный серый светлее ожидаемого? Проверьте пространство вычисления фильтра. Примитивы фильтров SVG по умолчанию используют linearRGB. Задайте color-interpolation-filters равным sRGB, если константы матрицы представляют нормализованные значения образца sRGB.

Как сохранить прозрачность при перекрашивании? Оставьте строку альфа-канала равной 0 0 0 1 0. Это сохраняет входной альфа-канал. Проверьте полупрозрачные края и не добавляйте смещение альфа-канала, если не хотите менять прозрачность.

Может ли PNG с фильтром стать редактируемым вектором? Цветовой фильтр меняет вид, а не геометрию. Чтобы редактировать отдельные векторные фигуры, получите векторный оригинал или векторизуйте растр и проверьте получившиеся контуры.

Источники

1. MDN: feColorMatrix — Определяет строки матрицы, каналы и доступные типы преобразования.
2. MDN: color-interpolation-filters — Объясняет linearRGB по умолчанию и явный выбор sRGB.
3. W3C: Filter Effects, feColorMatrix — Задает поведение преобразования цвета и альфа-канала.
4. MDN: Fills and strokes — Описывает исходные параметры окрашивания фигур SVG.

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