6 typowych błędów SVG (i jak je naprawić)

Ktoś ostatnio zapytał mnie, jak podchodzę do debugowania wbudowanych plików SVG. Ponieważ jest to część DOM, możemy sprawdzić dowolny wbudowany SVG w dowolnej przeglądarce DevTools. Dzięki temu mamy możliwość zbadania zakresu i odkrycia wszelkich potencjalnych problemów lub możliwości optymalizacji SVG.

Ale czasami w ogóle nie możemy zobaczyć naszych plików SVG. W takich przypadkach podczas debugowania szukam sześciu konkretnych rzeczy.

1. viewBox wartości

Połączenia viewBox jest częstym punktem nieporozumień podczas pracy z SVG. Z technicznego punktu widzenia używanie wbudowanego pliku SVG bez niego jest w porządku, ale stracilibyśmy jedną z jego najważniejszych zalet: skalowanie z kontenerem. Jednocześnie może działać przeciwko nam, gdy jest niewłaściwie skonfigurowany, powodując niechciane przycinanie.

Elementy są tam, kiedy są przycięte — po prostu znajdują się w części układu współrzędnych, której nie widzimy. Gdybyśmy otworzyli plik w jakimś programie do edycji grafiki, mógłby wyglądać tak:

Najłatwiej to naprawić? Dodać overflow="visible" do pliku SVG, niezależnie od tego, czy znajduje się on w naszym arkuszu stylów, w wierszu w pliku style atrybut lub bezpośrednio jako atrybut prezentacji SVG. Ale jeśli zastosujemy również a background-color do SVG lub jeśli mamy wokół niego inne elementy, wszystko może wyglądać trochę nie tak. W takim przypadku najlepszą opcją będzie edycja pliku viewBox aby pokazać tę część układu współrzędnych, która była ukryta:

Jest kilka dodatkowych rzeczy dot viewBox które warto omówić, skoro już jesteśmy przy temacie:

W jaki sposób viewBox działa?

SVG to nieskończone płótno, ale możemy kontrolować to, co widzimy i jak to widzimy przez rzutnię i viewBox.

Połączenia rzutnia to rama okienna na nieskończonym płótnie. Jego wymiary są określone przez width i height atrybuty lub w CSS z odpowiednimi width i height nieruchomości. Możemy określić dowolną jednostkę długości, ale jeśli podajemy liczby bez jednostek, domyślnie są to piksele.

Połączenia viewBox jest zdefiniowany przez cztery wartości. Pierwsze dwa to punkt początkowy w lewym górnym rogu (x i y wartości, dozwolone liczby ujemne). Edytuję je, aby ponownie wykadrować obraz. Dwa ostatnie to szerokość i wysokość układu współrzędnych wewnątrz rzutni — w tym miejscu możemy edytować skalę siatki (do której przejdziemy w sekcji Powiększanie).

Oto uproszczone znaczniki przedstawiające plik SVG viewBox oraz width i height atrybuty ustawione na <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

Przeformułowanie

Więc to:

<svg viewBox="0 0 700 700">

… mapuje do tego:

<svg viewBox="start-x-axis start-y-axis width height">

Widok, który widzimy, zaczyna się gdzie 0 na osi x i 0 na osi Y spotykają się.

Zmieniając to:

<svg viewBox="0 0 700 700">

…do tego:

<svg viewBox="300 200 700 700">

…szerokość i wysokość pozostają takie same (700 jednostek każdy), ale początek układu współrzędnych znajduje się teraz w 300 punkt na osi x i 200 na osi Y.

W poniższym filmie dodaję czerwony <circle> do SVG ze środkiem w 300 punkt na osi x i 200 na osi Y. Zwróć uwagę, jak zmienia się viewBox współrzędnych na te same wartości zmienia również położenie okręgu w lewym górnym rogu ramki, podczas gdy renderowany rozmiar pliku SVG pozostaje taki sam (700×700). Wszystko, co zrobiłem, to „przeformułować” rzeczy za pomocą viewBox.

Powiększanie

Możemy zmienić dwie ostatnie wartości wewnątrz pliku viewBox aby powiększyć lub pomniejszyć obraz. Im większe wartości, tym więcej jednostek SVG jest dodawanych w celu dopasowania do rzutni, co skutkuje mniejszym obrazem. Jeśli chcemy zachować stosunek 1:1, nasz viewBox szerokość i wysokość muszą odpowiadać naszym wartościom szerokości i wysokości rzutni.

Zobaczmy, co stanie się w programie Illustrator, gdy zmienimy te parametry. Obszar roboczy to viewport który jest reprezentowany przez biały kwadrat 700px. Wszystko inne poza tym obszarem to nasze nieskończone płótno SVG i jest domyślnie przycinane.

Rysunek 1 poniżej pokazuje niebieską kropkę w 900 wzdłuż osi x i 900 wzdłuż osi y. Jeśli zmienię dwa ostatnie viewBox wartości od 700 do 900 lubię to:

<svg viewBox="300 200 900 900" width="700" height="700">

… wtedy niebieska kropka jest prawie w pełni widoczna, jak pokazano na rysunku 2 poniżej. Nasz obraz został zmniejszony, ponieważ zwiększyliśmy wartości viewBox, ale rzeczywista szerokość i wysokość SVG pozostały takie same, a niebieska kropka znalazła się z powrotem bliżej nieprzyciętego obszaru.

Różowy kwadrat jest dowodem na to, jak siatka skaluje się, aby dopasować ją do rzutni: jednostka staje się mniejsza, a więcej linii siatki mieści się w tym samym obszarze rzutni. Możesz grać z tymi samymi wartościami w następującym Pióro, aby zobaczyć, jak to działa:

2. Brak width i height

Inną powszechną rzeczą, na którą patrzę podczas debugowania wbudowanego SVG, jest to, czy znaczniki zawierają width or height atrybuty. W wielu przypadkach nie jest to wielka sprawa, chyba że plik SVG znajduje się w pojemniku z pozycjonowaniem bezwzględnym lub kontenerze elastycznym (ponieważ Safari oblicza plik SVG width wartość z 0px zamiast auto). Wyłączając width or height w takich przypadkach uniemożliwia nam zobaczenie pełnego obrazu, jak możemy zobaczyć otwierając to demo CodePen i porównując je w Chrome, Safari i Firefox (dotknij obrazów, aby powiększyć widok).

Rozwiązanie? Dodaj szerokość lub wysokość, czy to jako atrybut prezentacji, wbudowany w atrybucie style, czy też w CSS. Unikaj używania samej wysokości, zwłaszcza gdy jest ustawiona na 100% or auto. Innym obejściem jest ustaw prawo i lewe wartości.

Możesz się pobawić następujące pióro i połączyć różne opcje.

3. Nieumyślne fill i stroke zabarwienie

Może się też zdarzyć, że nakładamy na nie kolor <svg> tag, niezależnie od tego, czy jest to styl wbudowany, czy pochodzący z CSS. To dobrze, ale w znacznikach lub stylach mogą występować inne wartości kolorów, które kolidują z kolorem ustawionym w pliku <svg>, powodując, że części stają się niewidoczne.

Dlatego staram się szukać tzw fill i stroke atrybuty w znacznikach SVG i wymazać je. Poniższy film przedstawia SVG I stylizowany w CSS z czerwonym fill. Istnieje kilka przypadków, w których części SVG są wypełnione na biało bezpośrednio w znacznikach, które usunąłem, aby odsłonić brakujące elementy.

4. Brakujące identyfikatory

To może wydawać się bardzo oczywiste, ale zdziwiłbyś się, jak często widzę, że się pojawia. Załóżmy, że utworzyliśmy plik SVG w programie Illustrator i bardzo skrupulatnie nadaliśmy naszym warstwom nazwy, tak aby podczas eksportowania pliku uzyskać ładne pasujące identyfikatory w znacznikach. Powiedzmy, że planujemy stylizować ten SVG w CSS, podłączając się do tych identyfikatorów.

To dobry sposób na robienie rzeczy. Ale jest wiele razy, kiedy widziałem ten sam plik SVG wyeksportowany po raz drugi do tej samej lokalizacji, a identyfikatory są różne, zwykle podczas bezpośredniego kopiowania/wklejania wektorów. Może dodano nową warstwę, zmieniono nazwę jednej z istniejących lub coś w tym rodzaju. W każdym razie reguły CSS nie pasują już do identyfikatorów w znacznikach SVG, co powoduje, że SVG renderuje się inaczej, niż można by się spodziewać.

W dużych plikach SVG możemy mieć trudności ze znalezieniem tych identyfikatorów. To dobry moment, aby otworzyć DevTools, sprawdzić tę część grafiki, która nie działa, i sprawdzić, czy te identyfikatory nadal pasują.

Powiedziałbym więc, że warto otworzyć wyeksportowany plik SVG w edytorze kodu i porównać go z oryginałem przed wymianą. Aplikacje takie jak Illustrator, Figma i Sketch są inteligentne, ale to nie znaczy, że nie jesteśmy odpowiedzialni za ich weryfikację.

5. Lista kontrolna przycinania i maskowania

Jeśli plik SVG zostanie nieoczekiwanie przycięty, a plik viewBox sprawdza się dobrze, zwykle patrzę na CSS clip-path or mask właściwości, które mogą zakłócać obraz. Ciągłe patrzenie na wbudowane znaczniki jest kuszące, ale warto pamiętać, że styl SVG może mieć miejsce gdzie indziej.

Przycinanie i maskowanie CSS pozwalają nam „ukryć” części obrazu lub elementu. w formacie SVG, <clipPath> jest operacją wektorową, która wycina części obrazu bez wyników w połowie. The <mask> tag to operacja na pikselach, która umożliwia przezroczystość, efekty półprzezroczystości i rozmyte krawędzie.

Oto mała lista kontrolna dotycząca przypadków debugowania, w których występuje obcinanie i maskowanie:

• Upewnij się, że ścieżka przycinania (lub maska) i grafika nakładają się na siebie. Wyświetlane są nakładające się części.
• Jeśli masz złożoną ścieżkę, która nie przecina twojej grafiki, spróbuj zastosować przekształcenia, aż będą pasować.
• Nadal możesz sprawdzić wewnętrzny kod za pomocą DevTools, mimo że <clipPath> or <mask> nie są renderowane, więc używaj ich!
• Skopiuj znaczniki w środku <clipPath> i <mask> i wklej go przed zamknięciem </svg> etykietka. Następnie dodaj A fill do tych kształtów i sprawdź współrzędne i wymiary SVG. Jeśli nadal nie widzisz obrazu, spróbuj dodać overflow="hidden" do <svg> etykietka.
• Sprawdź, czy wyjątkowy Identyfikator służy do <clipPath> or <mask>i że ten sam identyfikator jest stosowany do kształtów lub grup kształtów, które są przycinane lub maskowane. Niedopasowany identyfikator zepsuje wygląd.
• Sprawdź literówki w znacznikach między <clipPath> or <mask> tagi.
• fill, stroke, opacitylub inne style zastosowane do elementów wewnątrz <clipPath> są bezużyteczne — jedyną użyteczną częścią jest geometria obszaru wypełnienia tych elementów. Dlatego jeśli używasz a <polyline> będzie się zachowywał jak <polygon> a jeśli używasz <line> nie zobaczysz żadnego efektu przycinania.
• Jeśli nie widzisz obrazu po zastosowaniu a <mask>, upewnij się, że fill treści maskującej nie jest całkowicie czarny. Jasność elementu maskującego decyduje o przezroczystości finalnej grafiki. Będziesz mógł widzieć przez jaśniejsze części, a ciemniejsze części ukryją zawartość twojego obrazu.

Możesz bawić się zamaskowanymi i przyciętymi elementami ten długopis.

6. Przestrzenie nazw

Czy wiesz, że SVG to język znaczników oparty na XML? No cóż, tak jest! Przestrzeń nazw dla SVG jest ustawiona na xmlns atrybut:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

Dużo trzeba wiedzieć o przestrzeniach nazw w XML, a MDN ma na ten temat świetny elementarz. Wystarczy powiedzieć, że przestrzeń nazw zapewnia kontekst przeglądarce, informując ją, że znaczniki są specyficzne dla SVG. Pomysł polega na tym, że przestrzenie nazw pomagają zapobiegać konfliktom, gdy w tym samym pliku znajduje się więcej niż jeden typ XML, na przykład SVG i XHTML. Jest to znacznie mniej powszechny problem w nowoczesnych przeglądarkach, ale może pomóc wyjaśnić problemy z renderowaniem SVG w starszych przeglądarkach lub przeglądarkach, takich jak Gecko, które są surowe podczas definiowania typów dokumentów i przestrzeni nazw.

Specyfikacja SVG 2 nie wymaga przestrzeni nazw przy użyciu składni HTML. Jednak to jest kluczowe jeśli priorytetem jest obsługa starszych przeglądarek — a dodanie jej nie zaszkodzi. W ten sposób, kiedy <html> elementy xmlns atrybut jest zdefiniowany, nie będzie on powodował konfliktu w tych rzadkich przypadkach.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Dotyczy to również używania wbudowanego pliku SVG w CSS, na przykład ustawiania go jako obrazu tła. W poniższym przykładzie po pomyślnym sprawdzeniu poprawności na danych wejściowych pojawia się ikona znacznika wyboru. Tak wygląda CSS:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Kiedy usuniemy przestrzeń nazw wewnątrz pliku SVG we właściwości tła, obraz znika:

Innym popularnym prefiksem przestrzeni nazw jest xlink:href. Używamy go często, gdy odwołujemy się do innych części SVG, takich jak: wzory, filtry, animacje lub gradienty. Zaleceniem jest, aby zacząć go zastępować href ponieważ drugi jest przestarzały od SVG 2, ale mogą występować problemy ze zgodnością ze starszymi przeglądarkami. W takim przypadku możemy użyć obu. Pamiętaj tylko o uwzględnieniu przestrzeni nazw xmlns:xlink="http://www.w3.org/1999/xlink" jeśli nadal używasz xlink:href.

Podnieś swoje umiejętności SVG!

Mam nadzieję, że te wskazówki pomogą Ci zaoszczędzić mnóstwo czasu, jeśli znajdziesz się w rozwiązywaniu problemów z nieprawidłowo renderowanymi wbudowanymi plikami SVG. To są właśnie rzeczy, których szukam. Może masz inne czerwone flagi, na które zwracasz uwagę — jeśli tak, powiedz mi o tym w komentarzach!

Najważniejsze jest to, że opłaca się mieć przynajmniej podstawową wiedzę różne sposoby wykorzystania SVG. Wyzwania CodePen często zawierają SVG i oferują dobre praktyki. Oto kilka dodatkowych zasobów, które pomogą Ci awansować:

Jest kilka osób, które sugeruję śledzić za dobroć związaną z SVG:

• Dystrybucja treści i PR oparta na SEO. Uzyskaj wzmocnienie już dziś.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. Dostęp tutaj.
• Źródło: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/