Nie da się rozgrupować SVG: rozpoznaj obiekt i rozwiąż problem

Rozgrupowanie działa tylko wtedy, gdy zaznaczony obiekt rzeczywiście jest grupą. SVG, który wygląda jak kilka osobnych elementów, może być jedną ścieżką złożoną, jedną zwykłą ścieżką, obiektem z przycięciem albo obrazem rastrowym umieszczonym w kontenerze SVG. Ponowne kliknięcie Ungroup nie zmieni żadnej z tych struktur.

Przydatne pytanie nie brzmi „Gdzie jest właściwe polecenie rozgrupowania?”, lecz „Co zostało zaznaczone?”. Gdy to ustalisz, rozwiązanie zwykle jest proste: rozgrupuj rzeczywistą grupę, rozdziel ścieżkę złożoną, edytuj węzły pojedynczej ścieżki albo przeprowadź wektoryzację osadzonego obrazu rastrowego, aby uzyskać rzeczywiste kształty wektorowe.

Szybka diagnoza

• Jeśli panel obiektów pokazuje grupę lub kod źródłowy SVG zawiera <g>, użyj Ungroup.
• Jeśli jedno zaznaczenie obejmuje osobne otwory lub odizolowane fragmenty, wypróbuj Break Apart lub Release Compound Path na kopii.
• Jeśli edycja węzłów ujawnia jeden kontur, nie ma czego rozgrupować. Edytuj lub podziel tę ścieżkę.
• Jeśli obiekt jest jednym prostokątem, a po powiększeniu widać piksele, prawdopodobnie jest osadzonym obrazem. Odzyskaj oryginalny obraz rastrowy i przeprowadź jego prawidłową wektoryzację.

Najpierw sprawdź, jaki rodzaj obiektu zaznaczasz

SVG to format kontenerowy, a nie gwarancja, że każdy widoczny element jest osobną warstwą. Może zawierać zgrupowane elementy wektorowe, pojedyncze ścieżki, ścieżki złożone, tekst, struktury przycinania i obrazy rastrowe. Jeśli tworzysz edytor oparty na elemencie canvas, poradnik importowania SVG w Fabric.js pokazuje, jak odczytywać osobne obiekty, zmieniać kolor jednego nazwanego elementu i sprawdzać wyeksportowany SVG.

W diagrams.net porównaj obrazy SVG i natywne kształty draw.io, zanim spróbujesz rozgrupować zaimportowaną grafikę. Skalowalny obraz i kształt diagramu ze zdefiniowanymi punktami połączeń wymagają różnych sposobów edycji.

Jeśli chcesz sprawdzić tę samą różnicę między obrazem a natywnym kształtem w innym edytorze diagramów, zobacz, co można edytować po imporcie SVG do Excalidraw.

To wyjaśnia, dlaczego ten sam objaw występuje w programach Cricut Design Space, Silhouette Studio, LightBurn, Inkscape, Illustrator oraz w aplikacjach biurowych. W programie PowerPoint najpierw odróżnij grafikę SVG od kształtów pakietu Office, korzystając z poradnika konwersji SVG na kształty i edycji poszczególnych elementów w programie PowerPoint. Każdy program inaczej nazywa swoje polecenia, ale sam plik nadal ma jedną z kilku typowych struktur.

Cztery struktury, cztery rozwiązania

Grupa to jedyny przypadek, w którym pomaga rozgrupowanie

W kodzie SVG element <g> jest kontenerem na inne elementy SVG, a standard pozwala zagnieżdżać grupy na dowolną głębokość. Projektant może zgrupować koło, logotyp i tło, aby przesuwały się razem. Rozgrupowanie usuwa kontener grupy w edytorze i udostępnia jego elementy podrzędne.

Spróbuj tak:

1. Zduplikuj plik lub zapisz kopię roboczą.
2. Zaznacz obiekt jednym kliknięciem.
3. Sprawdź panel Layers lub Objects, zamiast polegać na wyglądzie obszaru roboczego.
4. Jeśli zaznaczony element jest grupą, uruchom Ungroup jeden raz.
5. Powtórz tylko wtedy, gdy plik zawiera zagnieżdżone grupy.

Zagnieżdżone grupy są częste. Logo może mieć jedną grupę dla ikony, drugą dla napisu i grupę nadrzędną obejmującą obie. Dwie lub trzy świadome operacje rozgrupowania są normalne. Klikanie aż do całkowitego rozbicia grafiki — już nie. Zatrzymaj się, gdy tylko możesz zaznaczyć potrzebne elementy.

Ścieżka złożona wygląda jak osobne elementy, ale zachowuje się jak jeden obiekt

Litera „O”, kształt pierścienia i logo z wyciętą przestrzenią negatywową często są ścieżkami złożonymi. Widoczny otwór nie jest białym obiektem umieszczonym na wierzchu. Powstaje dzięki wielu podścieżkom i regule wypełnienia ścieżki; specyfikacja ścieżek SVG wyraźnie przewiduje ścieżki złożone dla struktur takich jak otwór w pierścieniu.

Taka struktura jest przydatna. Zachowuje światła liter i wycięcia podczas przesuwania grafiki lub zmiany jej koloru. Rozdzielenie jej może wypełnić otwory, oddzielić odizolowane fragmenty lub zmienić to, co ploter tnący uznaje za wnętrze i zewnętrze. Jeśli otwór już się zamknął, skorzystaj z diagnozy wypełnionych otworów, zanim zastosujesz kolejne polecenia dotyczące ścieżek.

Jeśli rzeczywiście potrzebujesz osobnych elementów:

• najpierw zduplikuj obiekt;
• użyj Release Compound Path, Break Apart lub odpowiednika tego polecenia;
• potem sprawdź każdy otwór i każde światło litery;
• przywróć strukturę złożoną, jeśli docelowa aplikacja wymaga jednego kształtu o czystym konturze.

W pliku do cięcia rozdzielenie elementów nie oznacza automatycznie poprawy. Jeśli obecna ścieżka złożona wycina się prawidłowo, zostaw ją bez zmian.

Pojedyncza ścieżka nie ma w środku nic do odsłonięcia

Jedna ścieżka może tworzyć skomplikowaną sylwetkę i nadal być jednym obiektem. Przełącz się na narzędzie do edycji węzłów lub zaznaczania bezpośredniego. Jeśli węzły pojawiają się wzdłuż całego konturu, widzisz już geometrię, którą możesz edytować.

Teraz masz do dyspozycji operacje na ścieżkach, a nie na grupach:

• przesuwaj węzły, aby zmienić kształt konturu;
• przetnij ścieżkę w wybranych węzłach;
• podziel kształt za pomocą innej ścieżki;
• użyj Break Apart, jeśli ścieżka zawiera niepołączone podścieżki;
• narysuj fragment od nowa, jeśli wynik wektoryzacji jest zbyt niedokładny.

To rozróżnienie ma znaczenie w przypadku grafiki po automatycznej wektoryzacji. Konwerter może utworzyć jeden kształt na kolor, a nie jeden kształt na każdy element rozpoznawany przez człowieka. Niebieska koszula i niebieskie oko mogą stać się jednym obiektem złożonym, ponieważ mają wspólne wypełnienie. Taki plik jest grafiką wektorową, ale jego struktura nie odpowiada warstwom podzielonym według znaczenia, których oczekujesz.

Przy animacji w Rive zdecyduj, które części mają poruszać się niezależnie, zanim zwolnisz lub scalisz ścieżki. Import SVG tworzy natywne obiekty Rive, więc sprawdź wynikową strukturę w panelu Hierarchy i przetestuj ruch jednego elementu. Poradnik przygotowania SVG do importu w Rive omawia grupowanie i ustawienia wypełnień oraz obrysów w pliku źródłowym w kontekście zaimportowanych elementów, nieobsługiwanych efektów i punktów obrotu potrzebnych do animacji.

SVG może zawierać jeden obraz rastrowy

SVG może zawierać element <image>. Specyfikacja osadzonej zawartości SVG mówi, że ten element może odwoływać się do rastrowej zawartości PNG lub JPEG. Zewnętrzny plik ma rozszerzenie .svg, ale grafika wewnątrz nadal składa się z pikseli.

Możesz to szybko sprawdzić na trzy sposoby:

1. Powiększ obraz. Jeśli na krawędziach widać piksele, zaznaczona zawartość jest rastrowa.
2. Otwórz SVG w edytorze tekstu. Wyszukaj <image, data:image, .png lub .jpg.
3. Sprawdź typ obiektu. Prostokątny obiekt obrazu bez edytowalnych węzłów nie jest grupą kształtów wektorowych.

Nie przeprowadzaj wektoryzacji zrzutu ekranu SVG, jeśli nadal masz oryginalny plik PNG, JPG lub plik projektu. Użyj najczystszego źródła, jakie uda Ci się znaleźć. Każdy eksport i zrzut ekranu może dodać rozmycie wynikające ze skalowania lub artefakty kompresji.

W tym przypadku może pomóc PerfectVector: jego konwersja obrazu na grafikę wektorową pozwala odtworzyć odpowiednią grafikę o płaskich kolorach jako edytowalne ścieżki. Jeśli to fotografia, pozostaw ją jako obraz rastrowy, chyba że celowo chcesz uzyskać uproszczony wygląd wektorowy. Zdjęcie nie staje się uporządkowanym zestawem warstw odpowiadających poszczególnym elementom tylko dlatego, że znajduje się wewnątrz SVG.

Więcej o tej konkretnej pułapce formatu kontenerowego znajdziesz w poradniku o SVG, w którym nadal widać piksele.

A co ze ścieżkami przycinania, maskami i symbolami?

Niektóre pliki są grafiką wektorową, ale nadal nie poddają się zwykłemu rozgrupowaniu:

• Ścieżka przycinania ukrywa część obiektu bez jej usuwania. Zwolnij przycięcie, aby odsłonić pełną geometrię, a następnie zdecyduj, czy przycięte fragmenty powinny pozostać.
• Maska steruje widocznością za pomocą jasnych i ciemnych wartości. Jej zwolnienie może ujawnić nieoczekiwaną grafikę lub zmienić przezroczystość.
• Symbol lub powiązana instancja mogą wymagać polecenia Expand, Detach lub Convert to Paths przed bezpośrednią edycją.
• Zablokowana warstwa to stan w edytorze, a nie struktura SVG. Odblokuj ją, zanim zaczniesz diagnozować plik.

Te struktury warto zachować, jeśli wygląd jest już prawidłowy, a Ty chcesz tylko zmienić rozmiar grafiki lub umieścić ją w projekcie. Rozwinięcie wszystkiego może znacznie utrudnić utrzymanie małego, uporządkowanego SVG.

Bezpieczna kolejność naprawy

Zacznij od działania, które najmniej ingeruje w strukturę:

1. Zapisz kopię.
2. Odblokuj obiekt lub warstwę.
3. Sprawdź typ obiektu w panelu warstw.
4. Rozgrupuj obiekt, który na pewno jest grupą.
5. Zwolnij przycięcie lub maskę tylko wtedy, gdy problemem jest ukryta geometria.
6. Rozdziel ścieżkę złożoną tylko wtedy, gdy jej elementy wymagają osobnej edycji.
7. Edytuj lub podziel pojedynczą ścieżkę, zamiast próbować ją rozgrupować.
8. Powtórz wektoryzację tylko wtedy, gdy plik zawiera piksele lub geometrię nienadającą się do użycia i masz dostęp do oryginalnego obrazu rastrowego.

Ta kolejność zachowuje otwory, nakładanie się elementów i relacje między warstwami, dopóki nie ustalisz, że to one są przyczyną problemu.

Jak zapobiegać temu problemowi w przekazywanych plikach

Zanim wyślesz komuś SVG:

• nazwij ważne grupy i warstwy w dokumencie źródłowym;
• zamieniaj tekst na kontury tylko w kopii przeznaczonej do przekazania, zachowując edytowalny tekst w pliku głównym;
• unikaj osadzania obrazu rastrowego, jeśli odbiorca oczekuje edytowalnych kształtów wektorowych;
• dołącz podgląd PNG, aby nie mylić wyglądu z możliwością edycji;
• otwórz wyeksportowany SVG w drugim edytorze i zaznacz kilka elementów;
• poinformuj odbiorcę, czy plik ma warstwy, jest spłaszczony, czy celowo stanowi jeden kształt złożony.

Jeśli masz kupiony plik, zachowaj cały pobrany pakiet. Twórca mógł dołączyć SVG z warstwami, DXF, EPS lub plik źródłowy, nawet jeśli pierwszy otwarty SVG jest spłaszczony.

Najczęściej zadawane pytania

Dlaczego polecenie Ungroup jest wyszarzone dla mojego SVG? Zaznaczony obiekt prawdopodobnie nie jest grupą. Może być pojedynczą ścieżką, ścieżką złożoną, obrazem, obiektem z przycięciem lub zablokowanym obiektem. Sprawdź panel Layers lub Objects i użyj polecenia odpowiadającego typowi obiektu.

Dlaczego mój SVG importuje się jako jeden obiekt? Mógł zostać wyeksportowany jako jedna ścieżka złożona, zbudowany jako jeden kształt na kolor, spłaszczony przez aplikację źródłową lub zapisany z obrazem rastrowym wewnątrz. Jeden obiekt nie oznacza automatycznie, że plik jest uszkodzony; przed wprowadzeniem zmian sprawdź jego węzły i kod źródłowy.

Jak rozdzielić jednowarstwowy SVG w Cricut Design Space? Jeśli ma jeden kolor i jedną ścieżkę, Design Space nie ma ukrytych warstw, które można odsłonić. Rozdziel grafikę w edytorze grafiki wektorowej, wróć do oryginalnego źródła z warstwami lub odtwórz obszary kolorów przed ponownym importem SVG.

Czy mogę rozgrupować SVG w programie Inkscape lub Illustrator? Tak, jeśli zaznaczenie jest rzeczywistą grupą. Inkscape i Illustrator udostępniają też polecenia do obsługi ścieżek złożonych, struktur przycinania i dzielenia ścieżek. Te polecenia dotyczą różnych struktur i nie należy traktować ich jako mocniejszych wersji Ungroup.

Czy PerfectVector może sprawić, że osadzony obraz będzie edytowalny? PerfectVector może przeprowadzić wektoryzację oryginalnej grafiki rastrowej i utworzyć ścieżki wektorowe, jeśli źródło się do tego nadaje, na przykład jest logo, ikoną lub ilustracją o płaskich kolorach. Nie odzyskuje nazwanych warstw ani edytowalnego tekstu z oryginalnego projektu, a fotografie zwykle lepiej pozostawić jako obrazy rastrowe.

Źródła

1. W3C — SVG Document Structure — kontener <g> i model zagnieżdżania grup.
2. W3C — SVG Paths — ścieżki, niepołączone podścieżki i geometria ścieżek złożonych.
3. W3C — SVG Embedded Content — rastrowa zawartość PNG i JPEG w elementach SVG <image>.
4. MDN — SVG clipping and masking — różnica w działaniu przycinania i masek.
5. Cricut — Image uploads: unsupported items — sposób, w jaki jedna z aplikacji docelowych obsługuje ścieżki przycinania, tekst, powiązane obrazy i osadzone obrazy rastrowe.

---

Nie walcz dalej z tym samym nieaktywnym poleceniem. Najpierw rozpoznaj strukturę. Jeśli SVG okaże się pikselami w kontenerze, odtwórz oryginalną grafikę jako edytowalne ścieżki wektorowe, a następnie sprawdź wynik, zanim przejdziesz dalej.