6 pogostih napak SVG (in kako jih popraviti)

Nedavno me je nekdo vprašal, kako se lotim odpravljanja napak v vgrajenih SVG. Ker je del DOM-a, lahko pregledamo kateri koli vgrajeni SVG v katerem koli brskalniku DevTools. In zaradi tega imamo možnost, da zadeve razčlenimo in odkrijemo morebitne težave ali priložnosti za optimizacijo SVG.

Toda včasih sploh ne moremo videti naših datotek SVG. V teh primerih je šest posebnih stvari, ki jih iščem, ko odpravljam napake.

1. viewBox vrednosti

O viewBox je pogosta točka zmede pri delu s SVG. Tehnično je v redu uporabljati vgrajeni SVG brez njega, vendar bi izgubili eno njegovih najpomembnejših prednosti: skaliranje z vsebnikom. Hkrati lahko deluje proti nam, če je nepravilno konfiguriran, kar povzroči neželeno izrezovanje.

Elementi so tam, ko so obrezani – so le v delu koordinatnega sistema, ki ga ne vidimo. Če bi datoteko odprli v kakšnem programu za urejanje grafike, bi lahko izgledala takole:

Kako to najlažje odpraviti? Dodaj overflow="visible" v SVG, ne glede na to, ali je v naši tabeli slogov, v vrstici na style ali neposredno kot atribut predstavitve SVG. Če pa uporabimo tudi a background-color v SVG ali če imamo okoli njega druge elemente, se stvari morda zdijo nekoliko napačne. V tem primeru bo najboljša možnost urediti viewBox za prikaz tistega dela koordinatnega sistema, ki je bil skrit:

Obstaja nekaj dodatnih stvari o viewBox ki jih je vredno obravnavati, ko smo že pri tej temi:

Kako viewBox delo?

SVG je neskončno platno, vendar lahko nadzorujemo, kaj vidimo in kako to vidimo skozi vidno polje in viewBox.

O pogled je okenski okvir na neskončnem platnu. Njegove dimenzije so določene z width in height atributi ali v CSS z ustreznimi width in height lastnosti. Določimo lahko katero koli dolžinsko enoto, ki jo želimo, vendar če podamo števila brez enot, so privzeto piksli.

O viewBox definirajo štiri vrednosti. Prvi dve sta začetna točka v zgornjem levem kotu (x in y vrednosti, dovoljena negativna števila). Urejam jih, da preoblikujem sliko. Zadnji dve sta širina in višina koordinatnega sistema znotraj vidnega polja — tu lahko uredimo merilo mreže (ki ga bomo obravnavali v razdelku o Zooming).

Tukaj je poenostavljena oznaka, ki prikazuje SVG viewBox in width in height atributa, oba nastavljena na <svg>:

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

Preoblikovanje

Torej, tole:

<svg viewBox="0 0 700 700">

... preslikave v to:

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

Razgledno polje, ki ga vidimo, se začne tam 0 na osi x in 0 na osi y srečata.

S spremembo tega:

<svg viewBox="0 0 700 700">

…za to:

<svg viewBox="300 200 700 700">

…širina in višina ostaneta enaki (700 vsaka enota), vendar je začetek koordinatnega sistema zdaj na 300 točka na osi x in 200 na y-osi.

V naslednjem videu dodajam rdečo <circle> v SVG s središčem na 300 točka na osi x in 200 na y-osi. Opazite, kako se spreminja viewBox koordinate na iste vrednosti spremeni tudi postavitev kroga v zgornji levi kot okvirja, medtem ko upodobljena velikost SVG ostane enaka (700×700). Vse, kar sem naredil, je bilo "preoblikovati" stvari z viewBox.

Zooming

Zadnji dve vrednosti lahko spremenimo znotraj viewBox za povečavo ali pomanjšanje slike. Večje kot so vrednosti, več enot SVG je dodanih, da se prilegajo v vidno polje, zaradi česar je slika manjša. Če želimo ohraniti razmerje 1:1, naš viewBox širina in višina se morata ujemati z našimi vrednostmi širine in višine vidnega polja.

Poglejmo, kaj se zgodi v Illustratorju, ko spremenimo te parametre. Umetna plošča je viewport ki je predstavljen z belim kvadratom velikosti 700 slikovnih pik. Vse ostalo zunaj tega območja je naše neskončno platno SVG in se privzeto striže.

Slika 1 spodaj prikazuje modro piko na 900 vzdolž osi x in 900 vzdolž osi y. Če spremenim zadnja dva viewBox vrednosti iz 700 do 900 Všečkaj to:

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

… potem je modra pika skoraj v celoti vidna, kot je prikazano na sliki 2 spodaj. Naša slika je pomanjšana, ker smo povečali vrednosti viewBox, vendar sta dejanski dimenziji širine in višine SVG ostali enaki, modra pika pa se je vrnila bližje neodrezanemu območju.

Obstaja rožnati kvadrat kot dokaz, kako se mreža spreminja, da se prilega vidnemu oknu: enota postane manjša in več mrežnih črt se prilega istemu vidnemu polju. Igrate se lahko z enakimi vrednostmi v naslednjem peresu in si ogledate, kako delujejo:

2. Manjka width in height

Druga pogosta stvar, na katero gledam pri odpravljanju napak v vgrajenem SVG, je, ali oznaka vsebuje width or height lastnosti. V mnogih primerih to ni nič posebnega, razen če je SVG znotraj vsebnika z absolutnim položajem ali prilagodljivega vsebnika (kot Safari izračuna SVG width vrednost z 0px Namesto auto). Izključitev width or height v teh primerih nam preprečuje, da bi videli celotno sliko, kot jo lahko vidimo odpiranje te predstavitve CodePen in primerjava v Chromu, Safariju in Firefoxu (tapnite slike za večji prikaz).

Rešitev? Dodajte širino ali višino kot predstavitveni atribut, vstavljen v atribut sloga ali v CSS. Izogibajte se uporabi višine same po sebi, zlasti če je nastavljena na 100% or auto. Druga rešitev je nastavite desno in leve vrednosti.

Lahko se igrate z naslednje pero in združite različne možnosti.

3. Nehote fill in stroke Barve

Lahko se tudi zgodi, da nanašamo barvo na <svg> ne glede na to, ali gre za slog v vrstici ali prihaja iz CSS. To je v redu, vendar so lahko druge barvne vrednosti v celotnem označevanju ali slogih, ki so v nasprotju z barvo, nastavljeno na <svg>, zaradi česar so deli nevidni.

Zato ponavadi iščem fill in stroke atribute v oznaki SVG in jih izbrišite. Naslednji video prikazuje SVG, ki sem ga oblikoval v CSS z rdečo fill. Obstaja nekaj primerov, ko so deli SVG zapolnjeni z belo neposredno v oznaki, ki sem jo odstranil, da bi razkril manjkajoče dele.

4. Manjkajoči ID-ji

Ta se morda zdi zelo očiten, vendar bi bili presenečeni, kako pogosto ga vidim. Recimo, da smo naredili datoteko SVG v Illustratorju in smo bili zelo skrbni pri poimenovanju naših plasti, tako da boste pri izvozu datoteke dobili lepe ujemajoče se ID-je v oznakah. In recimo, da nameravamo stilizirati ta SVG v CSS tako, da se povežemo s temi ID-ji.

To je lep način za početje stvari. Vendar sem velikokrat videl isto datoteko SVG, izvoženo drugič na isto lokacijo, ID-ji pa so bili drugačni, običajno pri neposrednem kopiranju/lepljenju vektorjev. Morda je bila dodana nova plast ali je bila ena od obstoječih preimenovana ali kaj podobnega. Ne glede na to se pravila CSS ne ujemajo več z ID-ji v oznaki SVG, zaradi česar se SVG upodablja drugače, kot bi pričakovali.

V velikih datotekah SVG bomo te ID-je morda težko našli. To je pravi čas, da odprete DevTools, pregledate tisti del grafike, ki ne deluje, in preverite, ali se ti ID-ji še ujemajo.

Torej, rekel bi, da je vredno odpreti izvoženo datoteko SVG v urejevalniku kode in jo primerjati z izvirnikom, preden stvari zamenjate. Aplikacije, kot so Illustrator, Figma in Sketch, so pametne, vendar to ne pomeni, da nismo odgovorni za njihovo preverjanje.

5. Kontrolni seznam za izrezovanje in maskiranje

Če je SVG nepričakovano odrezan in je viewBox preveri v redu, običajno pogledam CSS za clip-path or mask lastnosti, ki bi lahko motile sliko. Mamljivo je še naprej gledati vstavljene oznake, vendar se je dobro spomniti, da se slog SVG morda dogaja drugje.

CSS izrezovanje in maskiranje omogočajo, da »skrijemo« dele slike ali elementa. V SVG, <clipPath> je vektorska operacija, ki izreže dele slike brez polovičnih rezultatov. The <mask> je operacija slikovnih pik, ki omogoča prosojnost, učinke polprosojnosti in zamegljene robove.

To je majhen kontrolni seznam za primere odpravljanja napak, kjer gre za izrezovanje in maskiranje:

• Prepričajte se, da se izrezovalna pot (ali maska) in grafika prekrivata. Prikazani so prekrivajoči se deli.
• Če imate zapleteno pot, ki ne seka vaše grafike, poskusite uporabiti transformacije, dokler se ne ujemajo.
• Še vedno lahko pregledate notranjo kodo z orodji DevTools, čeprav je <clipPath> or <mask> niso upodobljene, zato jih uporabite!
• Kopirajte oznako znotraj <clipPath> in <mask> in ga prilepite, preden zaprete </svg> oznaka. Nato dodajte a fill na te oblike in preverite koordinate in dimenzije SVG. Če še vedno ne vidite slike, poskusite dodati overflow="hidden" k <svg> oznaka.
• Preverite, da a edinstven ID se uporablja za <clipPath> or <mask>in da je isti ID uporabljen za oblike ali skupine oblik, ki so odrezane ali maskirane. Neujemajoča se ID bo pokvarila videz.
• Preverite tipkarske napake v oznakah med <clipPath> or <mask> oznake.
• fill, stroke, opacity, ali kakšni drugi slogi, uporabljeni za elemente v notranjosti <clipPath> so neuporabni - edini uporaben del je geometrija polnilne regije teh elementov. Zato, če uporabljate a <polyline> se bo obnašal kot a <polygon> in če uporabljate a <line> ne boste videli nobenega učinka izrezovanja.
• Če po uporabi a. ne vidite svoje slike <mask>, se prepričajte, da je fill maskirne vsebine ni povsem črna. Svetlost maskirnega elementa določa motnost končne grafike. Lahko boste videli skozi svetlejše dele, temnejši deli pa bodo skrili vsebino vaše slike.

Igrate se lahko z maskiranimi in odrezanimi elementi to pero.

6. Imenski prostori

Ali ste vedeli, da je SVG označevalni jezik, ki temelji na XML? No, saj je! Imenski prostor za SVG je nastavljen na xmlns atribut:

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

Veliko je treba vedeti o imenskem prostoru v XML in MDN ima odličen primer za to. Dovolj je reči, da imenski prostor brskalniku zagotavlja kontekst in ga obvešča, da je oznaka specifična za SVG. Ideja je, da imenski prostori pomagajo preprečiti konflikte, ko je v isti datoteki več kot ena vrsta XML, na primer SVG in XHTML. To je veliko manj pogosta težava v sodobnih brskalnikih, vendar bi lahko pomagala razložiti težave z upodabljanjem SVG v starejših brskalnikih ali brskalnikih, kot je Gecko, ki so strogi pri definiranju doctypes in imenskih prostorov.

Specifikacija SVG 2 ne zahteva imenskega prostora pri uporabi sintakse HTML. Ampak to je ključnega pomena če je podpora za starejše brskalnike prednostna naloga — poleg tega ne škodi, če jo dodate. Na ta način, ko <html> elementov xmlns definiran, v teh redkih primerih ne bo v nasprotju.

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

To velja tudi pri uporabi vgrajenega SVG v CSS, na primer pri nastavitvi slike za ozadje. V naslednjem primeru se po uspešnem preverjanju na vnosu pojavi ikona kljukice. Tako izgleda 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;
}

Ko odstranimo imenski prostor znotraj SVG v lastnosti ozadja, slika izgine:

Druga pogosta predpona imenskega prostora je xlink:href. Veliko ga uporabljamo pri sklicevanju na druge dele SVG, kot so: vzorci, filtri, animacije ali prelivi. Priporočilo je, da ga začnete nadomeščati z href saj je drugi zastarel od SVG 2, vendar lahko pride do težav z združljivostjo s starejšimi brskalniki. V tem primeru lahko uporabimo oboje. Samo ne pozabite vključiti imenskega prostora xmlns:xlink="http://www.w3.org/1999/xlink" če še uporabljate xlink:href.

Izboljšajte svoje znanje SVG!

Upam, da vam bodo ti nasveti pomagali prihraniti kup časa, če se znajdete pri odpravljanju težav z nepravilno upodobljenimi vgrajenimi datotekami SVG. To so samo stvari, ki jih iščem. Morda imate različne rdeče zastavice, na katere ste pozorni - če je tako, mi povejte v komentarjih!

Bistvo je, da se splača imeti vsaj osnovno razumevanje različne načine uporabe SVG. Izzivi CodePen pogosto vključujejo SVG in ponujajo dobro prakso. Tukaj je še nekaj virov za višjo stopnjo:

Predlagam, da sledite nekaterim ljudem zaradi dobrot, povezanih s SVG:

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/