Jak rozdzielić kolory SVG na osobne pliki

Aby rozdzielić kolory SVG na osobne pliki, pogrupuj kształty według dokładnej wartości koloru wypełnienia i wyeksportuj każdą grupę na tym samym obszarze roboczym o pełnym rozmiarze co oryginał. Nie przycinaj każdego koloru do granic jego kształtów. Pusta przestrzeń pozwala zachować wyrównanie elementów podczas importowania, cięcia, sitodruku lub ponownego składania.

W przypadku obsługiwanego pliku SVG z jednolitymi wypełnieniami bezpłatne narzędzie PerfectVector SVG Color Separator robi to lokalnie w Twojej przeglądarce. Przy bardziej złożonej grafice możesz zaznaczyć obiekty według wypełnienia w edytorze grafiki wektorowej i ręcznie wyeksportować każdy kolor.

Zasada bezpiecznego rozdzielania

• Zachowaj niezmienioną kopię źródłowego pliku SVG.
• Zdecyduj, czy scalić niemal identyczne kolory, zanim je rozdzielisz.
• Grupuj według dokładnej wartości koloru wypełnienia; nie traktuj gradientów, wzorów ani obrazów jako prostych kolorów.
• Zachowaj oryginalną szerokość, wysokość i viewBox w każdym pliku wynikowym.
• Zachowaj oryginalne położenie każdego kształtu i kolejność rysowania kształtów tego samego koloru.
• Zaimportuj wszystkie pliki razem i sprawdź ich rozmiar oraz wyrównanie przed cięciem materiału.

Dlaczego każdy plik koloru powinien zachować pełny obszar roboczy

Wyobraź sobie kwiat z niebieskim płatkiem w pobliżu lewego górnego rogu i czerwonym płatkiem w pobliżu prawego dolnego rogu. Jeśli oba pliki zostaną ciasno przycięte, każdy płatek znajdzie się w lewym górnym rogu swojego nowego dokumentu. Te dwa pliki SVG nie będą już miały wspólnego układu współrzędnych, więc ponowne złożenie grafiki będzie wymagało zgadywania.

Gdy każdy plik zachowuje oryginalny obszar roboczy, każdy kolor pozostaje na swoich pierwotnych współrzędnych. Plik zawierający tylko niebieski kolor może mieć dużo pustej przestrzeni. To celowo zachowana informacja o wyrównaniu, a nie marnowanie miejsca.

Koncepcja wspólnego obszaru roboczego

Atrybut SVG viewBox definiuje wewnętrzny układ współrzędnych. Zachowaj go wraz z wiarygodną fizyczną szerokością i wysokością, jeśli Twój ploter tnący, drukarka lub partner produkcyjny wymaga rzeczywistych wymiarów.

Dokładne wartości kolorów to nie to samo co kolory postrzegane wzrokowo

Plik SVG może zawierać #ff0000 i #fe0000. Wyglądają niemal identycznie, ale są to dwie różne dokładne wartości i przy rozdzielaniu według dokładnych wartości kolorów powstaną z nich dwa pliki. To bezpieczniejsze niż domyślne zgadywanie, że projektant chciał użyć jednego koloru produkcyjnego.

Przed rozdzieleniem sprawdź paletę:

Instrukcja redukcji palety wyjaśnia, jak scalać zbliżone kolory według ich roli wizualnej i produkcyjnej. Najpierw podejmij tę decyzję. Narzędzie do rozdzielania kolorów nie powinno robić tego za Ciebie.

Metoda 1: użyj bezpłatnego narzędzia w przeglądarce

SVG Color Separator przyjmuje celowo ograniczony zakres elementów SVG, aby zachować zgodność z plikiem zamiast zwracać warstwy, które wyglądają wiarygodnie, ale są błędne.

1. Wybierz SVG

Wybierz plik SVG o rozmiarze do 5 MiB. Dokument jest sprawdzany w tymczasowym wątku roboczym przeglądarki, zanim powstanie bezpieczny podgląd lub plik do pobrania. Zawartość SVG, nazwa pliku, ścieżki, kolory, podglądy i wygenerowane pliki nie są wysyłane do PerfectVector.

Obecna wersja jest przeznaczona do grafiki wektorowej z nieprzezroczystymi, jednolitymi wypełnieniami: ścieżek, prostokątów, okręgów, elips, wielokątów i obsługiwanych polilinii z typowymi transformacjami. Obsługuje jednolite wypełnienia zapisane bezpośrednio w elementach oraz dziedziczone.

2. Sprawdź zgodność i rozmiar

Sprawdź zaakceptowany podgląd całej grafiki, wymiary fizyczne, viewBox, liczbę ścieżek, paletę dokładnych wartości kolorów i ostrzeżenia. Jeśli plik ma viewBox, ale nie ma wiarygodnej fizycznej szerokości i wysokości, potwierdź jeden wymiar; drugi pozostanie proporcjonalny.

Przetwarzanie zatrzymuje się zamiast usuwać nieobsługiwaną zawartość. Obecnie zatrzymują je między innymi widoczne obrysy, gradienty, wzory, filtry, ścieżki przycinające, maski, edytowalny tekst, osadzone obrazy, odwołania do elementów wielokrotnego użytku, zagnieżdżone SVG, zasoby zewnętrzne, arkusze stylów lub klasy, skrypty, procedury obsługi zdarzeń i przezroczyste kolory przeznaczone do cięcia.

To ograniczenie wynika z samego modelu SVG. Specyfikacja malowania SVG 2 rozróżnia jednolite kolory, gradienty, wzory, krycie wypełnienia i sposób działania obrysu. Widoczny „kolor” nie zawsze jest jedną jednolitą wartością, którą można bezpiecznie przenieść do osobnego pliku.

3. Sprawdź podgląd każdej dokładnej wartości koloru

Narzędzie tworzy osobny podgląd dla każdej dokładnej wartości nieprzezroczystego koloru. Sprawdź, czy:

• oczekiwane kształty znajdują się w odpowiednim pliku koloru;
• nie brakuje żadnego zamierzonego obrysu, tekstu ani obrazu;
• wymiary całej grafiki odpowiadają źródłu;
• każda warstwa pozostaje w swoim pierwotnym położeniu;
• paleta zawiera zamierzoną liczbę kolorów produkcyjnych.

Jednokolorowy SVG również jest prawidłowy — jest już rozdzielony. Pliki zawierające od dwóch do 24 dokładnych wartości kolorów otrzymują standardowy widok warstw. Większa liczba obsługiwanych kolorów nadal jest dopuszczalna w granicach limitu bezpieczeństwa, ale dziesiątki kolorów zwykle wskazują, że najpierw warto uporządkować paletę. Pliki z więcej niż 256 dokładnymi wartościami kolorów są odrzucane.

4. Pobierz pliki

Pobierz potrzebne pliki kolorów pojedynczo lub skorzystaj z archiwum utworzonego lokalnie. Każdy plik wynikowy zachowuje tę samą szerokość, wysokość, viewBox i układ współrzędnych. Nazwy plików i kolejność warstw są deterministyczne, dzięki czemu przekazywanie plików do dalszej pracy jest powtarzalne.

Korzystanie z narzędzia i pobieranie jego warstw nie wymaga rejestracji ani kredytów. Jest to niezależne od płatnego procesu pobierania wyników konwersji obrazów rastrowych na grafikę wektorową w PerfectVector.

Metoda 2: rozdziel kolory w edytorze grafiki wektorowej

Użyj programu Illustrator, Inkscape, Affinity lub innego edytora grafiki wektorowej, gdy SVG wymaga poprawek przed rozdzieleniem.

1. Otwórz kopię i zanotuj szerokość, wysokość oraz viewBox dokumentu lub wymiary obszaru roboczego.
2. Zamień edytowalny tekst na kontury, jeśli docelowe narzędzie wymaga kształtów.
3. Zamień nieobsługiwane obrysy, gradienty, wzory, maski i struktury przycinające na zwykłe kształty lub świadomie je zastąp.
4. Zaznacz jeden reprezentatywny kształt, a następnie użyj polecenia Select Same Fill Color, aby zaznaczyć obiekty o tym samym kolorze wypełnienia.
5. Skopiuj zaznaczone kształty na zduplikowany obszar roboczy o tych samych wymiarach i tym samym początku układu współrzędnych.
6. Usuń lub ukryj pozostałe kolory bez przesuwania zaznaczonych kształtów.
7. Wyeksportuj plik koloru jako SVG i powtórz te czynności.
8. Zaimportuj ponownie wszystkie pliki razem, aby sprawdzić, czy dokładnie się nakładają.

Nie twórz dla każdego zaznaczenia nowego dokumentu ciasno dopasowanego do jego zawartości. Zduplikuj oryginalny obszar roboczy lub użyj ustawienia eksportu, które zachowuje jego granice.

Ręczna edycja pozwala też łączyć kształty tego samego koloru, jeśli ułatwia to produkcję. Nie scalaj ich automatycznie, jeśli otwory, nakładanie się kształtów, kolejność rysowania w źródle lub późniejsza edycja wymagają osobnych obiektów.

Przygotuj pliki do Cricut

Aktualny poradnik przesyłania obrazów Cricut podaje, że warstwowe pliki SVG są przesyłane zgodnie z projektem i pojawiają się jako zgrupowany obraz, którego warstwy można osobno przesuwać i skalować po rozgrupowaniu. Dokumentuje też limit 5000 ścieżek w pliku SVG.

Przed cięciem:

1. Prześlij wszystkie rozdzielone pliki.
2. Dodaj je do tego samego obszaru Canvas bez zmiany wymiarów.
3. Potwierdź, że każdy ma tę samą szerokość i wysokość.
4. Użyj ustawień położenia lub wspólnej metody pasowania, jeśli Twój proces wymaga dokładnego nakładania warstw.
5. Przypisz każdej warstwie właściwą operację i kolor materiału.
6. Wykonaj mały test na niedrogim materiale.

Poradnik Cricut dotyczący nieobsługiwanych elementów wyraźnie wskazuje wypełnienia wzorem, gradienty, ścieżki przycinające, edytowalny tekst, obrazy połączone i osadzone obrazy w nieobsługiwanych formatach jako źródła problemów przy przesyłaniu warstwowej grafiki wektorowej. Przed eksportem zamień tekst na kształty i świadomie uprość te elementy.

Aby przeprowadzić szerszą kontrolę, skorzystaj z poradnika jak sprawdzić SVG przed cięciem. Jeśli rozdzielone pliki importują się w nieoczekiwanym rozmiarze, skorzystaj z diagnostyki nieprawidłowego rozmiaru SVG, zanim zmienisz rozmiar poszczególnych warstw.

Typowe błędy przy rozdzielaniu kolorów

Warstwy przestały się wyrównywać

Każdy kolor prawdopodobnie został przycięty do granic swoich kształtów lub wklejony do dokumentu z innym początkiem układu współrzędnych. Wyeksportuj pliki ponownie, zachowując oryginalny obszar roboczy, szerokość, wysokość i viewBox.

Z jednego „koloru” powstało kilka plików

SVG zawiera niemal identyczne wartości kolorów. Zdecyduj, które wartości pełnią tę samą rolę, świadomie je scal i ponownie rozdziel kolory.

Gradient zniknął lub został odrzucony

Gradient jest zasobem definiującym sposób malowania, a nie pojedynczym jednolitym wypełnieniem o dokładnej wartości koloru. Zastąp go świadomie dobranymi obszarami o jednolitych kolorach, zachowaj dotychczasowy sposób pracy z gradientem lub użyj rastrowej metody produkcji, gdy liczy się wierność tonalna.

Brakuje tekstu lub obrysów

Edytowalny tekst i widoczne obrysy mają inną strukturę niż wypełnione ścieżki opisujące kontury. Zamień je na kształty w edytorze grafiki wektorowej tylko wtedy, gdy odpowiada to wymaganiom docelowego narzędzia.

Cricut odrzuca plik

Najpierw sprawdź nieobsługiwane elementy i liczbę ścieżek. Plik może być prawidłowym SVG, a mimo to wykraczać poza zakres obsługiwany przez Design Space.

Najczęściej zadawane pytania

Czy SVG może zawierać wiele kolorów? Tak. Kształty SVG mogą mieć różne wypełnienia i obrysy, a SVG obsługuje również gradienty, wzory, krycie i zasoby malowania wskazywane przez odwołania. Rozdzielanie według dokładnych wartości kolorów jest najprostsze w przypadku nieprzezroczystych, jednolitych wypełnień.

Dlaczego rozdzielone pliki mają tyle pustej przestrzeni? Pusta przestrzeń zachowuje oryginalny obszar roboczy i współrzędne. Dzięki niej każdy kolor pozostaje wyrównany podczas importowania plików lub ponownego składania grafiki.

Czy podobne kolory SVG zostaną automatycznie scalone? Nie. Narzędzie PerfectVector grupuje wyłącznie dokładne wartości kolorów. Przed rozdzieleniem świadomie scal niemal identyczne wartości, jeśli mają tworzyć jeden kolor produkcyjny.

Czy mogę rozdzielić gradienty na pliki kolorów? Nie da się tego zrobić jako warstw o dokładnych, jednolitych kolorach bez zmiany grafiki. Zastąp gradient wybranymi obszarami o jednolitych kolorach, zachowaj dotychczasowy sposób pracy z gradientem lub użyj pliku rastrowego, gdy liczą się płynne przejścia tonalne.

Czy SVG Color Separator jest bezpłatny? Tak. Obsługiwane pliki SVG są sprawdzane, wyświetlane w podglądzie, rozdzielane i pobierane lokalnie bez konta ani kredytów. Statyczne zasoby strony ładują się normalnie, ale dane dokumentu pozostają w przeglądarce.

Źródła

1. PerfectVector — SVG Color Separator — Aktualne zasady przetwarzania lokalnego, rozdzielania według dokładnych wartości kolorów, wyrównania, zgodności i pobierania.
2. W3C — SVG 2 painting — Definiuje wypełnienia, obrysy, malowanie jednolitym kolorem, gradienty, wzory, krycie i zasoby malowania wskazywane przez odwołania.
3. Cricut — How to upload images into Design Space — Aktualny sposób importowania warstwowych plików SVG i limit ścieżek.
4. Cricut — Image uploads: unsupported items — Aktualne ograniczenia dotyczące gradientów, wzorów, przycinania, tekstu i obrazów przy przesyłaniu warstwowej grafiki wektorowej.

---

Chcesz zachować wyrównanie wszystkich kolorów? Otwórz bezpłatne narzędzie SVG Color Separator, sprawdź podglądy dokładnych wartości kolorów i wymiary, a następnie pobierz pliki dopiero po upewnieniu się, że wspólny obszar roboczy jest prawidłowy.