Jak zmienić kolory SVG i rozwiązać typowe problemy

Kolor pliku SVG możesz zmienić na trzy sprawdzone sposoby — każdy z nich jest bezpłatny. Prześlij plik do internetowego narzędzia do zmiany kolorów SVG i kliknij próbkę koloru, który chcesz zastąpić. Otwórz go w aplikacji do grafiki wektorowej, takiej jak Inkscape, zaznacz kształt i wybierz nowe wypełnienie. Albo otwórz plik w edytorze tekstu i zamień kod szesnastkowy, bo SVG to po prostu tekst. Zmiana kolorów grafiki wektorowej jest też bezstratna: zmieniasz instrukcję, zamiast przemalowywać piksele, więc nic się nie rozmywa ani nie traci jakości.

Wybór metody zależy od tego, co znajduje się w Twoim pliku. A gdy SVG nie daje się przemalować, przyczyna niemal zawsze tkwi w jego zawartości, a nie w narzędziu, którego używasz. Ten poradnik najpierw omawia trzy metody, a następnie diagnostykę: sześć typowych przyczyn, dla których zmiana koloru nie działa, w tym jedną, z którą nie poradzi sobie żadne narzędzie do zmiany kolorów.

Gdzie SVG przechowuje kolory

Plik SVG to lista kształtów zapisana jako tekst. Każdy kształt może mieć fill określający wypełnienie wnętrza oraz stroke określający obrys, zgodnie z opisem w poradniku MDN dotyczącym wypełnień i obrysów SVG. Nie ma jednego „koloru obrazu”, który możesz zamienić w jednym miejscu. Projekt, który na ekranie wygląda na jednokolorowy, może składać się z jednej uporządkowanej ścieżki albo z czterdziestu osobnych ścieżek, które po prostu mają takie samo wypełnienie.

Na tym polega cała sprawa. Każda z poniższych metod zmiany kolorów to po prostu inny sposób znajdowania kształtów i zmieniania ich fill lub stroke. Dlatego też wyniki tak bardzo różnią się między plikami: im mniej kształtów i im lepiej są uporządkowane, tym łatwiej zmienić kolory.

Wybierz metodę

Metoda 1: internetowe narzędzie do zmiany kolorów SVG

1. Otwórz w przeglądarce bezpłatne narzędzie do zmiany kolorów SVG i prześlij plik (dobre narzędzia przyjmują też wklejony kod SVG).
2. Narzędzie wyświetli znalezione kolory. Przydatne narzędzia grupują identyczne wypełnienia, więc „niebieski” to jedna próbka koloru, nawet jeśli obejmuje dziesiątki kształtów.
3. Kliknij próbkę koloru, wybierz nowy kolor i obserwuj podgląd.
4. Pobierz wynik i otwórz go raz w karcie przeglądarki, aby sprawdzić efekt.

To właściwa metoda dla większości osób w większości sytuacji. Zanim powierzysz narzędziu właściwy projekt, sprawdź dwie rzeczy: czy pokazuje także kolory obrysów i jak radzi sobie z gradientami. Jeśli narzędzie pokazuje mniej kolorów, niż widzisz na ekranie, część pliku jest gradientem lub osadzonym obrazem i zwykła zamiana próbki koloru jej nie obejmie.

Metoda 2: aplikacja do projektowania grafiki wektorowej

Inkscape jest bezpłatny i ma wszystko, czego potrzebujesz do tego zadania; Illustrator i Figma działają podobnie.

1. Otwórz SVG i kliknij część, którą chcesz zmienić. Jeśli cały projekt zaznacza się jako jeden blok, jest zgrupowany: kliknij dwukrotnie, aby wejść do grupy, lub rozgrupuj go.
2. Zmień wypełnienie w panelu Fill & Stroke (Inkscape) lub za pomocą próbki koloru wypełnienia (Illustrator, Figma).
3. Gdy jeden widoczny kolor jest rozłożony na wiele kształtów, nie klikaj ich pojedynczo. Kliknij kształt prawym przyciskiem myszy i użyj Select Same → Fill Color w Inkscape albo opisanej w dokumentacji Illustratora funkcji Select → Same → Fill Color. Wszystkie kształty o tym samym wypełnieniu zostaną zaznaczone, a jedna zmiana nada im wszystkim nowy kolor.
4. Wyeksportuj lub zapisz plik jako zwykły SVG.

Aplikacja do projektowania przyda Ci się również wtedy, gdy chcesz zrobić coś więcej niż zmienić kolory, na przykład przesunąć kształty lub przerobić krzywe. Ten szerszy zestaw narzędzi omawiamy w poradniku edycji SVG.

Metoda 3: edytor tekstu

Ponieważ SVG to tekst, sprawdzi się dowolny edytor: Notepad, TextEdit, VS Code.

1. Otwórz plik .svg i wyszukaj fill=.
2. Zmień wartość, na przykład fill="#1e3a5f" na fill="#c2410c", i zapisz plik.
3. Odśwież plik w karcie przeglądarki, aby sprawdzić wynik.

Pamiętaj o trzech rzeczach. Kolory mogą być zapisane jako nazwy (fill="black"), a także jako wartości szesnastkowe. Obrysy znajdują się w stroke=, a nie w fill=. Wiele wyeksportowanych plików w ogóle nie przypisuje koloru bezpośrednio do kształtu: używa klas, a właściwy kod szesnastkowy znajduje się w bloku <style> blisko początku pliku (.st0{fill:#1e3a5f;}). Zmień kod szesnastkowy w bloku stylów, a wszystkie kształty z tą klasą przyjmą nowy kolor.

Ta metoda świetnie sprawdza się przy jednokolorowych ikonach, gdzie wystarczy jedno wyszukanie i zamiana, oraz przy zbiorczej edycji plików w folderze. W przypadku ilustracji z czterdziestoma kolorami jest powolna.

Jeśli Twój SVG znajduje się na stronie internetowej

Czy możesz zmienić kolor SVG za pomocą CSS? Najbardziej bezpośredni sposób to umieszczenie kodu SVG bezpośrednio w HTML. Wtedy fill działa jak właściwość CSS, a ustawienie wypełnień na currentColor pozwala ikonie dziedziczyć kolor otaczającego tekstu. SVG wczytany jako zewnętrzny <img> jest traktowany jak obraz; MDN zaznacza, że w takim układzie JavaScript nie może modyfikować struktury SVG, a style strony nie wybierają bezpośrednio jego wewnętrznych ścieżek.

Jeśli nie możesz osadzić kodu pliku bezpośrednio w HTML, wróć do opisanych wyżej metod edycji pliku: zmień kolor wewnątrz samego SVG i wczytaj go ponownie. Aby wybrać sposób osadzenia, porównaj SVG osadzony bezpośrednio w HTML z obrazem zewnętrznym, używając tej samej grafiki i testu CSS na stronie.

W przypadku jednokolorowego kształtu ikony interfejsu maski SVG w CSS i kształty ikon z przezroczystym tłem dają inną możliwość: nadaj kolor elementowi ikony za pomocą CSS, pozostawiając kolory ścieżek obrazu źródłowego bez zmian.

Jeśli zależy Ci na odwracalnym efekcie kolorystycznym, porównaj feColorMatrix z bezpośrednią edycją wypełnień. Filtr zmienia kolory podczas renderowania, zachowując źródłowe ustawienia wypełnień i obrysów, co ma znaczenie przy przekazywaniu grafiki do dalszej edycji.

Dlaczego Twój SVG nie zmienia koloru

Tę część poradniki zwykle pomijają, a właśnie tutaj większość prób zmiany kolorów kończy się niepowodzeniem. Przejdź przez tabelę od góry do dołu.

Dwa z tych przypadków warto omówić dokładniej.

Niespodziewany prostokąt tła

Niektóre pliki SVG zawierają prostokąt tła o pełnym rozmiarze, którego nie widać na białej stronie. Zmień kolor „wszystkiego”, a prostokąt pojawi się jako kolorowy blok za projektem; niektóre aplikacje zaznaczają go też po kliknięciu. To zwykły kształt, więc zaznacz go i usuń albo nadaj mu kolor, którego faktycznie chcesz użyć. Jeśli w innym programie prostokąt pojawia się jako biały, to powiązany, ale inny problem, opisany w naszym poradniku zachowania przezroczystego tła.

SVG, który nie jest grafiką wektorową

Najbardziej oporny przypadek wygląda tak: nie możesz zaznaczyć żadnego kształtu, każda zmiana wypełnienia pozostaje bez efektu, a po powiększeniu na krawędziach widać piksele. Otwórz plik w edytorze tekstu, a zamiast elementów <path> znajdziesz jeden znacznik <image> zawierający długi ciąg tekstu base64. To obraz rastrowy opakowany w plik .svg. Takie pliki tworzą konwertery, które nie wykonują rzeczywistej wektoryzacji, i żadne narzędzie do zmiany kolorów nie pomoże, bo nie ma kształtów, które można przemalować. Filtry, które go „koloryzują”, jedynie barwią piksele, zwykle z kiepskim skutkiem. Oba pliki wyglądają identycznie na ekranie, ale w kodzie różnica jest oczywista:

<!-- A real vector: a shape with a fill you can change -->
<path fill="#1e3a5f" d="M12 2 L22 20 H2 Z" />
 
<!-- A raster in an .svg shell: one sealed picture, no shapes -->
<image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." />

Rozwiązaniem jest powrót do samego obrazu, najlepiej oryginalnego PNG lub JPG, i przekształcenie go w prawdziwą grafikę wektorową z rzeczywistymi ścieżkami. Nasz poradnik o plikach SVG, w których nadal widać piksele wyjaśnia dokładniej, jak powstają takie pozorne grafiki wektorowe i jak je rozpoznać, zanim użyjesz ich w swoim projekcie. Gdy w pliku pojawią się rzeczywiste kształty, każda metoda z tego poradnika zacznie działać.

Zmiana kolorów pliku do wycinania: każdy kolor to warstwa

Cricut lub Silhouette traktuje każdy kolor w Twoim SVG jako warstwę, a każda warstwa oznacza kolejny przebieg cięcia, kolejny arkusz materiału i więcej usuwania zbędnych fragmentów. Zmiana kolorów pliku do wycinania jest więc w praktyce planowaniem warstw: nadanie dwóm elementom tego samego wypełnienia łączy je w jedną warstwę do wycięcia, a rozdzielenie koloru tworzy nową warstwę.

Dlatego jedna operacja edycyjna jest szczególnie przydatna przy rękodziele: scalanie niemal identycznych kolorów. Grafika po wektoryzacji często zawiera trzy prawie identyczne odcienie niebieskiego, które dodają warstwy, nie wnosząc żadnej widocznej różnicy. Połącz je w jeden, a wycinanie projektu będzie szybsze i znacznie łatwiej usuniesz zbędne fragmenty. Poradnik redukcji palety SVG pokazuje, jak scalać kolory według ich roli wizualnej bez zacierania kontrastu ani znaczenia poszczególnych operacji. Jeśli świadomie tworzysz projekty wielowarstwowe, nasz poradnik warstwowych plików SVG opisuje cały proces, a strona o SVG do Cricut omawia przygotowanie grafiki do ploterów tnących od początku do końca.

Jeśli po zmianie kolorów potrzebujesz osobnych plików do pobrania, zapisz każdą grupę elementów o dokładnie tym samym kolorze jako osobny plik SVG z zachowaniem wspólnego położenia elementów.

Jak to wygląda w PerfectVector

Najpierw uczciwie o jednym ograniczeniu: PerfectVector nie edytuje plików SVG, które już masz. Przekształca obrazy (PNG, JPG, WebP) w SVG. Jednak zaskakująco wiele problemów typu „jak zmienić kolor tego SVG” ma źródło właśnie na etapie konwersji: plik, który stawia opór, zwykle jest nieuporządkowanym wynikiem wektoryzacji albo w ogóle nie jest prawdziwą grafiką wektorową.

Dlatego gdy SVG powstał z obrazu lub nadal masz oryginalną grafikę, najłatwiej zmienić kolory u źródła. Przekształć obraz w SVG przygotowany do edycji: z uporządkowanymi ścieżkami, małą liczbą węzłów i każdym kolorem zachowanym jako osobny, edytowalny kształt. Następnie przed pobraniem użyj wbudowanego edytora kolorów, aby zamienić dowolny kolor lub scalić podobne — wybierając kolory, zamiast wyszukiwać ścieżki. Za jednym razem otrzymujesz wybraną paletę i prostszy plik, a Twoje pierwsze konwersje są bezpłatne i nie wymagają karty kredytowej.

Czego nie zrobi zmiana kolorów

• Gradient to nie jedna próbka koloru. Gradient to płynne przejście między punktami kontrolnymi, w których zdefiniowano kolory. Możesz edytować kolory w tych punktach, ale zwykła operacja „zamień ten kolor” może zmienić tylko część przejścia, dlatego grafika z gradientami wygląda dziwnie po zbyt uproszczonej zamianie.
• Kolory ekranowe to nie kolory druku. SVG przechowuje instrukcje koloru przeznaczone do wyświetlania na ekranie, a projekt do druku może wymagać dokładnego koloru marki, koloru dodatkowego lub określonej mieszanki składowych czerni. Jeśli eksport zmienia to, co widzisz, zdiagnozuj zmianę kolorów SVG, zanim wymienisz paletę; ostateczne wymagania dotyczące kolorów określa format produkcyjny wskazany przez drukarnię.
• Zmiana kolorów nie porządkuje geometrii. Nowe wypełnienia nie scalą drobnych skrawków, nie zamkną szczelin ani nie zmniejszą liczby węzłów. Nieuporządkowany wynik wektoryzacji z nowymi kolorami nadal pozostaje nieuporządkowany.

Zanim zapiszesz

• Otwórz plik po zmianie kolorów w nowej karcie przeglądarki i porównaj go z oryginałem.
• Sprawdź obrysy: czy zmieniły się wraz z wypełnieniami tam, gdzie powinny?
• Poszukaj przypadkowego prostokąta tła, którego kolor mógł zostać zmieniony przez pomyłkę.
• W plikach do wycinania policz warstwy po scaleniu kolorów; mniej niemal zawsze znaczy lepiej.
• Zachowaj nietkniętą kopię oryginalnego pliku.

Najczęściej zadawane pytania

Jak zmienić kolor pliku SVG bez Illustratora lub Photoshopa? Użyj bezpłatnego internetowego narzędzia do zmiany kolorów SVG (prześlij plik, kliknij próbkę koloru, pobierz) albo programu Inkscape, bezpłatnego edytora grafiki wektorowej na komputer. W przypadku jednokolorowej ikony możesz też otworzyć plik w dowolnym edytorze tekstu i zmienić wartość szesnastkową po fill=. Żadna z tych metod nic nie kosztuje.

Dlaczego mój SVG pozostaje czarny niezależnie od tego, co robię? Jeśli znajduje się na stronie internetowej, CSS nie może zmienić stylu SVG wczytanego przez znacznik img; osadź jego kod bezpośrednio w HTML lub edytuj plik. Jeśli pracujesz w edytorze, sprawdź, czy nie przeszkadza Ci grupa, czy widocznego koloru nie nadaje obrys albo czy kolory nie są zdefiniowane w bloku stylów. Jeśli niczego nie możesz zaznaczyć, a po powiększeniu widać piksele, plik jest obrazem rastrowym opakowanym w .svg i nie zawiera kształtów, którym można zmienić kolor.

Czy można zmienić kolory SVG w programie Canva? Według informacji o dedykowanym edytorze SVG Canva możesz bezpłatnie przesłać SVG, zmienić jego kolory i pobrać go bez znaku wodnego. Złożone funkcje SVG mogą jednak renderować się inaczej w różnych edytorach, więc sprawdź pobrany plik, zanim zastąpisz nim oryginał.

Czy jeden plik SVG może używać więcej niż jednego koloru? Tak. Każdy kształt w pliku ma własne wypełnienie i obrys, więc SVG może zawierać tyle kolorów, ile ma kształtów, a do tego gradienty. Dlatego zmiana kolorów wielokolorowej grafiki wymaga też zmiany kilku wypełnień, a nie jednego globalnego ustawienia.

Jak zmienić kolory SVG w projekcie do Cricut? Możesz zmieniać kolory warstw w Cricut Design Space, ale zmiana dotyczy całej warstwy, a nie pojedynczego kształtu. Aby zmienić, które części mają wspólny kolor, a więc które będą wycinane razem, edytuj SVG przed przesłaniem: scal kolory, które mają znaleźć się na jednej warstwie, i nadaj osobne wypełnienie wszystkiemu, co ma być wycinane oddzielnie.

Czy zmiana koloru SVG obniża jakość? Nie. Kolor grafiki wektorowej to instrukcja zapisana w tekście, więc jego zmiana modyfikuje instrukcję bez ingerencji w geometrię. W przeciwieństwie do edycji PNG możesz zmieniać kolory SVG dowolną liczbę razy bez żadnej utraty jakości.

Źródła

1. MDN: SVG fills and strokes — Wyjaśnia fill, stroke, krycie oraz powiązane właściwości SVG określające sposób nadawania koloru.
2. MDN: Adding vector graphics to the web — Porównuje SVG osadzony bezpośrednio w HTML z SVG wczytywanym przez <img>.
3. Adobe Illustrator: Select objects with the same fill and stroke — Opisuje zaznaczanie elementów grafiki według wspólnych atrybutów wypełnienia i obrysu.
4. W3C: SVG 2 embedded content — Definiuje rastrową zawartość <image> w dokumentach SVG.
5. Canva: SVG editor — Aktualne źródło informacji Canva o przesyłaniu SVG, zmianie kolorów i pobieraniu.

Zmiana kolorów SVG jest szybka, gdy plik współpracuje: wybierz metodę pasującą do tego, co masz, i zdiagnozuj problem, zanim zaczniesz walczyć z narzędziami. A jeśli problemem jest sam plik, oszczędź sobie tej walki. Przekształć oryginalny obraz w uporządkowany, edytowalny SVG i wybierz kolory, gdy nadal jest to proste.