SVG feColorMatrix: zmieniaj kolory bez zmiany wypełnień

Filtr SVG feColorMatrix zmienia kolory wyświetlane przez renderer. Nie nadpisuje wartości fill ścieżek. Dzięki temu przydaje się do odwracalnych efektów wizualnych, ale podgląd z filtrem i plik SVG ze zmodyfikowaną paletą to dwa różne materiały wynikowe.

Jeśli potrzebujesz podglądu w internecie, zachowaj filtr i przetestuj stronę, na której działa. Jeśli ktoś musi zaznaczyć niebieski kształt i edytować jego niebieskie wypełnienie, zmień kolory w źródle. Jeśli źródłem jest PNG, ani filtr, ani umieszczenie obrazu w pliku SVG nie tworzą edytowalnych kształtów wektorowych; wymaga to osobnego etapu wektoryzacji.

Poniższy przykład wykorzystuje ten sam motyw dwóch liści w obu sposobach zmiany kolorów. Możesz zapisać kod, sprawdzić źródło i usunąć filtr, aby zobaczyć dokładnie, co się zmieniło.

Wybierz potrzebny efekt zmiany kolorów

Poradnik edycji kolorów SVG omawia znajdowanie wypełnień, obrysów i reguł stylu. Tutaj skupiamy się na węższym zagadnieniu: co filtr pozostawia w pliku. MDN opisuje feColorMatrix jako przekształcenie kanałów koloru pikseli, a poradnik dotyczący wypełnień i obrysów opisuje wypełnienia i obrysy stosowane do kształtów.

Przykład z dwoma kolorami, który możesz sprawdzić

Zapisz ten kod jako filtered-leaves.svg i otwórz go w przeglądarce. Pierwszy liść ma początkowo pomarańczowe wypełnienie #cc6633; drugi ma zielone wypełnienie #339966 z kryciem wynoszącym połowę pełnej wartości. Macierz zamienia kanały czerwony i niebieski, zachowując zielony i alfa.

<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>

Wyrenderowaliśmy w przeglądarce cztery wersje tego oryginalnego motywu: z oryginalnymi kolorami, z filtrem, po bezpośredniej edycji oraz kopię z usuniętym filtrem. Bezpośrednia edycja zmieniła pierwsze wypełnienie na #3366cc, a drugie na #669933, bez użycia filtra. Oba sposoby zmiany kolorów dały niebiesko-oliwkowy motyw. Sprawdzenie DOM wersji z filtrem nadal zwracało oryginalne pomarańczowe i zielone atrybuty wypełnienia. Usunięcie filtra przywróciło oryginalną paletę.

To niewielka demonstracja w przeglądarce, a nie test zgodności ze wszystkimi edytorami lub formatami eksportu. Wynika z niej prosta, przydatna kontrola przed przekazaniem pliku: plik z filtrem nadal wymaga zachowania i renderowania tego efektu. Wersja z bezpośrednio zmienionymi wypełnieniami przechowuje nową paletę w samych kształtach.

Aby powtórzyć sprawdzenie źródła, otwórz SVG w edytorze tekstu i wyszukaj fill=. Następnie usuń z grupy tylko filter="url(#swap-red-blue)" i odśwież przeglądarkę. Zachowaj obok niezmodyfikowany plik, aby porównać wynik.

Odczytaj cztery wiersze bez zapamiętywania macierzy

Dla type="matrix" atrybut values zawiera dwadzieścia liczb: cztery wiersze po pięć. Każdy wiersz oblicza jeden kanał wyjściowy. Kolumny wykorzystują wejściowe kanały czerwony, zielony, niebieski i alfa oraz stałe przesunięcie. Dokumentacja macierzy w MDN pokazuje równania i macierz jednostkową.

W naszym przykładzie pierwszy wiersz przyjmuje niebieski jako nowy czerwony. Drugi zachowuje zielony. Trzeci przyjmuje czerwony jako nowy niebieski. Czwarty zachowuje kanał alfa:

0 0 0 1 0

Ten ostatni wiersz oznacza „użyj istniejącego kanału alfa bez dodawania przesunięcia”. Zastąpienie go samymi zerami sprawia, że wynik staje się przezroczysty. Dodanie stałej w ostatniej kolumnie zmienia przezroczystość nawet tam, gdzie źródło było przezroczyste, co może utworzyć niepożądany prostokąt w obszarze filtra.

Macierz przetwarza wyrenderowane dane wejściowe filtra. Nie wie, które piksele pochodzą z liścia, litery, obrysu czy osadzonej fotografii. Zastosuj ją do grupy lub obiektu, na który chcesz wpłynąć. Jeśli potrzebujesz zmienić tylko jedną część projektu o określonym znaczeniu, zaznacz ją i zamiast tego edytuj jej kolor.

Ustaw sRGB, gdy liczby pochodzą z próbki koloru RGB

Elementarne operacje filtrów SVG domyślnie używają linearRGB. Próbkę koloru taką jak rgb(128, 128, 128) zwykle określa się w sRGB, więc stała macierzy 0.5 w domyślnej przestrzeni filtra nie oznacza takiej samej wyświetlanej szarości jak połowa skali w sRGB. Użyj color-interpolation-filters="sRGB", gdy macierz ma działać na tych wartościach kanałów sRGB. Ten atrybut różni się od color-interpolation; zmiana tamtego atrybutu nie wybiera przestrzeni kolorów filtra. MDN dokumentuje wartości domyślne i tę różnicę.

Dla jednolitej sylwetki w kolorze #3366cc znormalizowane wartości RGB to 51/255, 102/255 i 204/255, czyli 0.2, 0.4 i 0.8. Poniższy filtr odrzuca wejściowe wartości RGB i ustawia te stałe, zachowując wejściowy kanał alfa:

<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>

Odwołaj się do tego filtra w obiekcie za pomocą filter="url(#solid-blue)". Celowo usuwa on różnice między nieprzezroczystymi kolorami źródłowymi. Nadaje się do sylwetki, ale nie do zachowania szczegółów tonalnych fotografii. Specyfikacja Filter Effects definiuje przekształcenie kanałów i sposób obsługi wartości kolorów, które nie zostały wstępnie przemnożone przez wartość alfa.

Ustawienie sRGB to wybór przestrzeni obliczeń, a nie gwarancja identycznego koloru na każdym ekranie lub w druku. W przypadku szerszych rozbieżności kolorów w przekazywanym pliku skorzystaj z listy kontrolnej kolorów przy eksporcie SVG.

Sprawdź przekazywany plik, nie tylko podgląd

Zmiana kolorów za pomocą filtra pozostaje odwracalna, dopóki oryginalna grafika i definicja filtra pozostają nienaruszone. Zrzut ekranu lub eksport rastrowy zapisuje widoczny wynik w postaci pikseli. Żadna z tych operacji sama w sobie nie udostępnia nowej palety jako edytowalnych wypełnień ścieżek.

Przed przekazaniem grafiki wektorowej sprawdź ją w docelowym środowisku:

1. Otwórz zapisany SVG, korzystając z tej samej ścieżki importu lub eksportu, której użyje odbiorca.
2. Porównaj kolory i półprzezroczyste krawędzie z podglądem w przeglądarce.
3. Zaznacz kształt i sprawdź jego wypełnienie. Czy zawiera zamierzoną nową wartość, czy oryginalny kolor pod efektem?
4. Zapisz plik i otwórz go ponownie. Jeśli efekt jest wymagany, upewnij się, że definicja filtra i odwołanie do niego zostały zachowane.
5. Jeśli odbiorca potrzebuje zwykłych, edytowalnych jednolitych kolorów, użyj wersji z bezpośrednio zmienionymi wypełnieniami i usuń zbędny już filtr z kopii przeznaczonej do przekazania.

W przypadku gradientów, obrysów, krycia lub nakładających się obszarów z mieszaniem kolorów globalna macierz nie jest uniwersalnym narzędziem do wyszukiwania i zamiany. Odtworzenie zamierzonego wyglądu za pomocą wypełnień i obrysów zapisanych w źródle może wymagać edycji czegoś więcej niż pary wartości szesnastkowych. Jeśli dopuszczalny jest wynik rastrowy, inną opcją jest eksport sprawdzonego wyglądu do PNG. Zachowaj osobno wzorcowy plik wektorowy.

Kiedy PerfectVector przydaje się w tym procesie

Jeśli masz już te dwie ścieżki, edytuj je bezpośrednio. Nie ma powodu, aby rasteryzować je i ponownie odtwarzać ich kontury w celu usunięcia filtra kolorów.

PerfectVector przydaje się, gdy zaczynasz od grafiki w formacie PNG lub JPG i potrzebujesz edytowalnych obszarów. Użyj konwersji obrazu na grafikę wektorową, aby przygotować wstępną wersję wektorową, a następnie sprawdź granice jej kształtów i drobne szczegóły przed zmianą kolorów. Filtr zastosowany do bitmapy może zmienić jej wygląd, ale bitmapa nadal pozostaje zawartością złożoną z pikseli. Sprawdzenie osadzonego obrazu rastrowego pomaga odróżnić ten przypadek od ścieżek, które możesz zaznaczać i edytować.

W przypadku fotografii, gdy celem jest po prostu zabarwienie obrazu, pozostań przy obróbce obrazu rastrowego. W przypadku logo z dostępnym wzorcowym plikiem wektorowym użyj tego pliku. Omówienie wektoryzacji wyjaśnia, kiedy odzyskiwanie geometrii z pikseli jest przydatnym krokiem.

FAQ

Czy feColorMatrix zmienia wartości wypełnień w moim SVG? Nie. Przekształca renderowane kanały koloru. Źródłowe atrybuty wypełnienia pozostają niezmienione, chyba że edytujesz je osobno.

Dlaczego wybrana szarość jest jaśniejsza niż oczekuję? Sprawdź przestrzeń obliczeń filtra. Elementarne operacje filtrów SVG domyślnie używają linearRGB. Ustaw color-interpolation-filters na sRGB, gdy stałe macierzy reprezentują znormalizowane wartości próbki koloru sRGB.

Jak zachować przezroczystość podczas zmiany kolorów? Zachowaj wiersz kanału alfa w postaci 0 0 0 1 0. Utrzymuje to wejściowy kanał alfa. Sprawdź półprzezroczyste krawędzie i unikaj dodawania przesunięcia kanału alfa, chyba że zamierzasz zmienić przezroczystość.

Czy PNG z filtrem może stać się edytowalną grafiką wektorową? Filtr kolorów zmienia wygląd, a nie geometrię. Aby edytować poszczególne kształty wektorowe, zdobądź oryginał wektorowy lub przeprowadź wektoryzację obrazu rastrowego i sprawdź wynikowe ścieżki.

Źródła

1. MDN: feColorMatrix — Definiuje wiersze macierzy, kanały i dostępne typy przekształceń.
2. MDN: color-interpolation-filters — Wyjaśnia domyślne użycie linearRGB i jawny wybór sRGB.
3. W3C: Filter Effects, feColorMatrix — Określa działanie przekształceń koloru i kanału alfa.
4. MDN: Fills and strokes — Opisuje zapisane w źródle wypełnienia i obrysy kształtów SVG.

Jeśli Twoja grafika istnieje tylko jako piksele i potrzebuje osobno edytowalnych kolorów, przekonwertuj obraz na wstępną wersję wektorową. Sprawdź ścieżki, zmień kolory w źródle i ponownie otwórz przekazywany plik, aby sprawdzić zarówno jego wygląd, jak i możliwość edycji.