6 errori SVG comuni (e come risolverli)

Qualcuno di recente mi ha chiesto come mi avvicino al debug degli SVG in linea. Poiché fa parte del DOM, possiamo ispezionare qualsiasi SVG in linea in qualsiasi DevTools del browser. E per questo motivo, abbiamo la possibilità di esaminare le cose e scoprire eventuali problemi o opportunità potenziali per ottimizzare l'SVG.

Ma a volte non riusciamo nemmeno a vedere i nostri SVG. In questi casi, ci sono sei cose specifiche che cerco quando eseguo il debug.

1. il viewBox valori

Il viewBox è un punto di confusione comune quando si lavora con SVG. È tecnicamente corretto utilizzare SVG in linea senza di esso, ma perderemmo uno dei suoi vantaggi più significativi: il ridimensionamento con il contenitore. Allo stesso tempo, può funzionare contro di noi se configurato in modo errato, con conseguente ritaglio indesiderato.

Gli elementi sono lì quando vengono ritagliati: sono solo in una parte del sistema di coordinate che non vediamo. Se dovessimo aprire il file in qualche programma di editing grafico, potrebbe assomigliare a questo:

Il modo più semplice per risolvere questo problema? Aggiungere overflow="visible" all'SVG, sia che si trovi nel nostro foglio di stile, sia in linea sul file style attributo o direttamente come attributo di presentazione SVG. Ma se applichiamo anche a background-color all'SVG o se abbiamo altri elementi attorno ad esso, le cose potrebbero sembrare un po' fuori posto. In questo caso, l'opzione migliore sarà modificare il file viewBox per mostrare quella parte del sistema di coordinate che era nascosta:

Ci sono alcune cose aggiuntive sul viewBox che vale la pena trattare visto che siamo in tema:

Come funziona viewBox funziona?

SVG è una tela infinita, ma possiamo controllare ciò che vediamo e come lo vediamo attraverso il viewport e il viewBox.

Il vista è una cornice di finestra sulla tela infinita. Le sue dimensioni sono definite da width ed height attributi, o in CSS con il corrispondente width ed height proprietà. Possiamo specificare qualsiasi unità di lunghezza che vogliamo, ma se forniamo numeri senza unità, per impostazione predefinita sono pixel.

Il viewBox è definito da quattro valori. I primi due sono il punto di partenza nell'angolo in alto a sinistra (x ed y valori, numeri negativi consentiti). Li sto modificando per riformulare l'immagine. Gli ultimi due sono la larghezza e l'altezza del sistema di coordinate all'interno della finestra — qui è dove possiamo modificare la scala della griglia (di cui parleremo nella sezione su Zoom).

Ecco un markup semplificato che mostra SVG viewBox e la width ed height attributi entrambi impostati su <svg>:

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

Riformulare

Così questo:

<svg viewBox="0 0 700 700">

... corrisponde a questo:

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

Il viewport che vediamo inizia dove 0 sull'asse x e 0 sull'asse y si incontrano.

Modificando questo:

<svg viewBox="0 0 700 700">

…a questa:

<svg viewBox="300 200 700 700">

…la larghezza e l'altezza rimangono le stesse (700 unità ciascuna), ma l'inizio del sistema di coordinate è ora in corrispondenza di 300 punto sull'asse x e 200 sull'asse y.

Nel seguente video aggiungo un rosso <circle> alla SVG con sede presso il 300 punto sull'asse x e 200 sull'asse y. Nota come cambiare il file viewBox coordinate agli stessi valori cambia anche la posizione del cerchio nell'angolo superiore sinistro del fotogramma mentre la dimensione renderizzata dell'SVG rimane la stessa (700×700). Tutto quello che ho fatto è stato "riformulare" le cose con il viewBox.

Zoom

Possiamo modificare gli ultimi due valori all'interno del file viewBox per ingrandire o ridurre l'immagine. Più grandi sono i valori, più unità SVG vengono aggiunte per adattarsi al viewport, risultando in un'immagine più piccola. Se vogliamo mantenere un rapporto 1:1, il nostro viewBox la larghezza e l'altezza devono corrispondere ai nostri valori di larghezza e altezza del viewport.

Vediamo cosa succede in Illustrator quando cambiamo questi parametri. La tavola da disegno è il viewport che è rappresentato da un quadrato bianco di 700 px. Tutto il resto al di fuori di quell'area è la nostra tela SVG infinita e viene ritagliata per impostazione predefinita.

La Figura 1 di seguito mostra un punto blu in corrispondenza di 900 lungo l'asse x e 900 lungo l'asse y. Se cambio gli ultimi due viewBox valori da 700 a 900 come questo:

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

…quindi il punto blu è quasi completamente di nuovo visibile, come mostrato nella Figura 2 di seguito. La nostra immagine è ridotta perché abbiamo aumentato i valori di viewBox, ma le dimensioni effettive di larghezza e altezza dell'SVG sono rimaste le stesse e il punto blu è tornato più vicino all'area non tagliata.

C'è un quadrato rosa come prova di come la griglia si ridimensiona per adattarsi al viewport: l'unità diventa più piccola e più linee della griglia si adattano alla stessa area del viewport. Puoi giocare con gli stessi valori nella seguente penna per vedere che funziona in azione:

2. Mancante width ed height

Un'altra cosa comune che guardo quando eseguo il debug di SVG inline è se il markup contiene il file width or height attributi. Questo non è un grosso problema in molti casi a meno che l'SVG non sia all'interno di un contenitore con posizionamento assoluto o un contenitore flessibile (poiché Safari calcola l'SVG width valore con 0px invece di auto). Escluso width or height in questi casi ci impedisce di vedere l'immagine completa, come possiamo vedere da aprendo questa demo di CodePen e confrontandolo in Chrome, Safari e Firefox (toccare le immagini per ingrandirle).

La soluzione? Aggiungi una larghezza o un'altezza, sia come attributo di presentazione, inline nell'attributo style o in CSS. Evita di usare l'altezza da sola, in particolare quando è impostata su 100% or auto. Un'altra soluzione è quella di impostare il giusto ed valori di sinistra.

Puoi giocare con la seguente Penna e combinare le diverse opzioni.

3. Involontario fill ed stroke Colori

Potrebbe anche essere che stiamo applicando il colore al <svg> tag, sia che si tratti di uno stile in linea o proveniente da CSS. Va bene, ma potrebbero esserci altri valori di colore in tutto il markup o stili che sono in conflitto con il colore impostato su <svg>, rendendo le parti invisibili.

Ecco perché tendo a cercare il fill ed stroke attributi nel markup di SVG e cancellarli. Il seguente video mostra un SVG I stilizzato in CSS con un rosso fill. Ci sono un paio di casi in cui parti dell'SVG sono riempite di bianco direttamente nel markup che ho rimosso per rivelare i pezzi mancanti.

4. ID mancanti

Questo potrebbe sembrare super ovvio, ma rimarrai sorpreso dalla frequenza con cui lo vedo emergere. Diciamo che abbiamo creato un file SVG in Illustrator e siamo stati molto diligenti nel nominare i nostri livelli in modo da ottenere ID di corrispondenza piacevoli nel markup durante l'esportazione del file. E diciamo che intendiamo modellare quell'SVG in CSS collegandoci a quegli ID.

È un bel modo di fare le cose. Ma ci sono molte volte in cui ho visto lo stesso file SVG esportato una seconda volta nella stessa posizione e gli ID sono diversi, di solito quando si copiano/incollano direttamente i vettori. Forse è stato aggiunto un nuovo livello o uno di quelli esistenti è stato rinominato o qualcosa del genere. In ogni caso, le regole CSS non corrispondono più agli ID nel markup SVG, causando un rendering dell'SVG diverso da quello che ti aspetteresti.

In file SVG di grandi dimensioni potremmo avere difficoltà a trovare quegli ID. Questo è un buon momento per aprire DevTools, ispezionare quella parte della grafica che non funziona e vedere se quegli ID corrispondono ancora.

Quindi, direi che vale la pena aprire un file SVG esportato in un editor di codice e confrontarlo con l'originale prima di scambiare le cose. App come Illustrator, Figma e Sketch sono intelligenti, ma ciò non significa che non siamo responsabili del loro controllo.

5. Lista di controllo per il ritaglio e il mascheramento

Se un file SVG viene ritagliato inaspettatamente e il file viewBox va bene, di solito guardo il CSS per clip-path or mask proprietà che potrebbero interferire con l'immagine. È allettante continuare a guardare il markup in linea, ma è bene ricordare che lo stile di un SVG potrebbe essere presente altrove.

Ritaglio e mascheramento CSS ci permettono di "nascondere" parti di un'immagine o di un elemento. In SVG, <clipPath> è un'operazione vettoriale che taglia parti di un'immagine senza risultati intermedi. Il <mask> tag è un'operazione sui pixel che consente effetti di trasparenza, semitrasparenza e bordi sfocati.

Questa è una piccola lista di controllo per il debug dei casi in cui sono coinvolti ritaglio e mascheramento:

• Assicurati che il tracciato di ritaglio (o maschera) e la grafica si sovrappongano l'un l'altro. Le parti sovrapposte sono ciò che viene visualizzato.
• Se hai un percorso complesso che non interseca la tua grafica, prova ad applicare le trasformazioni finché non corrispondono.
• Puoi ancora ispezionare il codice interno con DevTools anche se il file <clipPath> or <mask> non sono renderizzati, quindi usalo!
• Copia il markup all'interno <clipPath> ed <mask> e incollarlo prima di chiudere il </svg> etichetta. Quindi aggiungi a fill a quelle forme e controlla le coordinate e le dimensioni di SVG. Se ancora non vedi l'immagine, prova ad aggiungere overflow="hidden" Vai all’email <svg> etichetta.
• Controlla che a unico ID viene utilizzato per il <clipPath> or <mask>e che lo stesso ID venga applicato alle forme o al gruppo di forme ritagliate o mascherate. Un ID non corrispondente interromperà l'aspetto.
• Verifica la presenza di errori di battitura nel markup tra i file <clipPath> or <mask> tag.
• fill, stroke, opacityo altri stili applicati agli elementi all'interno <clipPath> sono inutili: l'unica parte utile è la geometria della regione di riempimento di quegli elementi. Ecco perché se usi a <polyline> si comporterà come a <polygon> e se utilizzi un file <line> non vedrai alcun effetto di ritaglio.
• Se non vedi la tua immagine dopo aver applicato a <mask>, assicurati che il file fill del contenuto del mascheramento non è interamente nero. La luminanza dell'elemento di mascheramento determina l'opacità della grafica finale. Sarai in grado di vedere attraverso le parti più luminose e le parti più scure nasconderanno il contenuto della tua immagine.

Puoi giocare con elementi mascherati e ritagliati questa penna.

6. Spazi dei nomi

Sapevi che SVG è un linguaggio di markup basato su XML? Beh, lo è! Lo spazio dei nomi per SVG è impostato su xmlns attributo:

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

C'è molto da sapere sullo spazio dei nomi in XML e MDN ha un ottimo primer su di esso. Basti dire che lo spazio dei nomi fornisce il contesto al browser, informandolo che il markup è specifico di SVG. L'idea è che i namespace aiutino a prevenire i conflitti quando più di un tipo di XML si trova nello stesso file, come SVG e XHTML. Questo è un problema molto meno comune nei browser moderni, ma potrebbe aiutare a spiegare i problemi di rendering SVG nei browser meno recenti o in browser come Gecko che sono severi nella definizione di doctype e namespace.

La specifica SVG 2 non richiede spaziatura dei nomi quando si utilizza la sintassi HTML. Ma è fondamentale se il supporto per i browser legacy è una priorità, inoltre, non fa male aggiungerlo. In questo modo, quando il <html> elementi xmlns l'attributo è definito, non entrerà in conflitto in quei rari casi.

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

Questo vale anche quando si utilizza SVG in linea nei CSS, ad esempio impostandolo come immagine di sfondo. Nell'esempio seguente, viene visualizzata un'icona di segno di spunta sull'input dopo la convalida riuscita. Ecco come appare il 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;
}

Quando rimuoviamo lo spazio dei nomi all'interno di SVG nella proprietà background, l'immagine scompare:

Un altro prefisso dello spazio dei nomi comune è xlink:href. Lo usiamo molto quando facciamo riferimento ad altre parti dell'SVG come: pattern, filtri, animazioni o gradienti. La raccomandazione è di iniziare a sostituirlo con href poiché l'altro è stato deprecato da SVG 2, ma potrebbero esserci problemi di compatibilità con i browser meno recenti. In tal caso, possiamo usare entrambi. Ricorda solo di includere lo spazio dei nomi xmlns:xlink="http://www.w3.org/1999/xlink" se stai ancora usando xlink:href.

Migliora le tue abilità SVG!

Spero che questi suggerimenti ti aiutino a risparmiare un sacco di tempo se ti ritrovi a risolvere i problemi di SVG in linea renderizzati in modo errato. Queste sono solo le cose che cerco. Forse hai diverse bandiere rosse che guardi - se è così, dimmelo nei commenti!

La linea di fondo è che vale la pena avere almeno una conoscenza di base di i vari modi in cui SVG può essere utilizzato. Sfide CodePen spesso incorporano SVG e offrono buone pratiche. Ecco alcune altre risorse per salire di livello:

Ci sono alcune persone che suggerisco di seguire per la bontà legata a SVG:

• Distribuzione di contenuti basati su SEO e PR. Ricevi amplificazione oggi.
• Platoblockchain. Web3 Metaverse Intelligence. Conoscenza amplificata. Accedi qui.
• Fonte: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/