Jak zmniejszyć liczbę kolorów w SVG bez psucia grafiki

Aby bezpiecznie zmniejszyć liczbę kolorów w SVG, pogrupuj je według funkcji, jaką pełnią w grafice, a następnie połącz niemal identyczne kolory w każdej grupie. Zachowaj osobno kolory, które mają różne znaczenie, na przykład światła i cienie, pierwszy plan i tło albo operacje cięcia i bigowania.

Częstym błędem jest wybranie celu w rodzaju „czterech kolorów” i pozostawienie wszystkich decyzji narzędziu do grupowania kolorów. To może być przydatny pierwszy krok, ale ostateczną paletę trzeba sprawdzić pod kątem wyglądu i produkcji. Dwa niemal identyczne odcienie niebieskiego można czasem bezpiecznie połączyć. Dwa równie podobne odcienie szarości mogą jednak zapewniać jedyny kontrast, który oddziela oko od twarzy.

Bezpieczne ograniczanie palety

• Zapisz kopię bez żadnych zmian.
• Zrób przegląd wypełnień, obrysów, gradientów i krycia.
• Nazwij kolory według ich funkcji, zanim zmienisz wartości szesnastkowe.
• Łącz zbliżone kolory osobno dla każdej funkcji.
• Sprawdź kontrast, otwory i drobne detale w docelowym rozmiarze.
• W plikach do Cricut lub produkcji upewnij się, że kolory przypisane do operacji i warstwy nadal mają to samo znaczenie.

Zmiana kolorów i zmniejszanie ich liczby to różne zadania

Zmiana koloru zastępuje jedną wartość inną. Jeśli niebieskie logo staje się zielone, ale nadal używa tej samej liczby wypełnień, rozmiar palety się nie zmienia.

Ograniczanie liczby kolorów sprowadza kilka wartości do mniejszej ich liczby. Wynik wektoryzacji może zawierać #173f75, #184076 i #194177, ponieważ piksele wygładzające krawędzie stały się osobnymi obszarami. Zastąpienie wszystkich trzech jednym odcieniem niebieskiego zmniejsza zarówno paletę, jak i — po uporządkowaniu geometrii — liczbę fragmentów, którymi musisz zarządzać.

Te zmiany mogą zachodzić jednocześnie, ale nie są zamienne. Poradnik o zmianie kolorów SVG opisuje bezpośrednie zastępowanie kolorów. Ten artykuł skupia się na tym, jak zdecydować, które kolory można połączyć w jeden.

Gdy docelowa paleta jest już ustalona, procedura rozdzielania kolorów z zachowaniem wspólnego obszaru roboczego pozwala wyeksportować osobny, wyrównany plik dla każdej konkretnej wartości koloru bez cofania tych decyzji dotyczących palety.

Najpierw znajdź kolory, których plik rzeczywiście używa

Otwórz SVG w edytorze grafiki wektorowej, który potrafi wyświetlić kolory dokumentu lub zaznaczać obiekty według wypełnienia. Illustrator opisuje na przykład zaznaczanie obiektów o tym samym wypełnieniu i obrysie. W prostym pliku edytor tekstu również pozwoli znaleźć jawnie zapisane wartości fill i stroke.

Uwzględnij więcej niż same kody szesnastkowe:

• Jednolite wypełnienia kształtów
• Kolory obrysów
• Punkty koloru w gradientach
• Krycie, które sprawia, że kolor wygląda jaśniej na tle
• Style zapisane w klasach zamiast bezpośrednio w kształtach
• Osadzone obrazy rastrowe, których kolory pikseli nie należą do palety SVG

Dziesięć wymienionych wartości szesnastkowych nie zawsze oznacza dziesięć widocznych kolorów. Ten sam kolor przy różnym kryciu może wyglądać inaczej. Gradient może mieć tylko dwa punkty koloru, a wyświetlać wiele tonów pośrednich. Rastrowy element <image> może pokazywać tysiące kolorów, podczas gdy otaczające go SVG ma jedno wypełnienie. Specyfikacja malowania SVG rozróżnia jednolite kolory, gradienty, desenie, krycie wypełnienia i obrysu oraz inne właściwości malowania.

Jeśli plik zawiera obraz rastrowy opakowany w SVG zamiast edytowalnych kształtów, liczbę kolorów trzeba ograniczyć przed ponowną wektoryzacją lub w jej trakcie. Sprawdzenie pikselizacji SVG pozwoli Ci ustalić, czy plik zawiera rzeczywiste ścieżki, które można edytować.

Nazwij kolory według ich funkcji

Zanim zmienisz wartości, przygotuj prostą mapę palety:

Dzięki temu automatyczna ocena podobieństwa nie doprowadzi do błędnej decyzji. Odległość między kolorami jest przydatna, ale kontekst ma pierwszeństwo. Niewielkie rozświetlenie obok ciemnego kształtu może wymagać mniejszej różnicy liczbowej niż dwa duże obszary tła, a mimo to bardziej wpływać na czytelność.

Przypisz zbliżonym kolorom ich funkcje, zanim wybierzesz te, które pozostaną. Odcień tła, główne wypełnienie, obrys i akcent przyciągający wzrok mogą mieć wartości zbliżone do innych próbek, ale każdy z nich powinien pozostać odrębny z innego powodu.

W plikach do cięcia funkcja może mieć dosłowne znaczenie. W Cricut Design Space importowane pliki SVG zachowują osobne warstwy, a ustawienie Operation przypisuje wybranym warstwom działania takie jak Basic Cut (podstawowe cięcie), Draw (rysowanie), Score (bigowanie) i Engrave (grawerowanie). W innych procesach pracy z laserem lub CNC kolory również mogą służyć do organizowania operacji. Nie łącz warstw przypisanych do operacji tylko dlatego, że ich kolory wyglądają podobnie na ekranie.

Łącz zbliżone kolory w edytorze grafiki wektorowej

Zacznij od pary, której połączenie niesie najmniejsze ryzyko, i przechodź do tych najbardziej widocznych.

1. Utwórz kopię pliku lub obszaru roboczego.
2. Zaznacz jeden z kolorów przeznaczonych do połączenia za pomocą Select Same Fill (zaznaczania obiektów o tym samym wypełnieniu) lub odpowiednika w swoim edytorze.
3. Tymczasowo zastąp go zbliżonym kolorem z palety.
4. Sprawdź drobne elementy, przecięcia i przestrzeń negatywową w rozmiarze, w jakim grafika będzie zwykle oglądana.
5. Przełączaj się między oryginałem a kopią z ograniczoną paletą.
6. Zachowaj połączenie tylko wtedy, gdy hierarchia kształtów i znaczenie produkcyjne zostają zachowane.
7. Powtórz te kroki dla kolejnej pary.

Po ujednoliceniu kolorów sąsiadujące kształty nie stają się automatycznie jedną ścieżką. Scalaj je tylko wtedy, gdy powinny tworzyć jeden kształt do edycji lub cięcia. Dwa obiekty mogą mieć wspólne wypełnienie, a jednocześnie pozostawać osobne na potrzeby animacji, układu lub edycji.

Na tym etapie znaczenie ma też jakość węzłów i fragmentów. Jeśli jeden widoczny odcień niebieskiego jest podzielony na setki wąskich skrawków, zaznaczanie według wypełnienia pomaga, ale plik nadal może być trudny w edycji. Czystsza wektoryzacja może zająć mniej czasu niż naprawianie każdego fragmentu.

Co potrafi automatyczne grupowanie kolorów, a czego nie

Narzędzia do pracy z paletą często grupują kolory według odległości liczbowej. K-means i podobne metody potrafią przekształcić długą listę zbliżonych wartości w wybraną liczbę reprezentatywnych kolorów. To przydatne w ilustracjach utworzonych z zaszumionych obrazów rastrowych.

Automatyczne grupowanie nie wie:

• który element jest twarzą, literą, otworem lub obrysem;
• które kolory oznaczają operacje maszyny;
• czy drobny akcent ma znaczenie dla marki;
• czy widoczny kolor jest wynikiem częściowej przezroczystości obiektu na tle;
• czy dwa kształty muszą pozostać niezależnie edytowalne.

Traktuj wynik jako wersję roboczą. Porównaj go w docelowym rozmiarze, a nie tylko w powiększeniu. Połączenie, które przy 800% wydaje się nieszkodliwe, może usunąć małe oko lub światło wewnętrzne litery w rozmiarze naklejki.

Kiedy rasteryzacja i ponowna wektoryzacja mają sens

Wyeksportowanie SVG do PNG, ograniczenie palety obrazu rastrowego i ponowna wektoryzacja to destrukcyjny reset. Przed odtworzeniem grafiki sprowadza grupy, nazwy, symbole wielokrotnego użytku, strukturę tekstu i starannie rozmieszczone ścieżki do pikseli.

Wybierz tę drogę tylko wtedy, gdy obecna struktura SVG jest już bezużyteczna i nie masz czystszego źródła. Może pomóc przy mocno rozdrobnionym wyniku automatycznej wektoryzacji, którego jedyną użyteczną cechą jest wygląd. Zachowaj istniejące SVG jako odniesienie, wyeksportuj duży obraz rastrowy z przezroczystością, świadomie ogranicz kolory, a następnie wykonaj ponowną wektoryzację i sprawdź nowe ścieżki.

Nie rasteryzuj czystego, uporządkowanego SVG tylko po to, by zmienić cztery wypełnienia. Bezpośrednia edycja grafiki wektorowej zachowuje znacznie więcej informacji.

Sprawdź plik z ograniczoną paletą

Zanim nadpiszesz jakikolwiek plik, wykonaj te kontrole:

• Obejrzyj grafikę na jasnym i ciemnym tle.
• Sprawdź sylwetki i przestrzenie negatywowe.
• Upewnij się, że obrysy nie zlały się z wypełnieniami.
• Sprawdź gradienty i krycie osobno od jednolitych kolorów.
• Policz końcowe warstwy Cricut lub operacje produkcyjne.
• Obejrzyj mały tekst i ikony w ich rzeczywistym rozmiarze docelowym.
• Otwórz wyeksportowane SVG ponownie w innym programie do przeglądania.

Jeśli plik jest przeznaczony do Cricut, procedura pracy z warstwowym SVG wyjaśnia, jak kolory odpowiadają materiałom i montażowi. Poradnik dotyczący trudnego usuwania zbędnego materiału opisuje problemy z geometrią, których samo zmniejszenie liczby kolorów nie rozwiąże.

Gdzie przydaje się PerfectVector

PerfectVector nie edytuje istniejących plików SVG. Pomaga wtedy, gdy nadmiar kolorów powstał na etapie obrazu rastrowego. Procedura przygotowania SVG do Cricut przekształca źródło w edytowalne ścieżki i pozwala sprawdzić oraz dostosować obszary kolorów utworzone podczas wektoryzacji przed pobraniem pliku.

Wybierz tę drogę, gdy inny konwerter utworzył z PNG lub JPG dziesiątki zbliżonych kolorów i rozdrobnione warstwy. Zacznij od najczystszego obrazu rastrowego, jaki masz, usuń niechciane cienie lub różnice w tle, a następnie porównaj podgląd grafiki wektorowej. Łącz kolory zgodnie z warstwami materiału, które rzeczywiście planujesz wyciąć.

Celem nie zawsze jest najmniejsza możliwa liczba kolorów. Chodzi o najmniejszą paletę, która nadal czytelnie oddaje projekt i plan produkcji.

Najczęściej zadawane pytania

Jak zmniejszyć liczbę kolorów w SVG? Wypisz wypełnienia, obrysy, gradienty i wartości krycia w pliku, pogrupuj je według funkcji wizualnej lub produkcyjnej, a następnie łącz niemal identyczne kolory, po jednej parze naraz. Korzystaj z zaznaczania według wypełnienia w edytorze grafiki wektorowej i po każdym połączeniu porównuj wynik z kopią bez zmian.

Czy ustawienie tej samej wartości szesnastkowej dla dwóch wypełnień scala warstwy SVG? Niekoniecznie. Kształty mają teraz wspólny kolor, ale pozostają osobnymi obiektami, dopóki nie scalisz lub nie połączysz ich geometrii. Zachowanie ich osobno może być przydatne podczas edycji, animacji lub układania kompozycji, nawet jeśli będą wycinane z tego samego materiału.

Czy mogę automatycznie ograniczyć SVG do czterech kolorów? Narzędzia do grupowania kolorów w palecie mogą przygotować wersję roboczą z czterema kolorami, ale nie rozumieją znaczenia detali ani operacji produkcyjnych. Zanim użyjesz wyniku, sprawdź drobne elementy, kontrast, otwory, gradienty i znaczenie warstw.

Dlaczego wektoryzacja obrazu z czterema kolorami utworzyła dziesiątki kolorów? Obraz rastrowy prawdopodobnie zawierał wygładzanie krawędzi, cienie, różnice wynikające z kompresji lub zmiękczone krawędzie. Narzędzie do wektoryzacji potraktowało te różnice między pikselami jako osobne obszary. Popraw wybrane fragmenty obrazu rastrowego lub połącz zbliżone kolory w wynikowej grafice wektorowej.

Czy warto zmniejszyć liczbę kolorów SVG przed przesłaniem do Cricut? Zwykle tak, jeśli kilka kolorów to niezamierzone, niemal identyczne odcienie. Zaplanuj jeden celowo dobrany kolor na materiał lub warstwę, zachowaj osobno wszystko, co wymaga oddzielnego cięcia, i sprawdź liczbę warstw po imporcie. Mniejszą liczbę świadomie zaplanowanych warstw łatwiej wyciąć i złożyć niż wynik wektoryzacji pełen drobnych różnic kolorystycznych.

Źródła

1. W3C — SVG 2 Painting — Definiuje wypełnienia, obrysy, gradienty, desenie i krycie wypełnień oraz obrysów.
2. Adobe Illustrator — Select objects with the same fill and stroke — Opisuje praktyczną procedurę zaznaczania według wyglądu.
3. Cricut — Upload images into Design Space — Wyjaśnia, jak warstwy SVG są zachowywane podczas przesyłania.
4. Cricut — Selecting Operation — Definiuje operacje maszyny przypisywane warstwom w Design Space.

---

Jeśli problem z paletą zaczął się od obrazu rastrowego, przygotuj go do Cricut i sprawdź kolory uzyskane podczas wektoryzacji. Trzymaj oryginał obok podglądu i zatwierdzaj każde połączenie na podstawie efektu w gotowym materiale, a nie tylko na ekranie.