Dlaczego kolory SVG zmieniają się po eksporcie: znajdź przyczynę

Kolory SVG zmieniają się po eksporcie, gdy wygląd źródła i plik wynikowy są interpretowane na różne sposoby. Eksporter może przeliczyć wartości kolorów. Witryna może nadpisać fill przez CSS lub pobrać wartość currentColor z elementu nadrzędnego. Gradient, ustawienie krycia, tryb mieszania lub filtr mogą zależeć od funkcji, którą środowisko docelowe obsługuje inaczej. Czasem wyeksportowany kod jest poprawny, a tylko jeden importer daje odmienny wynik.

Nie zaczynaj od zastępowania każdej wartości szesnastkowej. Najpierw znajdź moment, w którym zmienia się wygląd. Dzięki temu ustalisz, czy naprawić SVG, zmienić ustawienia eksportu, uprościć kopię do przekazania czy zachować grafikę w innym formacie.

Dopasuj objaw do pierwszej kontroli

Gdzie zajrzeć najpierw

Wyizoluj problem w pięć minut

1. Zachowaj edytowalny plik główny bez zmian

Zapisz kopię do testów. Nie spłaszczaj efektów, nie zamieniaj wszystkich obiektów na ścieżki ani nie zastępuj kolorów w jedynej edytowalnej kopii. Takie zmiany mogą ukryć przyczynę i utrudnić późniejsze poprawki.

2. Otwórz wyeksportowany SVG w dwóch miejscach

Użyj aktualnej przeglądarki jako neutralnego punktu odniesienia, a następnie otwórz lub zaimportuj ten sam plik w rzeczywistym środowisku docelowym. Porównaj oba widoki z grafiką źródłową na tym samym tle.

• Jeśli oba widoki wyeksportowanego pliku są błędne, sprawdź eksporter lub zapisany kod SVG.
• Jeśli plik otwarty osobno w przeglądarce wygląda poprawnie, a w środowisku docelowym błędnie, sprawdź sposób osadzenia, CSS lub zakres obsługi importera.
• Jeśli różnią się tylko obszary przezroczyste lub z mieszaniem, przetestuj tło i efekty, zanim zmienisz jednolite wypełnienia.

Przeglądarka jest przydatnym punktem odniesienia, ale nie dowodzi, że każda aplikacja projektowa lub produkcyjna zaimportuje ten sam zestaw funkcji.

3. Sprawdź instrukcje wypełnień i obrysów

Otwórz SVG w edytorze tekstu i wyszukaj:

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

Na razie sprawdzasz strukturę, a nie przepisujesz kod. Jawna wartość fill="#2F6BFF" kieruje diagnozę na inną ścieżkę niż fill="currentColor" lub fill="url(#paint0)".

Jeśli po raz pierwszy otwierasz kod SVG, szerszy poradnik o edytowaniu SVG wyjaśnia, jak pracować z kodem i edytorem graficznym.

4. Uprość jeden obiekt powodujący problem

Skopiuj najmniejszy obiekt, którego wygląd nadal się zmienia, do nowego dokumentu i wyeksportuj go. Usuwaj po jednej funkcji: najpierw filtr, potem tryb mieszania, następnie gradient, a na końcu krycie grupy. Pierwsze usunięcie, które poprawi wynik, wskazuje funkcję nieobsługiwaną lub zależną od kontekstu.

Ten test polegający na upraszczaniu obiektu jest bezpieczniejszy niż spłaszczanie całej ilustracji, ponieważ pozwala ustalić konkretne ograniczenie dotyczące pliku do przekazania.

Przyczyna 1: eksporter dokonał konwersji przestrzeni barw

Kolory szesnastkowe i znana składnia rgb() opisują kolory sRGB. Współczesny CSS może też wyrażać przestrzenie o szerszej gamie barw, takie jak Display P3, za pomocą color(), zgodnie ze specyfikacją CSS Color Module Level 4. Aplikacja projektowa może więc przechowywać kolor źródłowy, który wymaga konwersji, zanim stanie się wartością szesnastkową sRGB. Ta konwersja może zmienić wartości liczbowe lub przyciąć kolor spoza docelowej gamy do jej granic.

Sprawdź problem w tej kolejności:

1. zanotuj przestrzeń barw dokumentu źródłowego i wartość liczbową wybranego obiektu;
2. wyeksportuj pojedynczy obiekt z jednolitym wypełnieniem, bez przezroczystości i efektów;
3. otwórz SVG jako tekst i odczytaj zapisaną wartość fill lub stroke;
4. porównaj wyeksportowaną wartość ze źródłową;
5. przetestuj ten sam plik w środowisku docelowym.

Jeśli wartość w pliku się zmieniła, konwersja nastąpiła podczas eksportu. Świadomie wybierz docelową przestrzeń barw i wyeksportuj ponownie. Jeśli wartość pozostała taka sama, ale wygląd się różni, przejdź do sprawdzania CSS, efektów, tła lub działania importera.

W projektach do druku wymagających separacji CMYK, kolorów dodatkowych lub określonego składu czerni zachowaj plik główny stanowiący wzorzec kolorów do druku w natywnym formacie aplikacji projektowej i przekaż format wymagany przez drukarnię, często PDF. SVG nadal może być przydatny na ekranie, ale nie powinien bez świadomej decyzji stać się wzorcem kolorów w procesie, którego nie potrafi wiarygodnie opisać.

Przyczyna 2: currentColor lub CSS zastąpiły wypełnienie albo obrys

SVG można stylizować za pomocą CSS. Specyfikacja stylizowania SVG 2 wskazuje, że atrybuty prezentacyjne, takie jak fill, uczestniczą w kaskadzie CSS ze specyficznością równą zero, więc reguły CSS autora mogą je nadpisać. SVG osadzony bezpośrednio w kodzie strony współdzieli z nią dokument, co oznacza, że ogólne nazwy klas mogą kolidować ze stylami witryny.

currentColor celowo odwołuje się do koloru z innego miejsca. Dokumentacja atrybutu koloru SVG w MDN wyjaśnia, że dostarcza on wartość dla fill, stroke, punktów koloru gradientu i innych właściwości wypełnień oraz obrysów. Jest to przydatne w ikonach, które mają przyjmować kolor otaczającego tekstu, ale oznacza też, że plik nie ma w tym miejscu ustalonego koloru.

Wybierz jedną z dwóch strategii przygotowania pliku:

• W przypadku ikony internetowej dopasowywanej do motywu zachowaj currentColor i ustaw jawną wartość color na SVG lub na odpowiednim elemencie nadrzędnym.
• W przypadku samodzielnego zasobu, który musi zachować własną paletę, zapisz jawne wypełnienia i obrysy oraz nadaj klasom wewnętrznym nazwy, które nie będą kolidować z innymi.

Gdy kilka plików SVG osadzonych bezpośrednio na stronie zawiera identyfikatory takie jak paint0, clip0 lub gradient1, nadaj im unikalne wartości i jednocześnie zaktualizuj odwołania. Nie zmieniaj samego id; każde url(#id) musi nadal wskazywać właściwy element.

Jeśli Twoim celem jest świadoma zmiana kolorów, a nie cofnięcie zmiany po eksporcie, skorzystaj z osobnego poradnika o bezpiecznej zmianie kolorów SVG.

Przyczyna 3: gradient lub odwołanie do definicji wypełnienia albo obrysu przestały działać

Gradienty i wzory SVG są źródłami wypełnień oraz obrysów. Kształt wskazuje na nie przez odwołanie takie jak fill="url(#brandGradient)", a definicja gradientu zwykle znajduje się w <defs>. Specyfikacja źródeł wypełnień i obrysów SVG 2 określa też, jak współrzędne gradientu i transformacje wpływają na wynik.

Trzy kontrole pozwalają wykryć większość problemów ze strukturą:

1. każde url(#id) ma odpowiadającą mu definicję;
2. identyfikatory pozostają unikalne po połączeniu kilku plików SVG na jednej stronie lub w jednym dokumencie;
3. środowisko docelowe zachowuje użyte w pliku rodzaje wypełnień i obrysów, jednostki, transformacje oraz punkty koloru gradientu.

Jeśli proste jednolite wypełnienie importuje się poprawnie, ale gradient nie, zachowaj gradient w pliku głównym i przygotuj kopię do przekazania do środowiska docelowego. Najpierw spróbuj prostszego gradientu liniowego lub radialnego. Jeśli środowisko docelowe nadal nie potrafi go odtworzyć, a dokładny wygląd jest ważniejszy od edytowalnego wypełnienia, użyj formatu lub spłaszczonego zasobu obsługiwanego w docelowym procesie pracy. Wyraźnie oznacz tę kopię, aby nie zastąpiła edytowalnego źródła.

Przyczyna 4: krycie i mieszanie zmieniły widoczny rezultat

Widoczny piksel nie zawsze odpowiada zapisanemu wypełnieniu. fill-opacity wpływa na wypełnienie kształtu, opacity grupy jest stosowane po połączeniu jej elementów potomnych, a tryb mieszania miesza źródło z tłem pod nim. Specyfikacja W3C dotycząca składania i mieszania określa kolejność renderowania oraz wzory mieszania zależne od tła.

Ma to dwa praktyczne skutki:

• Ten sam SVG może wyglądać inaczej na białym, czarnym lub kolorowym tle strony bez zmiany jakiejkolwiek wartości koloru.
• Przeniesienie krycia z grupy na każdy element potomny może zmienić wygląd nakładających się obszarów, ponieważ zmienia się kolejność składania.

Testuj na rzeczywistym tle. Następnie usuwaj w kopii po jednej właściwości lub efekcie: mix-blend-mode, filtry, maski i krycie grupy. Jeśli środowisko docelowe nie potrafi zachować istotnego efektu, wybierz uproszczoną wersję grafiki wektorowej lub spłaszczony zasób do przekazania. Nie spłaszczaj niezwiązanych z problemem części projektu.

Biały lub kolorowy prostokąt za grafiką to osobny przypadek. Poradnik o przezroczystym tle SVG pokazuje, jak odróżnić rzeczywisty kształt tła od pustego obszaru roboczego.

Przyczyna 5: środowisko docelowe zaimportowało tylko część SVG

SVG jest standardem internetowym, ale wiele narzędzi desktopowych, drukarskich, do wycinania, prezentacji i tworzenia stron przekształca go we własny model obiektów. Zakres obsługi może różnić się między aplikacjami i wersjami. Unikaj stwierdzeń takich jak „ta aplikacja nigdy nie obsługuje gradientów”, chyba że potwierdza to aktualna oficjalna dokumentacja dotycząca dokładnie Twojej wersji.

Zamiast tego wykonaj kontrolowany test importu:

1. zaimportuj pojedynczą ścieżkę z jednolitym wypełnieniem;
2. dodaj oryginalny gradient;
3. dodaj krycie;
4. dodaj mieszanie lub filtr;
5. zatrzymaj się na pierwszej wersji, której wygląd się zmieni.

Teraz znasz ograniczenie tego środowiska docelowego. Zachowaj pełny plik główny i wyeksportuj kopię do przekazania, która mieści się w przetestowanym zakresie obsługi. Jeśli znikają obrysy, skorzystaj z diagnostyki eksportu dotyczącej obrysów, zamiast zamieniać każdą linię na wypełnienie.

Wybierz najmniejszą bezpieczną poprawkę

Kiedy przydaje się PerfectVector

PerfectVector przydaje się, gdy źródło wektorowe zostało utracone lub nie nadaje się do użytku, a najlepsza zachowana wersja grafiki to obraz rastrowy. Możesz przekształcić ten obraz w edytowalne kształty wektorowe, a następnie sprawdzić paletę, przezroczystość i ścieżki przed otwarciem wyniku w środowisku docelowym.

Nie naprawi odziedziczonych stylów CSS, nie przywróci brakującej definicji gradientu, nie odzyska profilu kolorów aplikacji projektowej, nie zachowa nieobsługiwanego trybu mieszania ani nie zmieni parsera importera. Jeśli SVG nadal zawiera poprawne ścieżki i instrukcje wypełnień oraz obrysów, napraw plik zamiast ponownie wektoryzować zrzut ekranu. Dzięki temu zachowasz więcej oryginalnej struktury.

Lista kontrolna przed przekazaniem pliku

• Zachowaj edytowalny plik główny i wprowadzaj poprawki w kopii.
• Porównaj wyeksportowany plik w przeglądarce i rzeczywistym środowisku docelowym na tym samym tle.
• Sprawdź, czy zapisane wartości fill i stroke się zmieniły.
• Wyszukaj currentColor, ogólne nazwy klas i powtarzające się identyfikatory.
• Dopasuj każde odwołanie url(#id) do jego definicji.
• Testuj osobno krycie grup, tryby mieszania, filtry i maski.
• Uprość tylko tę funkcję, której środowisko docelowe nie potrafi odtworzyć.
• Ponownie otwórz lub zaimportuj końcowy plik do przekazania, zanim zastąpisz poprzednią wersję.

Najczęściej zadawane pytania

Dlaczego mój SVG wygląda poprawnie w przeglądarce, ale błędnie po imporcie? Plik prawdopodobnie używa funkcji lub kontekstu stylów, które środowisko docelowe przekształca inaczej. Zaimportuj jedną ścieżkę z jednolitym wypełnieniem, a potem dodawaj z powrotem po jednym elemencie: gradient, krycie, mieszanie lub filtr. Pierwszy krok, który daje błędny wynik, wskazuje ograniczenie środowiska docelowego bez uszkadzania pliku głównego.

Czy pliki SVG zawsze używają RGB? Typowe kolory szesnastkowe i rgb() należą do sRGB, natomiast współczesny CSS może też wyrażać przestrzenie takie jak Display P3. Aplikacje projektowe i drukarskie mogą przeliczać te kolory podczas eksportu lub importu. Sprawdź zapisaną wartość koloru, a w pracach z CMYK lub kolorami dodatkowymi użyj formatu produkcyjnego wymaganego przez drukarnię.

Dlaczego mój SVG stał się czarny po eksporcie? Sprawdź, czy plik używa currentColor, utracił regułę CSS albo odwołuje się do brakującego gradientu lub identyfikatora definicji wypełnienia albo obrysu. Czerń może być kolorem odziedziczonym lub objawem użycia wartości zastępczej, a nie skutkiem zastąpienia oryginalnego wypełnienia. Porównaj plik otwarty osobno z wersją osadzoną lub zaimportowaną.

Czy mam zastąpić każdą wartość szesnastkową, gdy kolory wyglądają źle? Nie. Najpierw ustal, czy wartości zmieniły się podczas eksportu. Jeśli liczby są nienaruszone, ich zastąpienie może ukryć problem z CSS, odwołaniem do definicji wypełnienia lub obrysu, mieszaniem, tłem albo importerem i sprawić, że plik będzie mniej wierny oryginałowi w innych środowiskach.

Czy PerfectVector może naprawić SVG, którego kolory zmieniły się po eksporcie? Nie, jeśli SVG wymaga jedynie poprawienia CSS, gradientów, krycia, profilu lub sposobu obsługi przez importer. PerfectVector przydaje się, gdy oryginalna grafika wektorowa została utracona i chcesz odtworzyć odpowiednią grafikę rastrową o jednolitych wypełnieniach jako edytowalne kształty wektorowe.

Źródła

1. W3C — SVG 2 Styling — Określa stylizowanie przez CSS, atrybuty class i style, atrybuty prezentacyjne, działanie kaskady oraz dziedziczenie w SVG.
2. MDN — SVG color attribute — Wyjaśnia, jak currentColor dostarcza wartości kolorów dla wypełnień, obrysów, punktów koloru gradientu i powiązanych właściwości.
3. W3C — SVG 2 Paint Servers — Określa gradienty liniowe i radialne, odwołania do definicji wypełnień i obrysów, układy współrzędnych, transformacje oraz interpolację kolorów.
4. W3C — CSS Color Module Level 4 — Określa składnię kolorów sRGB i predefiniowane przestrzenie o szerszej gamie barw, w tym Display P3.
5. W3C — Compositing and Blending Level 1 — Określa grupy krycia, kolejność składania, tła oraz tryby mieszania dla SVG i CSS.

Jeśli najlepsze zachowane źródło to PNG lub JPG, odtwórz je jako SVG za pomocą PerfectVector, a następnie porównaj wynik w przeglądarce jako osobny plik i w końcowym środowisku docelowym, zanim zastąpisz stary plik.