6 vanliga SVG-fel (och hur man åtgärdar dem)

Någon frågade mig nyligen hur jag närmar mig felsökning av inline SVG:er. Eftersom det är en del av DOM, kan vi inspektera alla inline SVG i alla webbläsares DevTools. Och på grund av det har vi förmågan att kartlägga saker och upptäcka eventuella problem eller möjligheter att optimera SVG.

Men ibland kan vi inte ens se våra SVG:er alls. I dessa fall finns det sex specifika saker som jag letar efter när jag felsöker.

1. Den viewBox värden

Smakämnen viewBox är en vanlig förvirring när man arbetar med SVG. Det är tekniskt bra att använda inline SVG utan det, men vi skulle förlora en av dess viktigaste fördelar: skalning med behållaren. Samtidigt kan det fungera mot oss när det är felaktigt konfigurerat, vilket resulterar i oönskad klippning.

Elementen finns där när de klipps - de är bara i en del av koordinatsystemet som vi inte ser. Om vi ​​skulle öppna filen i något grafikredigeringsprogram kan det se ut så här:

Det enklaste sättet att fixa detta? Lägg till overflow="visible" till SVG, oavsett om det finns i vår stilmall, inline på style attribut eller direkt som ett SVG-presentationsattribut. Men om vi också tillämpar en background-color till SVG eller om vi har andra element runt det, kan saker och ting se lite fel ut. I det här fallet kommer det bästa alternativet att vara att redigera viewBox för att visa den delen av koordinatsystemet som var gömd:

Det finns några ytterligare saker om viewBox som är värda att ta upp när vi är inne på ämnet:

Hur gör viewBox arbete?

SVG är en oändlig duk, men vi kan styra vad vi ser och hur vi ser det genom visningsporten och viewBox.

Smakämnen visningsområde är en fönsterram på den oändliga duken. Dess dimensioner definieras av width och height attribut, eller i CSS med motsvarande width och height egenskaper. Vi kan ange vilken längd vi vill ha, men om vi tillhandahåller siffror utan enhet, är de som standard pixlar.

Smakämnen viewBox definieras av fyra värden. De två första är startpunkten i det övre vänstra hörnet (x och y värden, negativa tal tillåtna). Jag redigerar dessa för att rama om bilden. De två sista är bredden och höjden på koordinatsystemet inuti visningsporten — det är här vi kan redigera rutnätets skala (som vi kommer in på i avsnittet om zoomning).

Här är en förenklad markering som visar SVG viewBox och width och height attribut båda inställda på <svg>:

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

Reframing

Så det här:

<svg viewBox="0 0 700 700">

…kartor till detta:

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

Utsiktsporten vi ser börjar var 0 på x-axeln och 0 på y-axeln möts.

Genom att ändra detta:

<svg viewBox="0 0 700 700">

…till detta:

<svg viewBox="300 200 700 700">

...bredden och höjden förblir desamma (700 enheter vardera), men starten av koordinatsystemet är nu vid 300 punkt på x-axeln och 200 på y-axeln.

I följande video lägger jag till en röd <circle> till SVG med dess centrum vid 300 punkt på x-axeln och 200 på y-axeln. Lägg märke till hur du ändrar viewBox koordinater till samma värden ändrar också cirkelns placering till det övre vänstra hörnet av ramen medan den renderade storleken på SVG förblir densamma (700×700). Allt jag gjorde var att "omformulera" saker med viewBox.

zoomning

Vi kan ändra de två sista värdena inuti viewBox för att zooma in eller ut i bilden. Ju större värden är, desto fler SVG-enheter läggs till för att passa i visningsporten, vilket resulterar i en mindre bild. Om vi ​​vill behålla ett 1:1-förhållande, vår viewBox bredd och höjd måste matcha våra värden för visningsportens bredd och höjd.

Låt oss se vad som händer i Illustrator när vi ändrar dessa parametrar. Rittavlan är viewport som representeras av en vit 700px kvadrat. Allt annat utanför det området är vår oändliga SVG-duk och klipps som standard.

Figur 1 nedan visar en blå prick vid 900 längs x-axeln och 900 längs y-axeln. Om jag ändrar de två sista viewBox värden från 700 till 900 så här:

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

…då är den blå pricken nästan helt synlig igen, som ses i figur 2 nedan. Vår bild är förminskad eftersom vi ökade viewBox-värdena, men SVG:s faktiska bredd- och höjdmått förblev desamma, och den blå pricken tog sig tillbaka närmare det oklippta området.

Det finns en rosa fyrkant som bevis på hur rutnätet skalas för att passa visningsporten: enheten blir mindre och fler rutnätslinjer passar in i samma visningsområde. Du kan spela med samma värden i följande penna för att se hur det fungerar:

2. saknas width och height

En annan vanlig sak jag tittar på när jag felsöker inline SVG är om uppmärkningen innehåller width or height attribut. Detta är ingen stor sak i många fall såvida inte SVG:en är inuti en behållare med absolut positionering eller en flexibel behållare (som Safari beräknar SVG:en width värde med 0px istället för auto). Exklusive width or height i dessa fall hindrar oss från att se hela bilden, som vi kan se av öppnar den här CodePen-demon och jämföra det i Chrome, Safari och Firefox (tryck på bilder för större vy).

Lösningen? Lägg till en bredd eller höjd, antingen som ett presentationsattribut, inline i stilattributet eller i CSS. Undvik att använda höjden ensam, särskilt när den är inställd på 100% or auto. En annan lösning är att ställ in rätt och vänster värden.

Du kan leka med följande Penna och kombinera de olika alternativen.

3. Oavsiktlig fill och stroke färg

Det kan också vara så att vi applicerar färg på <svg> taggen, oavsett om det är en inline-stil eller kommer från CSS. Det är bra, men det kan finnas andra färgvärden i märkningen eller stilar som står i konflikt med färguppsättningen på <svg>, vilket gör att delar blir osynliga.

Det är därför jag tenderar att leta efter fill och stroke attribut i SVG:s uppmärkning och radera dem. Följande video visar en SVG som jag stylat i CSS med en röd fill. Det finns ett par tillfällen där delar av SVG fylls i vitt direkt i markeringen som jag tog bort för att avslöja de saknade bitarna.

4. Saknade ID

Den här kan verka superuppenbar, men du skulle bli förvånad över hur ofta jag ser den dyka upp. Låt oss säga att vi gjorde en SVG-fil i Illustrator och var väldigt noggranna med att namnge våra lager så att du får snygga matchande ID i uppmärkningen när du exporterar filen. Och låt oss säga att vi planerar att styla den där SVG:n i CSS genom att koppla in dessa ID:n.

Det är ett trevligt sätt att göra saker på. Men det finns många gånger där jag har sett samma SVG-fil exporteras en andra gång till samma plats och ID:n är olika, vanligtvis när du kopierar/klistrar in vektorerna direkt. Kanske har ett nytt lager lagts till, eller ett av de befintliga har bytt namn eller något. Hur det än är så matchar CSS-reglerna inte längre ID:n i SVG-uppmärkningen, vilket gör att SVG:en renderas annorlunda än du förväntar dig.

I stora SVG-filer kan vi ha svårt att hitta dessa ID:n. Det här är ett bra tillfälle att öppna DevTools, inspektera den del av grafiken som inte fungerar och se om dessa ID:n fortfarande matchar.

Så jag skulle säga att det är värt att öppna en exporterad SVG-fil i en kodredigerare och jämföra den med originalet innan du byter ut saker. Appar som Illustrator, Figma och Sketch är smarta, men det betyder inte att vi inte är ansvariga för att granska dem.

5. Checklista för klippning och maskering

Om en SVG oväntat klipps ut och viewBox checkar ut okej, jag brukar titta på CSS för clip-path or mask egenskaper som kan störa bilden. Det är frestande att fortsätta titta på inline-markeringen, men det är bra att komma ihåg att en SVG-styling kan hända någon annanstans.

CSS-klippning och maskering tillåta oss att "gömma" delar av en bild eller ett element. I SVG, <clipPath> är en vektoroperation som skär delar av en bild utan halvvägsresultat. De <mask> taggen är en pixeloperation som tillåter transparens, halvtransparenseffekter och suddiga kanter.

Det här är en liten checklista för felsökningsfall där klippning och maskering är inblandade:

• Se till att urklippsbanan (eller masken) och grafiken överlappar varandra. Det är de överlappande delarna som visas.
• Om du har en komplex bana som inte korsar din grafik, försök att tillämpa transformationer tills de matchar.
• Du kan fortfarande inspektera den inre koden med DevTools även om <clipPath> or <mask> är inte renderade, så använd det!
• Kopiera uppmärkningen inuti <clipPath> och <mask> och klistra in den innan du stänger </svg> märka. Lägg sedan till a fill till dessa former och kontrollera SVG:s koordinater och dimensioner. Om du fortfarande inte ser bilden, försök att lägga till overflow="hidden" till <svg> märka.
• Kontrollera att en unika ID används för <clipPath> or <mask>, och att samma ID tillämpas på formerna eller gruppen av former som är klippta eller maskerade. Ett felaktigt ID kommer att bryta utseendet.
• Kontrollera om det finns stavfel i markeringen mellan <clipPath> or <mask> taggar.
• fill, stroke, opacity, eller några andra stilar som appliceras på elementen inuti <clipPath> är värdelösa — den enda användbara delen är geometrin för fyllningsområdet för dessa element. Det är därför om du använder en <polyline> den kommer att bete sig som en <polygon> och om du använder en <line> du kommer inte att se någon klippeffekt.
• Om du inte ser din bild efter att ha applicerat en <mask>, se till att fill av maskeringsinnehållet är inte helt svart. Maskeringselementets luminans bestämmer opaciteten för den slutliga grafiken. Du kommer att kunna se genom de ljusare delarna, och de mörkare delarna kommer att dölja din bilds innehåll.

Du kan leka med maskerade och klippta element i den här pennan.

6. Namnutrymmen

Visste du att SVG är ett XML-baserat märkningsspråk? Jo, det är det! Namnutrymmet för SVG är inställt på xmlns attribut:

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

Det finns mycket att veta om namnavstånd i XML och MDN har en bra primer på det. Det räcker med att säga att namnutrymmet ger webbläsaren sammanhang och informerar den om att uppmärkningen är specifik för SVG. Tanken är att namnutrymmen hjälper till att förhindra konflikter när mer än en typ av XML finns i samma fil, som SVG och XHTML. Detta är ett mycket mindre vanligt problem i moderna webbläsare men kan hjälpa till att förklara SVG-renderingsproblem i äldre webbläsare eller webbläsare som Gecko som är strikta när de definierar dokumenttyper och namnområden.

SVG 2-specifikationen kräver inte namnmellanrum när du använder HTML-syntax. Men det är avgörande om stöd för äldre webbläsare är en prioritet – plus att det inte skadar någonting att lägga till det. På så sätt, när <html> element xmlns attribut är definierat, kommer det inte att stå i konflikt i de sällsynta fallen.

<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>

Detta gäller även när du använder inline SVG i CSS, som att ställa in det som en bakgrundsbild. I följande exempel visas en bockikon på ingången efter framgångsrik validering. Så här ser CSS ut:

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;
}

När vi tar bort namnutrymmet inuti SVG i bakgrundsegenskapen försvinner bilden:

Ett annat vanligt namnområdesprefix är xlink:href. Vi använder det mycket när vi hänvisar till andra delar av SVG som: mönster, filter, animationer eller gradienter. Rekommendationen är att börja ersätta den med href eftersom den andra har fasats ut sedan SVG 2, men det kan finnas kompatibilitetsproblem med äldre webbläsare. I så fall kan vi använda båda. Kom bara ihåg att inkludera namnutrymmet xmlns:xlink="http://www.w3.org/1999/xlink" om du fortfarande använder xlink:href.

Uppgradera dina SVG-kunskaper!

Jag hoppas att dessa tips hjälper dig att spara massor av tid om du hittar dig själv med att felsöka felaktigt återgivna inline SVG:er. Det här är bara de saker jag letar efter. Kanske har du olika röda flaggor som du tittar efter — berätta i så fall för mig i kommentarerna!

Summan av kardemumman är att det lönar sig att ha åtminstone en grundläggande förståelse för de olika sätten SVG kan användas. CodePen-utmaningar använder ofta SVG och erbjuder god praxis. Här är några fler resurser för att nå nivåer:

Det finns några personer jag föreslår att följa för SVG-relaterad godhet:

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/