Obrysy SVG znikają po eksporcie: znajdź przyczynę

Gdy obrys SVG znika po eksporcie, najpierw ustal, czy geometria ścieżki nadal istnieje. Linia, która wygląda na brakującą, może mieć wyłączone rysowanie obrysu, zlewać się z tłem, stać się zbyt cienka w nowej skali, znajdować się poza viewBox lub być przycięta przy krawędzi strony. Może też korzystać z pędzla, profilu zmiennej szerokości, filtra albo reguły CSS, których aplikacja docelowa nie rozumie.

Nie odtwarzaj od razu grafiki przez ponowną wektoryzację ani nie przekształcaj wszystkich obiektów w ścieżki. Zachowaj edytowalny plik źródłowy, utwórz kopię testową i wyodrębnij jedną problematyczną linię. Najmniejsza poprawka zwykle pozwala zachować więcej oryginalnej struktury.

Szybka diagnoza

1. Otwórz ten sam plik SVG w aktualnej przeglądarce i jednym edytorze grafiki wektorowej.
2. Zaznacz brakującą linię i potwierdź, że jej ścieżka oraz węzły nadal istnieją.
3. W kopii testowej ustaw jaskrawy kolor obrysu, pełną nieprzezroczystość i tymczasowo zwiększ jego szerokość.
4. Odsuń linię od krawędzi strony i wyłączaj kolejno przycinanie, maski oraz filtry.
5. Usuń transformacje lub sprawdź, jak wpływają na szerokość obrysu.
6. Jeśli problem występuje tylko w jednej aplikacji docelowej, zastąp nieobsługiwany wygląd w kopii przeznaczonej do przekazania.

Cztery sposoby wyświetlania obrysu

Najpierw sprawdź, czy ścieżka nadal istnieje

Otwórz kopię pliku SVG w edytorze tekstu i wyszukaj standardowe elementy kształtów, takie jak <path>, <line>, <polyline>, <circle> lub <rect>. Następnie zaznacz brakujący obiekt w edytorze grafiki wektorowej i przełącz się na widok konturów lub szkieletowy.

• Jeśli w widoku konturów widać węzły i ścieżkę, geometria przetrwała. Sprawdź ustawienia rysowania, przycinanie, transformacje i obsługę w aplikacji.
• Jeśli obiekt istnieje, ale jego granice znajdują się daleko poza stroną, przesuń go z powrotem lub popraw viewBox.
• Jeśli zamierzona linia stała się zamkniętym kształtem z wypełnieniem, jej obrys mógł już zostać przekształcony w ścieżki.
• Jeśli nie ma odpowiadającej jej geometrii, sprawdź dokument źródłowy i ustawienia eksportu. Eksporter mógł pominąć nieobsługiwany obiekt.

Przed edycją porównaj wynik w dwóch programach renderujących. Obrys widoczny w Chrome, ale brakujący w edytorze desktopowym, wskazuje na ograniczenie importu lub zależność od CSS. Linia, której nie widać nigdzie, częściej ma nieprawidłowe ustawienia rysowania, jest przycięta, ma błędne granice albo nie ma geometrii. Jeśli pusty jest cały dokument, a nie tylko jego linie, skorzystaj z szerszej diagnostyki pustego SVG.

Jeśli obrys znika konkretnie w Penpot, skorzystaj z listy kontroli importu SVG do Penpot, aby ustalić, na czym polega problem z przeniesieniem pliku.

Przyczyna 1: ustawienia rysowania sprawiają, że obrys jest niewidoczny

SVG traktuje wypełnienie i obrys jako osobne właściwości rysowania. Ścieżka może istnieć bez wyświetlania linii. Przewodnik MDN po wypełnieniach i obrysach omawia podstawowe właściwości, w tym stroke, stroke-width i nieprzezroczystość.

Sprawdź, czy zaznaczony obiekt lub jego odziedziczone style mają:

• stroke="none";
• brak stroke w połączeniu z fill="none";
• stroke-width="0" lub skrajnie małą szerokość;
• opacity="0" lub stroke-opacity="0";
• kolor obrysu zgodny z kolorem strony lub otaczającego kształtu;
• display="none" lub visibility="hidden" na obiekcie albo grupie nadrzędnej;
• klasę CSS, która nadpisuje atrybuty prezentacji.

W kopii testowej przypisz nasycony kolor, ustaw nieprzezroczystość na 100% i zwiększ szerokość obrysu kilkukrotnie. Jeśli gruby obrys zasłania wypełnienie liter, sprawdź kolejność rysowania obrysu i wypełnienia w SVG, zanim zmienisz ścieżki. Umieść za obiektem prostokąt w kontrastowym kolorze. Jeśli linia się pojawi, przywróć zamierzony kolor i dobierz szerokość, która pozostanie czytelna w docelowym rozmiarze.

Pamiętaj, że styl zadeklarowany na elemencie nadal może zostać nadpisany przez regułę arkusza stylów o większej specyficzności. Sprawdź styl obliczony w narzędziach deweloperskich przeglądarki, gdy kod wskazuje jedno, a przeglądarka rysuje coś innego.

Przyczyna 2: linia jest przycięta przy krawędzi strony lub ramki

Obrys rozciąga się po obu stronach ścieżki środkowej. Jeśli środek obrysu leży na granicy viewBox, połowa obrysu może wypaść poza obszar widoku. Gruba linia, kwadratowe zakończenie, ostre połączenie, rozmycie lub cień potrzebują więcej miejsca, niż sugerują same współrzędne ścieżki; specyfikacja rysowania SVG określa, jak szerokość obrysu, zakończenia, połączenia i limity ostrych połączeń rozszerzają rysowany obszar wokół ścieżki. Jeśli w zamkniętym kształcie linia ma leżeć w całości wewnątrz lub na zewnątrz ścieżki, skorzystaj z przewodnika po wyrównaniu obrysu do wewnątrz lub na zewnątrz, aby porównać zajmowany przez niego obszar przed zmianą rozmiaru obszaru roboczego.

Sprawdź to, przesuwając obiekt do środka lub tymczasowo powiększając viewBox. Jeśli brakujący fragment wróci, dodaj odpowiednio dobrany margines wokół widocznej grafiki. Nie powiększaj płótna w ciemno; oblicz, ile miejsca potrzeba na maksymalną szerokość obrysu, zakończenia, połączenia i efekty.

Sprawdź też odwołania do clipPath i mask. Obszar przycinania dopasowany do granic wypełnienia może obciąć obrys, który poza nie wystaje. Zagnieżdżone elementy SVG mogą tworzyć własne obszary widoku, a działanie overflow może różnić się między przeglądarką a importerem narzędzia projektowego.

Gdy znika tylko jeden narożnik, sprawdź wpływ wysokiej wartości stroke-miterlimit. Ostre połączenie może wystawać daleko poza ścieżkę. Zmiana połączenia na zaokrąglone lub ścięte może być lepszym rozwiązaniem niż powiększenie obszaru widoku, ale tylko wtedy, gdy zachowuje zamierzony wygląd projektu.

Przyczyna 3: skalowanie lub transformacje zmieniły wygląd obrysu

Transformacja może zmienić zarówno geometrię obiektu, jak i widoczny obrys. Linia, która miała odpowiednią grubość w rozmiarze używanym podczas projektowania, po imporcie może stać się niezwykle cienka, zwłaszcza gdy aplikacja odbierająca inaczej interpretuje jednostki lub zagnieżdżone transformacje.

Sprawdź, czy plik SVG zawiera transform="scale(...)" na ścieżce i jej grupach nadrzędnych. Porównaj viewBox, width i height dokumentu, a następnie sprawdź wynik przy powiększeniu 100% oraz w końcowym rozmiarze fizycznym. Jeśli cały projekt importuje się z niewłaściwymi wymiarami, popraw mapowanie współrzędnych dokumentu za pomocą testu skali SVG o znanym rozmiarze, zamiast kompensować problem przypadkowymi szerokościami obrysu.

SVG obsługuje też vector-effect="non-scaling-stroke". Jak wyjaśnia dokumentacja MDN dotycząca vector-effect, często używana wartość non-scaling-stroke sprawia, że szerokość renderowanego obrysu nie zmienia się wraz z transformacjami elementu. Może to być przydatne w diagramach interfejsów i na mapach; sprawdź wynik w docelowym importerze, ponieważ obsługa poza przeglądarkami zależy od aplikacji.

Nie dodawaj non-scaling-stroke jako uniwersalnej poprawki. Zdecyduj, czy linia powinna skalować się razem z grafiką. Jeśli logo jest powiększane do druku, jego obrysy zwykle powinny rosnąć razem z nim. Jeśli linia na mapie ma zachować szerokość jednego piksela ekranu podczas przybliżania, nieskalujący się obrys może być celowym wyborem.

Przyczyna 4: aplikacja docelowa nie potrafi odtworzyć wyglądu

Nie każda linia widoczna w aplikacji projektowej jest zwykłym obrysem SVG. Może to być pędzel reagujący na nacisk, profil zmiennej szerokości, pędzel wzorkowy, efekt dynamiczny, przejście między obiektami, filtr lub zestaw ustawień wyglądu właściwy dla danej aplikacji. Eksporter może przybliżyć taką konstrukcję, a druga aplikacja może to przybliżenie zignorować.

Przeprowadź test upraszczania na kopii:

1. usuń filtr, zachowując podstawowy obrys;
2. zastąp wzorek lub pędzel zwykłym, jednolitym obrysem;
3. usuń zmienną szerokość;
4. spłaszcz zagnieżdżone transformacje;
5. wyeksportuj pojedynczy obiekt jako minimalny plik SVG;
6. otwórz ten plik w aplikacji docelowej.

Pierwsze uproszczenie, które przywróci linię, wskaże nieobsługiwaną funkcję. Możesz wtedy wybrać przenośny zamiennik zamiast spłaszczać cały dokument.

Zewnętrzne pliki CSS i zasoby również stanowią ryzyko dla przenośności. Plik SVG osadzony w witrynie może dziedziczyć ze strony regułę klasy lub właściwość niestandardową, podczas gdy ten sam plik otwarty samodzielnie już ich nie dziedziczy. Z kolei edytor desktopowy może odrzucać selektory, których nie potrafi odwzorować w swoim modelu obiektów. W samodzielnym pliku przeznaczonym do przekazania użyj stylów zawartych w tym pliku, których poprawny import w aplikacji docelowej został sprawdzony.

Edytowalny obrys czy obrys przekształcony w ścieżkę?

Edytowalny obrys zachowuje edytowalną ścieżkę środkową wraz z ustawieniami szerokości, zakończeń, połączeń, wzoru kresek i sposobu rysowania. Zajmuje niewiele miejsca i jest łatwy do dostosowania. Przekształcenie obrysu w ścieżki zamienia widoczny pas obrysu w geometrię ścieżek z wypełnieniem. Utrwala to wygląd, ale oznacza utratę oryginalnej linii środkowej i możliwości regulowania obrysu.

Przekształć obrys w ścieżki w kopii przeznaczonej do przekazania, gdy aplikacja docelowa nie potrafi zachować istotnego wyglądu pędzla lub zmiennej szerokości albo gdy wykonawca wyraźnie wymaga geometrii z wypełnieniem. Dokumentacja Adobe dotycząca rozwijania obiektów opisuje przekształcanie obrysów w ich obiekty składowe.

Zachowaj plik główny z edytowalnymi obrysami, ponieważ ich przekształcenie może:

• zwiększyć liczbę węzłów i rozmiar pliku;
• spowolnić zmiany szerokości;
• zamienić nakładające się fragmenty w skomplikowaną geometrię;
• utworzyć osobne części wymagające scalenia;
• zmienić znaczenie otwartych ścieżek podczas pracy z ploterem, grawerowania lub animacji.

Przekształcanie obrysów jest szczególnie ryzykowne, gdy ploter pisakowy lub proces grawerowania zakłada, że narzędzie przejdzie po ścieżce środkowej tylko raz. Obrys przekształcony w ścieżki daje maszynie dwie granice. W takim procesie skorzystaj z przewodnika po jednoliniowym SVG.

Dobierz poprawkę do aplikacji docelowej

Sprawdź dokładnie to środowisko docelowe, do którego trafi plik, a nie tylko inny edytor tego samego producenta. Przeglądarka, obszar roboczy aplikacji projektowej, proces druku, ploter tnący i importer CAD mogą obsługiwać różne podzbiory SVG.

Bezpieczna kolejność naprawy

Zacznij od odwracalnych kontroli i stopniowo przechodź do przekształcania struktury:

1. zachowaj edytowalny plik źródłowy i utwórz kopię;
2. potwierdź, że geometria istnieje;
3. porównaj dwa programy renderujące;
4. przetestuj jawnie ustawiony kolor obrysu, szerokość i nieprzezroczystość;
5. sprawdź kontrast z tłem i odziedziczone reguły CSS;
6. sprawdź granice strony, przycinanie, maski i zagnieżdżone obszary widoku;
7. sprawdź transformacje i renderowanie w końcowym rozmiarze;
8. upraszczaj po jednym nieobsługiwanym elemencie wyglądu;
9. przekształć w ścieżki tylko niezbędne obrysy w kopii przeznaczonej do przekazania;
10. ponownie otwórz przekazywany plik SVG i porównaj go ze źródłem.

Nie używaj rasteryzacji jako pośredniej poprawki, gdy poprawne ścieżki nadal istnieją. Usuwa ona geometrię, którą próbujesz zachować, i wymusza dodatkowy etap wektoryzacji, który może złagodzić narożniki, zmienić krzywe i utworzyć zbędne węzły.

Kiedy przydaje się PerfectVector

PerfectVector przydaje się tylko wtedy, gdy oryginalna geometria wektorowa zniknęła lub nie nadaje się do użytku, a najlepszym zachowanym źródłem jest obraz rastrowy. Może odtworzyć odpowiednie płaskie logo, ikonę lub ilustrację jako edytowalne kształty wektorowe.

Nie naprawia CSS, nie przywraca pominiętego edytowalnego obrysu ani nie przekształca nieobsługiwanego pędzla z zachowaniem jego edytowalnej linii środkowej. Jeśli ścieżka nadal istnieje, popraw jej ustawienia rysowania, granice, transformacje lub wygląd w edytorze grafiki wektorowej. Zachowasz dzięki temu więcej informacji niż przez wektoryzację zrzutu ekranu.

Najczęściej zadawane pytania

Dlaczego obrysy SVG znikają po eksporcie? Ścieżka może nadal istnieć, ale nie mieć widocznego obrysu, mieć zerową nieprzezroczystość, kolor zgodny z tłem, skrajnie małą szerokość, podlegać przycinaniu, mieć problem ze skalą lub wygląd, którego aplikacja docelowa nie potrafi zaimportować. Najpierw potwierdź obecność geometrii, a potem sprawdzaj osobno ustawienia rysowania, granice, transformacje i obsługę funkcji.

Jak sprawdzić, czy ścieżka nadal istnieje? Zaznacz brakujący obiekt w edytorze grafiki wektorowej i przełącz się na widok konturów lub szkieletowy. Możesz też otworzyć SVG jako tekst i poszukać odpowiadającego mu elementu ścieżki lub kształtu. Istniejące węzły bez widocznej linii wskazują na problem z renderowaniem lub stylami, a nie na brak geometrii.

Dlaczego obrys jest przycięty przy krawędzi SVG? Obrys wystaje poza ścieżkę środkową, więc ścieżka na granicy viewBox może stracić połowę szerokości obrysu. Zakończenia, połączenia, filtry, przycinanie i maski również mogą wymagać dodatkowego marginesu. Przesuń ścieżkę do środka lub świadomie dopasuj obszar widoku i przycinania tak, by obejmowały cały widoczny efekt.

Czy przekształcać obrysy SVG w ścieżki przed eksportem? Tylko wtedy, gdy aplikacja docelowa nie potrafi zachować istotnego wyglądu obrysu lub wyraźnie wymaga geometrii z wypełnieniem. Przekształć obrysy w kopii przeznaczonej do przekazania i zachowaj plik główny z edytowalnymi obrysami. Takie przekształcenie dodaje geometrię i nie nadaje się do sytuacji, w których ploter lub narzędzie grawerujące powinno podążać po jednej linii środkowej.

Czy PerfectVector może przywrócić brakujący obrys SVG? Nie w pliku SVG, którego ścieżka lub styl po prostu wymagają naprawy. PerfectVector może odtworzyć widoczną grafikę z najlepszego zachowanego obrazu rastrowego, gdy oryginalna geometria wektorowa jest niedostępna, ale nie odzyskuje CSS, ustawień pędzla ani oryginalnej edytowalnej ścieżki środkowej.

Źródła

1. W3C — SVG 2 Painting — Definiuje wypełnienie, obrys, szerokość obrysu, zakończenia, połączenia i efekty wektorowe.
2. W3C — SVG 2 Coordinate Systems — Opisuje obszary widoku, viewBox, jednostki i transformacje.
3. MDN — vector-effect — Wyjaśnia działanie non-scaling-stroke.
4. Adobe Illustrator — Group and expand objects — Opisuje przekształcanie obrysów w edytowalne obiekty składowe.

---

Gdy oryginalna geometria wektorowa zniknęła, a najlepszym zachowanym źródłem jest obraz rastrowy, odtwórz grafikę jako uporządkowane ścieżki wektorowe w PerfectVector, a następnie sprawdź ją w aplikacji docelowej. Jeśli ścieżki nadal istnieją, napraw SVG zamiast ponownie go wektoryzować.