SVG otwiera się jako pusty dokument: siedem rzeczy do sprawdzenia przed odtworzeniem grafiki

Jeśli SVG otwiera się jako pusty dokument, zrób kopię pliku, zanim cokolwiek zapiszesz lub wyeksportujesz. Grafika może nadal znajdować się w pliku, ale poza widocznym obszarem viewBox, mieć przezroczyste lub białe wypełnienie albo obrys, być ukryta przez przycięcie lub maskę albo korzystać z funkcji, której dana aplikacja nie obsługuje. Ponowne zapisanie pustego dokumentu może sprawić, że plik, który dało się odzyskać, stanie się naprawdę pusty.

Otwórz kopię w przeglądarce i edytorze grafiki wektorowej. To porównanie wyznacza pierwszy kierunek diagnozy: jeśli grafika jest widoczna w jednym programie, a niewidoczna w drugim, zwykle chodzi o obsługę funkcji przez aplikację lub strukturę dokumentu; jeśli nie widać jej nigdzie, bardziej prawdopodobne są problemy z obszarem wyświetlania, wypełnieniem i obrysem, przycinaniem, nieprawidłowym kodem lub brakującą zawartością.

Te kroki tworzą mapę diagnozy, a nie siedem niezależnych sposobów naprawy. Potwierdź, że geometria istnieje, a następnie sprawdź jej granice, skalę, wypełnienie i obrys, przycinanie, obsługiwane efekty i zależności, zanim cokolwiek zastąpisz.

1. Zachowaj plik i sprawdź, czy zawiera dane

Zrób kopię pod nową nazwą. Następnie sprawdź jej rozmiar i otwórz ją w zwykłym edytorze tekstu.

Z pliku o rozmiarze zero bajtów lub dokumentu zawierającego tylko pusty element główny <svg> niewiele da się odzyskać. Plik zawierający ścieżki, grupy, style lub duży blok zakodowanych danych nie jest pusty tylko dlatego, że obszar roboczy wygląda na pusty.

Nie wyciągaj zbyt daleko idących wniosków z dużego rozmiaru. Plik może zawierać osadzony obraz o wysokiej rozdzielczości, powtarzające się style lub nieprawidłowo zapisane dane. Rozmiar mówi jedynie, że warto sprawdzić plik dokładniej.

2. Porównaj przeglądarkę i edytor grafiki wektorowej

Przeciągnij SVG do przeglądarki w aktualnej wersji, a następnie otwórz tę samą kopię w Inkscape, Illustratorze, Figmie lub innym edytorze grafiki wektorowej.

To, że przeglądarka wyświetla plik, nie dowodzi, że zawiera on ścieżki wektorowe działające w różnych programach. Przeglądarki potrafią renderować osadzone obrazy rastrowe i zawartość internetową, które programy CAD lub edytory grafiki wektorowej ignorują.

3. Zaznacz wszystko i sprawdź granice

W edytorze grafiki wektorowej użyj polecenia Select All (zaznacz wszystko). Sprawdź ramkę zaznaczenia, współrzędne, szerokość i wysokość.

• Ramka zaznaczenia daleko poza stroną oznacza, że grafika znajduje się poza obszarem roboczym.
• Ogromne zaznaczenie może wskazywać na zbędny punkt, obiekt przycinający lub prostokąt tła.
• Ramka zaznaczenia o normalnym rozmiarze przy niewidocznej grafice wskazuje na problem z wypełnieniem i obrysem, kryciem lub przycinaniem.
• Brak obiektów możliwych do zaznaczenia sugeruje nieobsługiwaną zawartość, pusty dokument lub nieudany import.

Jeśli obiekty znajdują się poza obszarem roboczym, przenieś zaznaczenie na stronę lub dopasuj rozmiar strony do rysunku. Unikaj skalowania ścieżek, chyba że ich rzeczywiste wymiary też są nieprawidłowe.

4. Porównaj grafikę z viewBox

Otwórz SVG jako tekst i sprawdź element główny:

<svg xmlns="http://www.w3.org/2000/svg"
  width="800" height="600" viewBox="0 0 800 600">

Cztery liczby w viewBox oznaczają minimalną współrzędną x, minimalną współrzędną y, szerokość i wysokość, zgodnie ze specyfikacją układu współrzędnych SVG. Grafika o współrzędnych w okolicach 10000,10000 nie pojawi się wewnątrz viewBox="0 0 800 600". Zerowy lub ujemny wymiar viewBox wyłącza renderowanie tego elementu.

Popraw granice widocznego obszaru na podstawie rzeczywistej geometrii. Nie wklejaj przypadkowego viewBox z innego pliku. Poradnik dotyczący nieprawidłowego rozmiaru SVG wyjaśnia, jak viewBox i wymiary obszaru wyświetlania współdziałają, gdy grafika jest widoczna, ale ma nieprawidłową skalę.

5. Sprawdź wypełnienie, obrys i widoczność

Zaznacz obiekt i sprawdź zarówno wypełnienie, jak i obrys. Do częstych przyczyn niewidoczności należą:

• fill="none" bez obrysu;
• białe wypełnienie na białym obszarze roboczym;
• opacity="0", fill-opacity="0" lub stroke-opacity="0";
• display="none" lub visibility="hidden";
• klasa, dla której reguła w arkuszu stylów ustawia jedną z tych wartości;
• wyjątkowo cienki obrys przy bieżącej skali.

Tymczasowo umieść kolorowy prostokąt za grafiką lub nadaj kopii jednej ścieżki jaskrawe wypełnienie testowe. Jeśli grafika się pojawi, przywróć docelowe style zamiast zostawiać kolor diagnostyczny w końcowym pliku.

Jeśli wypełnienia pozostają widoczne, ale pojedyncze linie znikają po eksporcie, skorzystaj z poradnika dotyczącego znikających obrysów SVG, aby sprawdzić ustawienia obrysu, przycinanie, skalę i nieobsługiwane efekty wyglądu bez ponownego obrysowywania poprawnej geometrii.

6. Sprawdź funkcje, których program docelowy może nie obsługiwać

Wyszukaj w kodzie clipPath, mask, pattern, filter, <image> i <foreignObject>.

Przycięcia i maski mogą ukryć całą zawartość, gdy ich układy współrzędnych lub odwołania przestaną działać; model renderowania SVG umieszcza przycinanie, maskowanie, filtrowanie i kompozytowanie w potoku renderowania. Wzory i filtry mogą być renderowane różnie przez poszczególne moduły importu. Element <image> osadza obraz wewnątrz kontenera SVG, a <foreignObject> może zawierać treść z innej przestrzeni nazw XML, zgodnie ze specyfikacją osadzonej zawartości SVG.

Jeśli kształty pozostają widoczne, ale etykiety HTML znikają, porównaj foreignObject z natywnym tekstem SVG i zastąp tylko etykietę, która nie działa.

Jeśli ścieżki są widoczne, ale cień jest ucięty, zdiagnozuj przycięty cień SVG, sprawdzając osobno obszar filtra i zewnętrzny obszar wyświetlania.

Odwołania też mogą zawodzić. Sprawdź, czy identyfikatory używane przez url(#name) rzeczywiście istnieją i są unikalne. Jeśli SVG korzysta z zewnętrznego obrazu, fontu, arkusza stylów lub pliku połączonego odwołaniem, przeniesienie SVG mogło zerwać dostęp do tego zasobu.

W przypadku aplikacji Qt poradnik dotyczący renderowania SVG w Qt oddziela sprawdzanie modułów i wczytywania od ograniczeń obsługiwanych funkcji. Najpierw porównaj działanie na niewielkim pliku źródłowym, a następnie sprawdź grafikę przy wybranym sposobie renderowania.

Gdy przeglądarka pokazuje projekt, ale CAD niczego nie importuje, poszukaj zwykłych elementów <path>, <rect>, <circle> i podobnej geometrii wektorowej. Widoczny osadzony PNG nie zawiera krzywych, z których CAD mógłby skorzystać.

7. Sprawdź poprawność pliku lub wyeksportuj go ponownie

Nieprawidłowy XML, błędne atrybuty i struktury charakterystyczne dla danego eksportera mogą być tolerowane przez jeden silnik renderujący, a odrzucane przez inny. Jeśli masz projekt źródłowy, otwórz go ponownie w aplikacji, w której powstał, i wyeksportuj kopię jako zwykły lub uproszczony SVG. Rozwiń tylko te funkcje, których program docelowy nie obsługuje, i porównaj nowy plik ze źródłem.

Jeśli nie masz źródła, użyj walidatora SVG/XML lub edytora tekstu, który zgłasza błędy składni. Pracuj na kopii i najpierw napraw pierwszy błąd struktury, ponieważ późniejsze komunikaty mogą być jego konsekwencją.

Nie uruchamiaj optymalizatora na jedynej kopii. Optymalizacja przepisuje strukturę i może utrudnić odzyskanie zawartości, gdy przyczyna problemu nie jest jeszcze znana.

Kiedy odtworzyć grafikę lub ponownie przeprowadzić wektoryzację

Ponowna wektoryzacja ma sens, gdy plik zawiera tylko osadzony obraz rastrowy, wygenerowana struktura SVG nie nadaje się do użytku poza przeglądarką lub nie zachowało się żadne edytowalne źródło. Wyodrębnij lub znajdź obraz rastrowy o najwyższej jakości, a następnie przekształć go w rzeczywiste ścieżki.

Nie jest to właściwe rozwiązanie dla ścieżek poza obszarem roboczym, nieprawidłowego viewBox, białych wypełnień czy jednej nieobsługiwanej maski. Te pliki już zawierają geometrię, a jej zachowanie pozwala uniknąć niepotrzebnej utraty jakości.

Jeśli cały projekt zaznacza się jako jeden obraz złożony z pikseli lub przy dużym powiększeniu widać w nim kwadratowe piksele, skorzystaj z diagnozy ukrytych pikseli, zanim odtworzysz grafikę.

Gdzie przydaje się PerfectVector

Proces przekształcania obrazu w grafikę wektorową w PerfectVector przydaje się wtedy, gdy plik zawiera wyłącznie obraz rastrowy. Prześlij najlepszy PNG, JPG lub inny obsługiwany obraz i sprawdź w podglądzie grafiki wektorowej rzeczywiste kształty, czyste krawędzie, przestrzeń negatywną oraz rozsądną liczbę i złożoność ścieżek.

PerfectVector nie naprawia dowolnego kodu SVG ani nie odzyskuje zasobów zewnętrznych. Jeśli plik już zawiera poprawne ścieżki, popraw obszar wyświetlania, style lub nieobsługiwaną funkcję w edytorze grafiki wektorowej. Jeśli zawiera tylko obraz rastrowy w kontenerze SVG, odtworzenie widocznej grafiki jako ścieżek da Ci grafikę wektorową działającą w różnych programach zamiast kolejnego kontenera z obrazem.

Najczęściej zadawane pytania

Dlaczego mój SVG jest pusty w Illustratorze, ale widoczny w Chrome? Plik może korzystać z funkcji obsługiwanej przez przeglądarkę, której Illustrator nie importuje, takiej jak osadzona zawartość internetowa, złożony wzór, filtr, maska lub obraz rastrowy w kontenerze SVG. Przejrzyj kod i sprawdź, czy zawiera zwykłe ścieżki wektorowe, zanim ponownie wyeksportujesz prostszą kopię SVG.

Jak znaleźć grafikę SVG, która znajduje się poza obszarem roboczym? Użyj polecenia Select All (zaznacz wszystko) i sprawdź granice zaznaczenia lub współrzędne. Jeśli ramka pojawi się daleko od strony, przenieś zaznaczenie na stronę lub dopasuj rozmiar strony do rysunku. Następnie zaktualizuj viewBox, aby odpowiadał geometrii, która ma być widoczna.

Czy SVG może być biały i wyglądać na pusty? Tak. Białe wypełnienia lub obrysy znikają na białym obszarze roboczym. Plik może też korzystać z zerowego krycia, display="none" lub visibility="hidden". Sprawdź grafikę na kolorowym tle i przeanalizuj obliczone style.

Dlaczego mój SVG importuje się jako pusty dokument do Fusion lub innej aplikacji CAD? Plik może zawierać osadzoną bitmapę lub nieobsługiwaną zawartość internetową zamiast krzywych wektorowych. CAD potrzebuje geometrii ścieżek, którą może zaimportować. Wyszukaj <path> i powiązane kształty oraz sprawdź, czy widoczna zawartość nie znajduje się zamiast tego wewnątrz <image> lub <foreignObject>.

Czy warto przekonwertować pusty SVG na PNG, a potem z powrotem na SVG? Tylko jeśli SVG nie zawiera geometrii wektorowej, którą da się odzyskać, a obraz rastrowy jest najlepszym zachowanym źródłem. Konwersja do PNG i z powrotem niszczy istniejącą strukturę ścieżek. Najpierw zdiagnozuj problemy z obszarem wyświetlania, widocznością, przycinaniem i obsługą funkcji.

Źródła

1. W3C — SVG 2 Coordinate Systems — Definiuje obszary wyświetlania, viewBox, jednostki i transformacje.
2. W3C — SVG 2 Rendering Model — Opisuje przycinanie, maskowanie, filtrowanie, kompozytowanie i kolejność renderowania.
3. W3C — SVG 2 Embedded Content — Definiuje osadzone obrazy i zawartość z innych przestrzeni nazw w SVG.
4. W3C — Markup Validation Service — Umożliwia sprawdzanie poprawności dokumentów zgodnie ze standardami podczas diagnozowania błędów kodu.

Gdy zachowany plik zawiera wyłącznie piksele w kontenerze SVG, odtwórz grafikę jako edytowalne ścieżki wektorowe i sprawdź podgląd. Gdy poprawne ścieżki już istnieją, zachowaj je i napraw najmniejszy element dokumentu, który powoduje problem.