6 tavalist SVG tõrget (ja kuidas neid parandada)

Keegi küsis minult hiljuti, kuidas ma lähenen tekstisiseste SVG-de silumisele. Kuna see on osa DOM-ist, saame kontrollida mis tahes sisest SVG-d mis tahes brauseri DevToolsis. Ja tänu sellele on meil võimalus asju välja mõelda ja avastada võimalikke probleeme või võimalusi SVG optimeerimiseks.

Kuid mõnikord ei näe me oma SVG-sid üldse. Sellistel juhtudel on silumisel kuus konkreetset asja, mida otsin.

1. viewBox väärtused

. viewBox on SVG-ga töötamisel tavaline segaduskoht. Tehniliselt on hea kasutada reasisese SVG-d ilma selleta, kuid kaotaksime selle ühe olulisema eelise: konteineriga skaleerimise. Samal ajal võib see valesti konfigureerimisel meile vastu töötada, mille tulemuseks on soovimatu kärpimine.

Elemendid on olemas, kui neid kärbitakse – nad on lihtsalt koordinaatsüsteemi osas, mida me ei näe. Kui avaksime faili mõnes graafikatöötlusprogrammis, võib see välja näha järgmine:

Lihtsaim viis selle parandamiseks? Lisama overflow="visible" SVG-sse, olenemata sellest, kas see on meie stiililehel, tekstisiseselt style atribuut või otse SVG esitlusatribuutina. Aga kui rakendame ka a background-color SVG-le või kui selle ümber on muid elemente, võivad asjad veidi viltu jääda. Sel juhul on parim valik redigeerida viewBox et näidata seda koordinaadisüsteemi osa, mis oli peidetud:

Selle kohta on veel mõned asjad viewBox mida tasub teema juures käsitledes käsitleda:

Kuidas see viewBox tööd?

SVG on lõpmatu lõuend, kuid me saame kontrollida, mida ja kuidas me seda näeme läbi vaateava ja viewBox.

. vaateava on aknaraam lõpmatul lõuendil. Selle mõõtmed on määratletud width ja height atribuudid või CSS-is vastavaga width ja height omadused. Saame määrata mis tahes soovitud pikkuseühiku, kuid kui esitame ühikuta arvud, on need vaikimisi pikslid.

. viewBox on määratletud nelja väärtusega. Esimesed kaks on alguspunktiks vasakus ülanurgas (x ja y väärtused, lubatud negatiivsed arvud). Redigeerin neid pildi ümberraamistamiseks. Viimased kaks on vaateaknas oleva koordinaadisüsteemi laius ja kõrgus – siin saame redigeerida ruudustiku skaalat (mida käsitleme jaotises Suumimine).

Siin on lihtsustatud märgistus, mis näitab SVG-d viewBox ja width ja height atribuudid on mõlemad määratud <svg>:

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

Ümberkujundamine

Niisiis, see:

<svg viewBox="0 0 700 700">

…kaardid sellele:

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

Vaateava, mida näeme, algab kust 0 x-teljel ja 0 y-teljel kohtuvad.

Seda muutes:

<svg viewBox="0 0 700 700">

…sellele:

<svg viewBox="300 200 700 700">

…laius ja kõrgus jäävad samaks (700 ühikut), kuid koordinaatsüsteemi algus on nüüd 300 punkt x-teljel ja 200 y-teljel.

Järgmises videos lisan punase <circle> SVG-sse, mille keskpunkt on 300 punkt x-teljel ja 200 y-teljel. Pange tähele, kuidas muuta viewBox samadele väärtustele vastavad koordinaadid muudavad ka ringi paigutust kaadri vasakusse ülanurka, samas kui SVG renderdatud suurus jääb samaks (700×700). Kõik, mida ma tegin, oli asjade ümber kujundamine viewBox.

Suumimine

Kahte viimast väärtust saame muuta sees viewBox pilti sisse või välja suumimiseks. Mida suuremad on väärtused, seda rohkem SVG ühikuid lisatakse, et need mahuks vaateaknasse, mille tulemuseks on väiksem pilt. Kui tahame hoida suhet 1:1, siis meie viewBox laius ja kõrgus peavad vastama meie vaateava laiuse ja kõrguse väärtustele.

Vaatame, mis juhtub Illustratoris, kui me neid parameetreid muudame. Kunstitahvel on viewport mida tähistab valge 700 piksli suurune ruut. Kõik muu väljaspool seda piirkonda on meie lõpmatu SVG-lõuend ja vaikimisi kärbitakse.

Alloleval joonisel 1 on näidatud sinine täpp juures 900 piki x-telge ja 900 piki y-telge. Kui ma muudan kahte viimast viewBox väärtused alates 700 et 900 nagu nii:

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

…siis on sinine täpp peaaegu täielikult tagasi vaates, nagu on näha alloleval joonisel 2. Meie pilti vähendatakse, kuna suurendasime viewBox väärtusi, kuid SVG tegelikud laiuse ja kõrguse mõõtmed jäid samaks ning sinine täpp läks tagasi kärbimata alale lähemale.

Roosa ruut näitab, kuidas ruudustik sobitub vaateavaga: seade muutub väiksemaks ja samale vaateava alale mahub rohkem ruudustiku jooni. Saate mängida samade väärtustega järgmises pliiatsis, et näha, kuidas see toimib:

2. puudu width ja height

Teine levinud asi, mida ma reasisese SVG silumisel vaatan, on see, kas märgistus sisaldab width or height atribuudid. See pole paljudel juhtudel suur probleem, kui SVG pole absoluutse positsioneerimisega konteineris või paindlikus konteineris (nagu Safari arvutab SVG width väärtus koos 0px asemel auto). Välja arvatud width or height sellistel juhtudel ei lase meil näha kogu pilti, nagu me näeme selle CodePeni demo avamine ja selle võrdlemine Chrome'is, Safaris ja Firefoxis (suuremaks vaatamiseks puudutage pilte).

Lahendus? Lisage laius või kõrgus, kas esitluse atribuudina, stiiliatribuudi sees või CSS-is. Vältige kõrguse kasutamist eraldi, eriti kui see on seatud 100% or auto. Teine lahendus on seadke paremale ja vasakpoolsed väärtused.

Saate ringi mängida järgmine pliiats ja kombineerida erinevaid võimalusi.

3. Tahtmatu fill ja stroke värvid

Samuti võib juhtuda, et rakendame värvi <svg> kas see on tekstisisene stiil või pärineb CSS-ist. See on hea, kuid märgistuses võib esineda muid värviväärtusi või stiile, mis on vastuolus seadme värviga <svg>, muutes osad nähtamatuks.

Sellepärast kipun otsima fill ja stroke atribuudid SVG märgistuses ja pühkige need välja. Järgmine video näitab SVG-d, mille kujundasin CSS-is punasega fill. On paar juhtumit, kus SVG osad täidetakse valgega otse märgistuses, mille eemaldasin puuduvate osade paljastamiseks.

4. Puuduvad ID-d

See võib tunduda ülimalt ilmne, kuid te oleksite üllatunud, kui sageli ma näen seda esile kerkivat. Oletame, et tegime Illustratoris SVG-faili ja panime väga usinalt oma kihtidele nimesid, et saaksite faili eksportimisel märgistuses kenasti sobivad ID-d. Ja oletame, et plaanime selle SVG-d CSS-is kujundada, ühendades need ID-dega.

See on tore viis asju ajada. Kuid on palju kordi, kus olen näinud sama SVG-faili eksportimist teist korda samasse asukohta ja ID-d on erinevad, tavaliselt otse vektorite kopeerimisel/kleepimisel. Võib-olla lisati uus kiht või nimetati mõni olemasolevatest ümber või midagi. Igal juhul ei ühti CSS-i reeglid enam SVG märgistuse ID-dega, mistõttu SVG renderdub oodatust erinevalt.

Suurtes SVG-failides võib meil olla raske neid ID-sid leida. See on õige aeg DevToolsi avamiseks, graafika selle osa kontrollimiseks, mis ei tööta, ja kontrollida, kas need ID-d ikka kattuvad.

Seega, ma ütleksin, et enne asjade vahetamist tasub avada eksporditud SVG-fail koodiredaktoris ja võrrelda seda originaaliga. Sellised rakendused nagu Illustrator, Figma ja Sketch on nutikad, kuid see ei tähenda, et me ei vastuta nende kontrollimise eest.

5. Lõikamise ja maskeerimise kontrollnimekiri

Kui SVG ootamatult kärbitakse ja viewBox kontrollib hästi, ma tavaliselt vaatan CSS-i clip-path or mask omadused, mis võivad pilti segada. On ahvatlev jätkata tekstisisese märgistuse vaatamist, kuid on hea meeles pidada, et SVG stiil võib juhtuda mujal.

CSS-i lõikamine ja maskeerimine võimaldab meil pildi või elemendi osi "peita". SVG-s <clipPath> on vektoroperatsioon, mis lõikab kujutise osi pooliku tulemuseta. The <mask> silt on pikslioperatsioon, mis võimaldab läbipaistvust, poolläbipaistvuse efekte ja uduseid servi.

See on väike kontrollnimekiri silumisjuhtumite jaoks, kus on tegemist kärpimise ja maskeerimisega:

• Veenduge, et lõiketee (või mask) ja graafika kattuvad üksteisega. Kuvatakse kattuvad osad.
• Kui teil on keeruline tee, mis ei ristu teie graafikaga, proovige rakendada teisendusi, kuni need ühtivad.
• Saate sisemist koodi siiski DevToolsiga kontrollida, kuigi <clipPath> or <mask> ei ole renderdatud, seega kasutage seda!
• Kopeerige sees olev märgistus <clipPath> ja <mask> ja kleepige see enne sulgemist </svg> tag. Seejärel lisage a fill nendele kujunditele ja kontrollige SVG koordinaate ja mõõtmeid. Kui te ikka pilti ei näe, proovige lisada overflow="hidden" Euroopa <svg> tag.
• Kontrollige, et a ainulaadne ID-d kasutatakse <clipPath> or <mask>ja sama ID-d rakendatakse kärbitud või maskeeritud kujunditele või kujundite rühmale. Sobimatu ID rikub välimuse.
• Kontrollige, kas märgistuse vahel pole kirjavigu <clipPath> or <mask> sildid.
• fill, stroke, opacityvõi mõni muu sees olevatele elementidele rakendatud stiil <clipPath> on kasutud - ainus kasulik osa on nende elementide täitepiirkonna geomeetria. Sellepärast, kui kasutate a <polyline> see käitub nagu a <polygon> ja kui kasutate a <line> te ei näe lõikamise efekti.
• Kui te ei näe oma pilti pärast a <mask>, veenduge, et fill varjavast sisust ei ole täiesti must. Maskeeriva elemendi heledus määrab lõpliku graafika läbipaistmatuse. Näete läbi heledamad osad ja tumedamad osad peidavad teie pildi sisu.

Saate mängida maskeeritud ja kärbitud elementidega see pliiats.

6. Nimeruumid

Kas teadsite, et SVG on XML-põhine märgistuskeel? No on küll! SVG nimeruum on määratud xmlns atribuut:

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

XML-i nimevahede kohta on palju teada ja MDN-il on suurepärane aabits. Piisab, kui öelda, et nimeruum annab brauserile konteksti, teavitades seda, et märgistus on SVG-le omane. Idee seisneb selles, et nimeruumid aitavad vältida konflikte, kui ühes failis on mitut tüüpi XML-i (nt SVG ja XHTML). See on tänapäevastes brauserites palju harvem probleem, kuid võib aidata selgitada SVG-renderdusprobleeme vanemates brauserites või brauserites (nt Gecko), mis on doktüüpide ja nimeruumide määratlemisel ranged.

SVG 2 spetsifikatsioon ei nõua nimevahesid HTML-i süntaksi kasutamisel. Aga see on ülioluline kui pärandbrauserite tugi on prioriteet – lisaks ei tee selle lisamine midagi halba. Sel viisil, kui <html> elemendi omad xmlns atribuut on määratletud, ei ole see neil harvadel juhtudel vastuolus.

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

See kehtib ka CSS-is tekstisisese SVG kasutamisel, näiteks taustapildiks määramisel. Järgmises näites kuvatakse pärast edukat kinnitamist sisendile linnukese ikoon. CSS näeb välja selline:

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

Kui eemaldame taustaomaduses SVG-s oleva nimeruumi, kaob pilt:

Teine levinud nimeruumi eesliide on xlink:href. Kasutame seda sageli SVG muudele osadele viitamisel, näiteks mustrid, filtrid, animatsioonid või gradiendid. Soovitatav on alustada selle asendamist href kuna teine ​​on alates SVG 2-st aegunud, kuid vanemate brauserite puhul võib esineda ühilduvusprobleeme. Sel juhul saame kasutada mõlemat. Ärge unustage lisada nimeruumi xmlns:xlink="http://www.w3.org/1999/xlink" kui te veel kasutate xlink:href.

Täiustage oma SVG-oskusi!

Loodan, et need näpunäited aitavad teil palju aega säästa, kui leiate end valesti renderdatud tekstisiseste SVG-de tõrkeotsingust. Need on just need asjad, mida ma otsin. Võib-olla on teil erinevaid punaseid lippe, mida jälgite - kui jah, siis rääkige mulle kommentaarides!

Põhimõte on see, et tasub omada vähemalt põhiteadmisi SVG-d saab kasutada erinevatel viisidel. CodePeni väljakutsed sisaldavad sageli SVG-d ja pakuvad häid tavasid. Siin on veel mõned ressursid taseme tõstmiseks:

Soovitan SVG-ga seotud headuse huvides jälgida mõnda inimest:

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/