Dlaczego otwory w SVG się wypełniają (i jak je przywrócić)

Otwór w SVG wypełnia się, gdy plik lub aplikacja docelowa przestaje traktować wewnętrzny kontur jako obszar poza wypełnionym kształtem. Najczęstsze przyczyny to rozdzielenie ścieżki złożonej, zapisanie wewnętrznego konturu jako osobnego obiektu z wypełnieniem, zmiana reguły wypełnienia lub kierunku ścieżki, utrata tej relacji podczas importu albo wektoryzacja obrazu rastrowego, która zamknęła otwór jeszcze przed utworzeniem SVG.

Zacznij od otwarcia SVG w przeglądarce. Jeśli otwór jest już tam wypełniony, napraw plik. Jeśli w przeglądarce wygląda poprawnie, ale inna aplikacja wypełnia otwór, problem najprawdopodobniej powstaje podczas importu.

Najpierw ustal, gdzie zniknął otwór

Zanim zmienisz geometrię, sprawdź plik w dwóch środowiskach renderujących:

1. Zapisz kopię SVG.
2. Otwórz ją bezpośrednio w Chrome, Safari, Firefox lub innej przeglądarce.
3. Umieść ją zarówno na jasnym, jak i ciemnym tle.
4. Otwórz ten sam plik w aplikacji docelowej.
5. Porównaj konkretny otwór, a nie tylko ogólną sylwetkę.

Takie porównanie pozwala odróżnić wadliwy SVG od problemu z importem w konkretnej aplikacji. Chroni też plik, który był poprawny przed importem, przed uszkodzeniem przez przypadkowe operacje na ścieżkach.

Biały kształt nie jest otworem

Prawdziwy otwór pokazuje wszystko, co znajduje się za SVG. Biały kształt wygląda na pusty tylko na białym obszarze roboczym. Jeśli używasz grafiki w interfejsie internetowym, poradnik o pointer-events w SVG pokazuje, jak otwór, obszar pokryty wypełnieniem lub obrysem i osobny obszar reagujący na kliknięcia zachowują się po kliknięciu.

Aby to sprawdzić, dodaj tymczasowy ciemny prostokąt za grafiką. Jeśli domniemany otwór pozostaje biały, zaznacz ten wewnętrzny obiekt. Możesz zachować go jako celowy biały element projektu, ale nie oczekuj, że ploter tnący, narzędzie do grawerowania, nakładka w przeglądarce lub importer 3D odczyta go jako pustą przestrzeń.

Aby uzyskać przezroczysty otwór, użyj ścieżki złożonej lub odejmij wewnętrzny kształt od zewnętrznego. Maska również może tworzyć przezroczystość, ale wiele aplikacji produkcyjnych bardziej niezawodnie obsługuje prostą geometrię ścieżek niż maski. Jeśli pracujesz ze skryptami, wypróbuj wycinanie i łączenie importowanych ścieżek za pomocą Paper.js, a następnie ponownie otwórz wyeksportowany SVG, aby sprawdzić otwór.

W grafice do gobo poprawny przezroczysty otwór nadal wymaga osobnej decyzji dotyczącej materiału. Porównanie gobo stalowych i szklanych pokazuje tę samą literę O w układzie ze stalowymi mostkami i w projekcie podtrzymywanym przez szkło oraz wyjaśnia, dlaczego odwrócenie jasnych i ciemnych obszarów projekcji zmienia to, co musi pozostać połączone.

Ścieżki złożone zachowują relację tworzącą otwór

Litera O, pierścień i logo z wyciętym środkiem często korzystają z jednego elementu ścieżki zawierającego kilka zamkniętych podścieżek. Zewnętrzny kontur określa sylwetkę, a podścieżka znajdująca się wewnątrz tego konturu wyznacza światło litery lub wycięcie. Model ścieżek SVG dopuszcza wiele podścieżek w jednej ścieżce.

Dlatego polecenia Ungroup (rozgrupuj), Break Apart (rozdziel) i Release Compound Path (rozdziel ścieżkę złożoną) nie są zamienne. Rozdzielenie ścieżki złożonej może zamienić wewnętrzny kontur w zwykły obiekt z wypełnieniem. Geometria nadal istnieje, ale jej relacja z zewnętrznym konturem zostaje utracona.

Przywróć ją na kopii:

1. Zaznacz zewnętrzny kontur i tylko te kontury, które mają tworzyć otwory.
2. Użyj Make Compound Path (utwórz ścieżkę złożoną), Combine (połącz) lub odpowiedniego polecenia.
3. Nadaj wynikowemu obiektowi jedno wypełnienie.
4. Sprawdź regułę wypełnienia.
5. Ponownie otwórz zapisany SVG w przeglądarce i aplikacji docelowej.

Aktualna dokumentacja ścieżek złożonych Adobe opisuje ten sam model: ścieżki składowe wyznaczają obszary wypełnione i przezroczyste zgodnie z regułą wypełnienia.

Przywróć relację, a nie tylko wygląd

W przypadku grafiki do stempli sprawdź geometrię wypukłych i wklęsłych stempli do ceramiki, zanim zdecydujesz, które obszary mają pozostać wypełnione.

Sprawdź nonzero i evenodd

SVG ma dwie reguły wypełnienia. Specyfikacja malowania SVG 2 określa nonzero jako wartość początkową i definiuje evenodd jako drugą opcję.

• nonzero zlicza przecięcia ścieżki z uwzględnieniem znaku. Wewnętrzny kontur o niewłaściwym kierunku może dodawać wypełnienie zamiast je znosić.
• evenodd zlicza przecięcia. Punkt otoczony dwukrotnie znajduje się poza wypełnieniem, więc prosty zagnieżdżony kontur staje się otworem niezależnie od swojego kierunku.

Ta minimalna ścieżka zawiera dwa prostokąty o tym samym kierunku. Przy evenodd środek pozostaje przezroczysty:

<path
  fill="#2563eb"
  fill-rule="evenodd"
  d="M10 10H90V90H10Z M30 30H70V70H30Z"
/>

Zmiana reguły jest przydatna, gdy odpowiada założeniom projektu, ale nie jest uniwersalną naprawą. Oba kontury nadal muszą być interpretowane jako podścieżki tego samego kształtu. Ustawienie fill-rule="evenodd" na dwóch niezależnych obiektach nie sprawi, że jeden wytnie otwór w drugim.

Jeśli pozostajesz przy nonzero, odwróć tylko wewnętrzny kontur, o ile Twój edytor udostępnia takie polecenie. Illustrator oferuje obie reguły wypełnienia oraz kontrolę kierunku ścieżek w ścieżkach złożonych. Zapisz kopię, zanim cokolwiek odwrócisz, ponieważ samoprzecięcia i wiele zagnieżdżonych świateł liter mogą dać inny wynik niż prosty pierścień.

Gdy SVG jest poprawny, ale importer działa nieprawidłowo

Niektóre narzędzia do cięcia, CAD, 3D i animacji obsługują tylko ograniczony zakres funkcji SVG. Przeglądarka może poprawnie renderować ścieżkę złożoną, podczas gdy aplikacja docelowa importuje każdy kontur jako pełny obiekt.

Naprawiaj w tej kolejności:

1. Zapisz uproszczoną kopię w edytorze źródłowym.
2. Zamień edytowalny tekst na kontury w tej kopii, jeśli problem dotyczy importu tekstu.
3. Zastąp maski, obszary przycinania i efekty wyglądu zwykłą geometrią ścieżek tylko tam, gdzie to potrzebne.
4. Zachowaj każdy planowany otwór razem z jego zewnętrznym konturem jako jedną ścieżkę złożoną.
5. Świadomie przetestuj evenodd i nonzero, zamiast wielokrotnie przełączać je bez planu.
6. Jeśli importer nadal wypełnia otwór, zaimportuj oba kontury i odejmij wewnętrzny profil w aplikacji docelowej.

Przy wyciąganiu aplikacja docelowa musi też rozpoznawać zamknięty profil, który można zaznaczyć. Poradnik diagnozowania problemów z wyciąganiem SVG omawia otwarte końce ścieżek, duplikaty i poprawność profilu, gdy udało się już zachować otwór.

Gdy wektoryzacja zamknęła otwór

Narzędzie do wektoryzacji może zamknąć światło litery o małym rozmiarze lub złączyć krawędzie wąskiej szczeliny, jeśli obraz rastrowy jest mały, rozmyty albo ma niski kontrast. To problem geometrii, a nie reguły wypełnienia: wewnętrzny kontur w ogóle nie trafił do SVG.

Wróć do źródłowego obrazu rastrowego i:

• powiększ go lub pozyskaj ponownie bez dodawania rozmycia;
• zwiększ odstęp wokół istotnego otworu;
• usuń artefakty kompresji w pobliżu szczeliny;
• zmniejsz wygładzanie lub łączenie kolorów, jeśli narzędzie udostępnia te ustawienia;
• porównaj nowy wynik wektoryzacji w docelowym rozmiarze.

W tym przypadku PerfectVector może pomóc. Skorzystaj z wektoryzacji obrazu, gdy masz oryginalny obraz rastrowy i potrzebujesz nowego SVG. Przed pobraniem sprawdź każde światło litery i każdą przestrzeń negatywową. Jeśli SVG był poprawny, dopóki edytor nie rozdzielił jego ścieżek złożonych, napraw ten SVG; ponowna wektoryzacja nie odzyska utraconej historii edycji.

Takie samo podejście, zaczynające się od obrazu źródłowego, przydaje się przy liternictwie. Poradnik wektoryzacji ręcznego liternictwa pokazuje, jak zachować otwarte małe światła liter bez pozbawiania całego rysunku charakteru.

Bezpieczna kontrola końcowa

Zanim wyślesz naprawiony SVG:

• obejrzyj go na jasnym, ciemnym i przezroczystym tle;
• zaznacz dany obiekt i potwierdź, że tworzy jedną ścieżkę złożoną zgodnie z zamierzeniem;
• sprawdź regułę wypełnienia w edytorze lub kodzie źródłowym SVG;
• sprawdź każde światło litery, pierścień i zamkniętą przestrzeń negatywową;
• ponownie otwórz wyeksportowany plik, zamiast polegać na niezapisanym obszarze roboczym;
• przetestuj konkretną aplikację docelową;
• przechowuj osobno edytowalny plik źródłowy i uproszczoną kopię do przekazania.

Jeśli obiekt zaznacza się teraz jako jedna całość, może to być poprawne. Ścieżka złożona z założenia jest jednym obiektem. Zajrzyj do poradnika rozgrupowywania SVG, zanim ponownie ją rozdzielisz.

Najczęściej zadawane pytania

Dlaczego otwory wypełniły się po użyciu Break Apart? Break Apart oddzieliło wewnętrzne kontury od zewnętrznej ścieżki złożonej. Dawne otwory stały się zwykłymi obiektami z wypełnieniem. Cofnij polecenie lub ponownie połącz każdy zewnętrzny kontur z właściwymi wewnętrznymi konturami, a następnie sprawdź regułę wypełnienia.

Czy do otworów w SVG używać fill-rule="evenodd"? evenodd często jest wygodne przy zagnieżdżonych konturach, ponieważ kierunek konturu nie decyduje o wyniku. Nadal działa jednak w obrębie jednego kształtu; nie odejmuje osobnego obiektu. Pozostań przy nonzero, jeśli plik źródłowy i aplikacja docelowa zachowują zamierzone kierunki konturów.

Dlaczego SVG wygląda poprawnie w przeglądarce, ale w mojej aplikacji jest całkowicie wypełniony? Importer aplikacji docelowej może nie zachowywać ścieżki złożonej, reguły wypełnienia, maski lub kierunku konturu. Uprość kopię do zwykłych ścieżek, a następnie przetestuj ją ponownie. W razie potrzeby zaimportuj kontury zewnętrzny i wewnętrzny oraz odejmij otwór w aplikacji docelowej.

Czy mogę zrobić otwór, umieszczając biały kształt na wierzchu? To tylko imituje otwór na białym tle. Biały obiekt pozostaje wypełniony, więc może zostać wydrukowany, wycięty lub zaimportowany jako kolejny pełny kształt. Użyj ścieżki złożonej, odejmowania lub innej struktury zapewniającej przezroczystość, gdy tło ma prześwitywać.

Czy PerfectVector może naprawić wypełnione otwory w istniejącym SVG? PerfectVector przydaje się, gdy możesz wrócić do odpowiedniego obrazu rastrowego i przeprowadzić nową wektoryzację z widocznymi zamierzonymi otworami. Nie naprawia ścieżki złożonej, którą edytor rozdzielił lub importer zignorował. Napraw te relacje w edytorze grafiki wektorowej lub aplikacji docelowej.

Źródła

1. W3C — SVG 2 Painting — Definiuje nonzero, evenodd i początkową wartość reguły wypełnienia.
2. W3C — SVG Paths — Definiuje ścieżki, podścieżki i geometrię zamkniętych ścieżek.
3. Adobe Illustrator — Create compound paths — Dokumentuje otwory w ścieżkach złożonych, reguły wypełnienia i odwracanie kierunku ścieżek składowych.
4. PerfectVector — Image to Vector — Aktualny proces przekształcania obrazu rastrowego w SVG, stosowany w opisanym wariancie wymagającym ponownej wektoryzacji.

Jeśli otwór zniknął podczas wektoryzacji obrazu rastrowego, utwórz nową grafikę wektorową z czystego obrazu źródłowego i sprawdź każde światło litery przed przekazaniem pliku. Jeśli wersja w przeglądarce jest już poprawna, zachowaj tę geometrię i napraw tylko import, który powoduje problem.