6 yleistä SVG-virhettä (ja niiden korjaaminen)

Joku kysyi minulta äskettäin, kuinka suhtaudun sisäänrakennettujen SVG-tiedostojen virheenkorjaukseen. Koska se on osa DOM:ia, voimme tarkastaa minkä tahansa inline SVG:n missä tahansa selaimen DevToolsissa. Ja sen ansiosta meillä on mahdollisuus selvittää asioita ja paljastaa mahdolliset ongelmat tai mahdollisuudet optimoida SVG.

Mutta joskus emme edes näe SVG-tiedostojamme ollenkaan. Näissä tapauksissa on kuusi tiettyä asiaa, joita etsin, kun teen virheenkorjauksen.

1. viewBox arvot

- viewBox on yleinen hämmennyskohta SVG:n kanssa työskennellessä. On teknisesti hienoa käyttää inline SVG:tä ilman sitä, mutta menetämme yhden sen merkittävimmistä eduista: skaalauksen säilöllä. Samaan aikaan se voi toimia meitä vastaan, jos se on määritetty väärin, mikä johtaa ei-toivottuihin leikkauksiin.

Elementit ovat olemassa, kun ne leikataan - ne ovat vain koordinaattijärjestelmän osassa, jota emme näe. Jos avaamme tiedoston jossain grafiikan muokkausohjelmassa, se voisi näyttää tältä:

Helpoin tapa korjata tämä? Lisätä overflow="visible" SVG:hen, olipa se sitten tyylisivullamme style attribuutti tai suoraan SVG-esitysattribuutti. Mutta jos käytämme myös a background-color SVG:hen tai jos sen ympärillä on muita elementtejä, asiat saattavat näyttää hieman huonolta. Tässä tapauksessa paras vaihtoehto on muokata viewBox näyttääksesi sen osan koordinaattijärjestelmästä, joka oli piilotettu:

Siinä on muutama lisäasia viewBox joita kannattaa käsitellä, kun olemme aiheesta:

Miten viewBox toimii?

SVG on ääretön kangas, mutta voimme hallita mitä näemme ja miten näemme sen kuvaportin ja viewBox.

- näkymä on ikkunakehys äärettömälle kankaalle. Sen mitat määritellään width ja height attribuutteja tai CSS:ssä vastaavan kanssa width ja height ominaisuuksia. Voimme määrittää minkä tahansa haluamamme pituusyksikön, mutta jos annamme yksiköttömiä lukuja, ne ovat oletuksena pikseleitä.

- viewBox määritellään neljällä arvolla. Kaksi ensimmäistä ovat aloituspiste vasemmassa yläkulmassa (x ja y arvot, negatiiviset luvut sallittu). Muokkaan näitä muokatakseni kuvaa. Kaksi viimeistä ovat koordinaattijärjestelmän leveys ja korkeus katseluportin sisällä – tässä voimme muokata ruudukon mittakaavaa (joihin perehdymme osiossa zoomaus).

Tässä on yksinkertaistettu merkintä, joka näyttää SVG:n viewBox ja width ja height attribuutit ovat molemmat asetettu <svg>:

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

Uudelleen kehystys

Siis tämä:

<svg viewBox="0 0 700 700">

…kartat tähän:

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

Näkymä, jonka näemme, alkaa mistä 0 x-akselilla ja 0 y-akselilla kohtaavat.

Muuttamalla tätä:

<svg viewBox="0 0 700 700">

…tähän:

<svg viewBox="300 200 700 700">

…leveys ja korkeus pysyvät samoina (700 yksikköä), mutta koordinaattijärjestelmän alku on nyt kohdassa 300 piste x-akselilla ja 200 y-akselilla.

Seuraavaan videoon lisään punaisen <circle> SVG:hen, jonka keskipiste on 300 piste x-akselilla ja 200 y-akselilla. Huomaa kuinka muutetaan viewBox koordinaatit samoihin arvoihin muuttaa myös ympyrän paikan kehyksen vasempaan yläkulmaan, kun taas SVG:n renderöity koko pysyy samana (700×700). Tein vain "kehystäni" asioita uudelleen viewBox.

zoomaus

Voimme muuttaa kahta viimeistä arvoa sisällä viewBox lähentää tai loitontaa kuvaa. Mitä suuremmat arvot ovat, sitä enemmän SVG-yksiköitä lisätään näkymään mahtumaan, jolloin kuva on pienempi. Jos haluamme säilyttää 1:1-suhteen, meidän viewBox leveyden ja korkeuden on vastattava näkymän leveys- ja korkeusarvoja.

Katsotaanpa, mitä tapahtuu Illustratorissa, kun muutamme näitä parametreja. Taidetaulu on viewport jota edustaa valkoinen 700 pikseliä neliö. Kaikki muu tämän alueen ulkopuolella on ääretöntä SVG-pohjaamme, ja se leikataan oletuksena.

Alla olevassa kuvassa 1 on sininen piste 900 x-akselia pitkin ja 900 y-akselia pitkin. Jos vaihdan kaksi viimeistä viewBox arvot alkaen 700 että 900 kuten tämä:

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

…sininen piste on melkein kokonaan takaisin näkyvissä, kuten alla olevasta kuvasta 2 näkyy. Kuvaamme on pienennetty, koska lisäsimme viewBox-arvoja, mutta SVG:n todelliset leveys- ja korkeusmitat pysyivät ennallaan ja sininen piste palasi lähemmäs leikkaamatonta aluetta.

Vaaleanpunainen neliö osoittaa, kuinka ruudukko skaalautuu näkymään: yksikkö pienenee ja samalle näkymäalueelle mahtuu enemmän ruudukkoviivoja. Voit pelata samoilla arvoilla seuraavassa kynässä nähdäksesi sen toimivan:

2. puuttuu width ja height

Toinen yleinen asia, jota tarkastelen inline SVG:n virheenkorjauksessa, on, sisältääkö merkinnät width or height attribuutteja. Tämä ei ole iso juttu monissa tapauksissa, ellei SVG ole säilön sisällä, jossa on absoluuttinen sijainti tai joustava kontti (kuten Safari laskee SVG:n width arvo kanssa 0px sijasta auto). Lukuun ottamatta width or height näissä tapauksissa estää meitä näkemästä koko kuvaa, kuten voimme nähdä avaa tämä CodePen-demo ja vertaamalla sitä Chromessa, Safarissa ja Firefoxissa (napauta kuvia nähdäksesi suurempana).

Ratkaisu? Lisää leveys tai korkeus joko esitysattribuuttina, tyyli-attribuutissa tai CSS:ssä. Vältä korkeuden käyttöä sellaisenaan, varsinkin kun se on asetettu 100% or auto. Toinen ratkaisu on aseta oikea ja vasemmat arvot.

Sen kanssa voi leikkiä seuraava kynä ja yhdistele eri vaihtoehtoja.

3. Tahaton fill ja stroke värit

Voi myös olla, että käytämme värejä <svg> -tunnisteen, olipa kyseessä upotettu tyyli tai peräisin CSS:stä. Se on hienoa, mutta merkinnöissä voi olla muita väriarvoja tai tyylejä, jotka ovat ristiriidassa väriasetuksen kanssa <svg>, jolloin osat jäävät näkymättömiksi.

Siksi minulla on tapana etsiä fill ja stroke attribuutit SVG:n merkinnöistä ja pyyhi ne pois. Seuraava video näyttää SVG:n, jonka tyylisin CSS:ssä punaisella fill. On pari tapausta, joissa SVG:n osat on täytetty valkoisella suoraan merkinnöissä, jotka poistin puuttuvien osien paljastamiseksi.

4. Puuttuvat tunnukset

Tämä saattaa tuntua erittäin ilmeiseltä, mutta yllätyt kuinka usein näen sen esiin tulevan. Oletetaan, että teimme SVG-tiedoston Illustratorissa ja olimme erittäin ahkerasti nimeämisessämme tasoillemme, jotta saat kauniit vastaavat tunnukset merkintöihin viedessäsi tiedostoa. Oletetaan, että aiomme muotoilla tuon SVG:n CSS:ssä liittämällä niihin tunnuksia.

Se on mukava tapa tehdä asioita. Mutta on monta kertaa, kun olen nähnyt saman SVG-tiedoston vietynä toisen kerran samaan paikkaan ja tunnukset ovat erilaisia, yleensä kun vektoreita kopioidaan/liitätään suoraan. Ehkä uusi kerros lisättiin tai jokin olemassa olevista nimettiin uudelleen tai jotain. Joka tapauksessa CSS-säännöt eivät enää vastaa SVG-merkinnöissä olevia tunnuksia, minkä vuoksi SVG hahmontuu eri tavalla kuin odotit.

Suurissa SVG-tiedostoissa näitä tunnuksia voi olla vaikea löytää. Tämä on hyvä aika avata DevTools, tarkastaa se osa grafiikkaa, joka ei toimi, ja tarkistaa, vastaavatko tunnukset edelleen.

Joten sanoisin, että kannattaa avata viety SVG-tiedosto koodieditorissa ja verrata sitä alkuperäiseen ennen asioiden vaihtamista. Sovellukset, kuten Illustrator, Figma ja Sketch, ovat älykkäitä, mutta se ei tarkoita, että emme ole vastuussa niiden tarkistamisesta.

5. Leikkaamisen ja peittämisen tarkistuslista

Jos SVG leikataan yllättäen ja viewBox tarkistaa ok, katson yleensä CSS:stä clip-path or mask ominaisuuksia, jotka saattavat häiritä kuvaa. On houkuttelevaa tarkastella tekstin sisäisiä merkintöjä, mutta on hyvä muistaa, että SVG:n tyyli saattaa tapahtua muualla.

CSS-leikkaus ja maskaus antaa meille mahdollisuuden "piilottaa" kuvan tai elementin osia. SVG:ssä <clipPath> on vektoritoiminto, joka leikkaa kuvan osia ilman puoliväliä. The <mask> tag on pikselitoiminto, joka mahdollistaa läpinäkyvyyden, puoliläpinäkyvyystehosteet ja epäselvät reunat.

Tämä on pieni tarkistuslista virheenkorjaustapauksiin, joissa leikkaus ja maskaaminen ovat mukana:

• Varmista, että syväyspolku (tai maski) ja grafiikka menevät päällekkäin. Päällekkäiset osat näytetään.
• Jos sinulla on monimutkainen polku, joka ei leikkaa grafiikkaa, kokeile käyttää muunnoksia, kunnes ne täsmäävät.
• Voit silti tarkistaa sisäisen koodin DevToolsilla, vaikka <clipPath> or <mask> ei renderöidä, joten käytä sitä!
• Kopioi merkintä sisällä <clipPath> ja <mask> ja liitä se ennen kuin suljet </svg> tag. Lisää sitten a fill noihin muotoihin ja tarkista SVG:n koordinaatit ja mitat. Jos et vieläkään näe kuvaa, yritä lisätä overflow="hidden" että <svg> tunnisteita.
• Tarkista, että a unique ID:tä käytetään <clipPath> or <mask>, ja että samaa tunnusta käytetään muodoissa tai muotoryhmissä, jotka on leikattu tai maskattu. Virheellinen henkilöllisyystodistus rikkoo ulkonäön.
• Tarkista kirjoitusvirheet merkintöjen välillä <clipPath> or <mask> tunnisteita.
• fill, stroke, opacitytai joitain muita tyylejä, joita on käytetty sisällä oleviin elementteihin <clipPath> ovat hyödyttömiä – ainoa hyödyllinen osa on näiden elementtien täyttöalueen geometria. Siksi jos käytät a <polyline> se käyttäytyy kuten a <polygon> ja jos käytät a <line> et näe leikkaustehostetta.
• Jos et näe kuvaasi hakemuksen jälkeen <mask>, varmista, että fill peittävä sisältö ei ole täysin musta. Peiteelementin luminanssi määrää lopullisen grafiikan opasiteetin. Näet läpi kirkkaammat osat, ja tummemmat osat piilottavat kuvasi sisällön.

Voit pelata naamioiduilla ja leikatuilla elementeillä tämä kynä.

6. Nimiavaruudet

Tiesitkö, että SVG on XML-pohjainen merkintäkieli? No niin on! SVG:n nimiavaruus on asetettu xmlns määrite:

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

XML:n nimivälistä tiedetään paljon, ja MDN:llä on siihen loistava aluke. Riittää, kun sanotaan, että nimiavaruus tarjoaa selaimelle kontekstin ja ilmoittaa sille, että merkintä on SVG-kohtainen. Ajatuksena on, että nimitilat auttavat estämään ristiriitoja, kun samassa tiedostossa on useampi kuin yksi XML-tyyppi, kuten SVG ja XHTML. Tämä on paljon harvinaisempi ongelma nykyaikaisissa selaimissa, mutta se voi auttaa selittämään SVG-renderöintiongelmia vanhemmissa selaimissa tai selaimissa, kuten Gecko, jotka ovat tiukkoja määriteltäessä dokumenttityyppejä ja nimiavaruuksia.

SVG 2 -spesifikaatio ei vaadi nimiväliä käytettäessä HTML-syntaksia. Mutta se on ratkaisevan tärkeää jos tuki vanhoille selaimille on etusijalla – ja sen lisääminen ei haittaa mitään. Tällä tavalla, kun <html> elementin xmlns määrite on määritetty, se ei ole ristiriidassa niissä harvoissa tapauksissa.

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

Tämä pätee myös käytettäessä upotettua SVG:tä CSS:ssä, kuten asettamalla sen taustakuvaksi. Seuraavassa esimerkissä syötteeseen ilmestyy valintamerkkikuvake onnistuneen validoinnin jälkeen. CSS näyttää tältä:

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

Kun poistamme nimiavaruuden taustaominaisuuden SVG:stä, kuva katoaa:

Toinen yleinen nimitilan etuliite on xlink:href. Käytämme sitä paljon viitattaessa muihin SVG:n osiin, kuten kuvioihin, suodattimiin, animaatioihin tai liukuväreihin. Suositus on aloittaa sen korvaaminen href koska toinen on vanhentunut SVG 2:n jälkeen, mutta vanhempien selaimien kanssa saattaa esiintyä yhteensopivuusongelmia. Siinä tapauksessa voimme käyttää molempia. Muista vain lisätä nimiavaruus xmlns:xlink="http://www.w3.org/1999/xlink" jos käytät edelleen xlink:href.

Nosta SVG-taitojasi!

Toivon, että nämä vinkit auttavat sinua säästämään paljon aikaa, jos huomaat vianetsintää väärin renderöityjä SVG-tiedostoja. Nämä ovat vain asioita, joita etsin. Ehkä sinulla on erilaisia ​​punaisia ​​lippuja, joita katsot - jos on, kerro minulle kommenteissa!

Tärkeintä on, että kannattaa hankkia ainakin perustiedot eri tapoja käyttää SVG:tä. CodePen-haasteet sisältävät usein SVG:n ja tarjoavat hyviä käytäntöjä. Tässä on muutama resurssi lisää tasolle:

Suosittelen seuraamaan muutamia henkilöitä SVG:hen liittyvän hyvyyden vuoksi:

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/