6 eșecuri SVG obișnuite (și cum să le remediați)

Cineva m-a întrebat recent cum abordez depanarea SVG-urilor inline. Deoarece face parte din DOM, putem inspecta orice SVG inline din orice browser DevTools. Și, din această cauză, avem capacitatea de a analiza lucrurile și de a descoperi eventualele probleme sau oportunități de optimizare a SVG.

Dar uneori, nici măcar nu putem vedea SVG-urile noastre deloc. În acele cazuri, există șase lucruri specifice pe care le caut atunci când depanez.

1. viewBox Valorile

viewBox este un punct comun de confuzie atunci când lucrați cu SVG. Este bine din punct de vedere tehnic să folosiți SVG inline fără acesta, dar am pierde unul dintre cele mai semnificative beneficii ale sale: scalarea cu containerul. În același timp, poate funcționa împotriva noastră atunci când este configurat necorespunzător, rezultând decupări nedorite.

Elementele sunt acolo când sunt tăiate - sunt doar într-o parte a sistemului de coordonate pe care noi nu o vedem. Dacă ar fi să deschidem fișierul într-un program de editare grafică, ar putea arăta astfel:

Cel mai simplu mod de a remedia asta? Adăuga overflow="visible" la SVG, fie că este în foaia noastră de stil, în linie pe style sau direct ca atribut de prezentare SVG. Dar dacă aplicăm și a background-color la SVG sau dacă avem alte elemente în jurul lui, lucrurile s-ar putea să arate puțin cam neregulate. În acest caz, cea mai bună opțiune va fi editarea fișierului viewBox pentru a arăta acea parte a sistemului de coordonate care a fost ascunsă:

Există câteva lucruri suplimentare despre viewBox care merită acoperite în timp ce vorbim despre subiect:

Cum se face viewBox funcționează?

SVG este o pânză infinită, dar putem controla ceea ce vedem și cum îl vedem prin fereastra de vizualizare și viewBox.

fereastra de vizualizare este un cadru de fereastră pe pânza infinită. Dimensiunile sale sunt definite de width și height atribute, sau în CSS cu corespunzătoare width și height proprietăți. Putem specifica orice unitate de lungime pe care o dorim, dar dacă oferim numere fără unități, acestea sunt implicite în pixeli.

viewBox este definit de patru valori. Primele două sunt punctul de plecare din colțul din stânga sus (x și y valori, numere negative permise). Le editez pentru a reîncadra imaginea. Ultimele două sunt lățimea și înălțimea sistemului de coordonate din interiorul ferestrei de vizualizare - aici putem edita scara grilei (în care vom intra în secțiunea despre Mărire).

Iată un marcaj simplificat care arată SVG viewBox si width și height atributele ambele stabilite pe <svg>:

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

Reîncadrare

Deci asta:

<svg viewBox="0 0 700 700">

… hărți la asta:

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

Fereastra pe care o vedem începe de unde 0 pe axa x și 0 pe axa y se întâlnesc.

Schimbând aceasta:

<svg viewBox="0 0 700 700">

…la acest:

<svg viewBox="300 200 700 700">

… lățimea și înălțimea rămân aceleași (700 unități fiecare), dar începutul sistemului de coordonate este acum la 300 punct pe axa x și 200 pe axa y.

În următorul videoclip adaug un roșu <circle> la SVG cu centrul său la 300 punct pe axa x și 200 pe axa y. Observați cum se schimbă viewBox coordonatele la aceleași valori schimbă, de asemenea, plasarea cercului în colțul din stânga sus al cadrului, în timp ce dimensiunea redată a SVG-ului rămâne aceeași (700×700). Tot ce am făcut a fost să „recadram” lucrurile cu viewBox.

Mărire

Putem schimba ultimele două valori din interiorul viewBox pentru a mări sau micșora imaginea. Cu cât valorile sunt mai mari, cu atât sunt adăugate mai multe unități SVG pentru a se potrivi în fereastra de vizualizare, rezultând o imagine mai mică. Dacă vrem să păstrăm un raport de 1:1, nostru viewBox lățimea și înălțimea trebuie să se potrivească cu valorile noastre de lățime și înălțime.

Să vedem ce se întâmplă în Illustrator când modificăm acești parametri. Tabla de artă este viewport care este reprezentat de un pătrat alb de 700px. Orice altceva în afara acestei zone este pânza noastră SVG infinită și este tăiată în mod implicit.

Figura 1 de mai jos arată un punct albastru la 900 de-a lungul axei x și 900 de-a lungul axei y. Dacă le schimb pe ultimele două viewBox valori de la 700 la 900 asa:

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

… apoi punctul albastru este aproape complet din nou la vedere, așa cum se vede în Figura 2 de mai jos. Imaginea noastră este redusă deoarece am mărit valorile viewBox, dar dimensiunile reale ale lățimii și înălțimii SVG-ului au rămas aceleași, iar punctul albastru și-a revenit mai aproape de zona nedecupată.

Există un pătrat roz ca dovadă a modului în care grila se scalează pentru a se potrivi în fereastra de vizualizare: unitatea devine mai mică și mai multe linii de grilă se potrivesc în aceeași zonă de vizualizare. Puteți juca cu aceleași valori în următorul stilou pentru a vedea acea activitate în acțiune:

2. Lipsa width și height

Un alt lucru comun la care mă uit atunci când depanez SVG-ul inline este dacă marcajul conține width or height atribute. Acest lucru nu este mare lucru în multe cazuri, cu excepția cazului în care SVG-ul se află într-un container cu poziționare absolută sau într-un container flexibil (așa cum Safari calculează SVG-ul width valoare cu 0px în loc de auto). Excluzând width or height în aceste cazuri, ne împiedică să vedem imaginea completă, după cum putem vedea deschiderea acestui demo CodePen și comparându-l în Chrome, Safari și Firefox (atingeți imagini pentru o vizualizare mai mare).

Soluția? Adăugați o lățime sau o înălțime, fie ca atribut de prezentare, în linie în atributul de stil sau în CSS. Evitați utilizarea înălțimii de la sine, mai ales când este setată 100% or auto. O altă soluție este să pune dreapta și valorile rămase.

Te poți juca cu următorul Pen și combinați diferitele opțiuni.

3. Neatenționat fill și stroke culori

Se poate, de asemenea, să aplicăm culoare pe <svg> etichetă, fie că este un stil inline sau provine din CSS. Este în regulă, dar pot exista și alte valori de culoare în marcaj sau stiluri care intră în conflict cu setul de culori de pe <svg>, ceea ce face ca piesele să fie invizibile.

De aceea tind să caut fill și stroke atribute în marcajul SVG și ștergeți-le. Următorul videoclip arată un SVG pe care l-am stilat în CSS cu un roșu fill. Există câteva cazuri în care părți din SVG sunt completate cu alb direct în marcajul pe care l-am eliminat pentru a dezvălui piesele lipsă.

4. ID-uri lipsă

Acesta ar putea părea super evident, dar ați fi surprins cât de des văd că apare. Să presupunem că am creat un fișier SVG în Illustrator și am fost foarte sârguincioși în a numi straturile noastre, astfel încât să obțineți ID-uri potrivite în marcaj atunci când exportați fișierul. Și să presupunem că intenționăm să stilăm acel SVG în CSS prin conectarea acelor ID-uri.

Este un mod frumos de a face lucrurile. Dar există o mulțime de situații în care am văzut același fișier SVG exportat a doua oară în aceeași locație și ID-urile sunt diferite, de obicei atunci când copiați/lipiți vectorii direct. Poate a fost adăugat un nou strat, sau unul dintre cele existente a fost redenumit sau ceva de genul ăsta. Oricare ar fi cazul, regulile CSS nu se mai potrivesc cu ID-urile din marcajul SVG, ceea ce face ca SVG-ul să fie randat diferit decât v-ați aștepta.

În fișierele SVG mari, ar putea fi dificil să găsim acele ID-uri. Acesta este un moment bun pentru a deschide DevTools, pentru a inspecta acea parte a graficului care nu funcționează și pentru a vedea dacă acele ID-uri încă se potrivesc.

Deci, aș spune că merită să deschideți un fișier SVG exportat într-un editor de cod și să-l comparați cu originalul înainte de a schimba lucrurile. Aplicațiile precum Illustrator, Figma și Sketch sunt inteligente, dar asta nu înseamnă că nu suntem responsabili pentru verificarea lor.

5. Lista de verificare pentru tăiere și mascare

Dacă un SVG este tăiat în mod neașteptat și viewBox verifică în regulă, de obicei mă uit la CSS pentru clip-path or mask proprietăți care ar putea interfera cu imaginea. Este tentant să te uiți în continuare la marcajul inline, dar este bine să reții că stilul unui SVG s-ar putea întâmpla în altă parte.

Decuparea și mascarea CSS ne permit să „ascundem” părți ale unei imagini sau ale unui element. În SVG, <clipPath> este o operație vectorială care decupează părți ale unei imagini fără rezultate la jumătate. The <mask> eticheta este o operație de pixeli care permite transparență, efecte de semi-transparență și margini neclare.

Aceasta este o mică listă de verificare pentru cazurile de depanare în care sunt implicate tăierea și mascarea:

• Asigurați-vă că traseul de tăiere (sau masca) și graficul se suprapun. Părțile care se suprapun sunt cele care sunt afișate.
• Dacă aveți o cale complexă care nu intersectează graficul dvs., încercați să aplicați transformări până când acestea se potrivesc.
• Puteți inspecta în continuare codul interior cu DevTools, chiar dacă <clipPath> or <mask> nu sunt redate, deci folosiți-l!
• Copiați marcajul în interior <clipPath> și <mask> și lipiți-l înainte de a închide </svg> etichetă. Apoi adăugați a fill la acele forme și verificați coordonatele și dimensiunile SVG. Dacă tot nu vedeți imaginea, încercați să adăugați overflow="hidden" la <svg> etichetă.
• Verificați dacă a unic ID-ul este folosit pentru <clipPath> or <mask>și că același ID este aplicat formelor sau grupului de forme care sunt tăiate sau mascate. Un ID nepotrivit va distruge aspectul.
• Verificați greșelile de scriere în marcajul dintre <clipPath> or <mask> tag-uri.
• fill, stroke, opacity, sau alte stiluri aplicate elementelor din interior <clipPath> sunt inutile - singura parte utilă este geometria regiunii de umplere a acelor elemente. De aceea, dacă folosești un <polyline> se va comporta ca o <polygon> iar dacă folosești un <line> nu veți vedea niciun efect de tăiere.
• Dacă nu vă vedeți imaginea după aplicarea a <mask>, asigurați-vă că fill conținutul de mascare nu este complet negru. Luminanța elementului de mascare determină opacitatea graficului final. Veți putea vedea prin părțile mai luminoase, iar părțile mai întunecate vor ascunde conținutul imaginii.

Vă puteți juca cu elemente mascate și tăiate acest stilou.

6. Spații de nume

Știați că SVG este un limbaj de marcare bazat pe XML? Ei bine, este! Spațiul de nume pentru SVG este setat pe xmlns atribut:

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

Sunt multe de știut despre spațiarea numelor în XML, iar MDN are o idee excelentă. Este suficient să spunem că spațiul de nume oferă context browserului, informându-l că marcajul este specific SVG. Ideea este că spațiile de nume ajută la prevenirea conflictelor atunci când în același fișier se află mai mult de un tip de XML, cum ar fi SVG și XHTML. Aceasta este o problemă mult mai puțin frecventă în browserele moderne, dar ar putea ajuta la explicarea problemelor de redare SVG în browsere mai vechi sau browsere precum Gecko, care sunt stricte atunci când definesc tipurile de documente și spațiile de nume.

Specificația SVG 2 nu necesită spațierea numelor atunci când utilizați sintaxa HTML. Dar este crucial dacă suportul pentru browserele vechi este o prioritate - în plus, nu strica nimic să îl adăugați. În acest fel, când <html> elementului xmlns atributul este definit, nu va intra în conflict în acele cazuri rare.

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

Acest lucru este valabil și atunci când utilizați SVG inline în CSS, cum ar fi setarea lui ca imagine de fundal. În exemplul următor, o pictogramă bifă apare pe intrare după validarea cu succes. Iată cum arată CSS-ul:

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

Când eliminăm spațiul de nume din interiorul SVG din proprietatea de fundal, imaginea dispare:

Un alt prefix comun al spațiului de nume este xlink:href. Îl folosim foarte mult atunci când facem referire la alte părți ale SVG, cum ar fi: modele, filtre, animații sau gradienți. Recomandarea este să începeți să îl înlocuiți cu href deoarece celălalt este depreciat de la SVG 2, dar ar putea exista probleme de compatibilitate cu browserele mai vechi. În acest caz, le putem folosi pe ambele. Nu uitați să includeți spațiul de nume xmlns:xlink="http://www.w3.org/1999/xlink" dacă încă îl utilizați xlink:href.

Crește-ți abilitățile SVG!

Sper că aceste sfaturi vă vor ajuta să economisiți o mulțime de timp dacă vă aflați că remediați SVG-urile inline redate incorect. Acestea sunt doar lucrurile pe care le caut. Poate că aveți diferite semnale roșii la care urmăriți - dacă da, spuneți-mi în comentarii!

Concluzia este că merită să aveți cel puțin o înțelegere de bază diferitele moduri în care SVG poate fi utilizat. Provocări CodePen încorporează adesea SVG și oferă bune practici. Iată câteva resurse suplimentare pentru a crește nivelul:

Există câțiva oameni pe care îi sugerez să îi urmăresc pentru bunătatea legată de SVG:

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/