Una volta che abbiamo quello che chiamiamo il nostro "blocco defs" di SVG - quel pezzo di SVG che definisce tutte le cose che vogliamo disegnare in seguito - dove lo mettiamo? Finora lo abbiamo inserito direttamente nell'HTML e funziona assolutamente. Se lo lasciamo in cima alla pagina, diciamo subito dopo il tag di apertura :
Funzionerà alla grande con tutti i browser che supportano SVG.
Potrebbe essere allettante spostarlo verso il basso. Forse le icone non sono estremamente vitali per la pagina, non così vitali come il contenuto reale che la pagina intende fornire, quindi spostiamo invece le icone nella parte inferiore della pagina, rimandando il loro caricamento come spesso facciamo con JavaScript. Lo proviamo nel video, ma ha problemi con Safari nel rendering delle icone che abbiamo provato in seguito . Ad essere onesti, ho visto comportamenti incoerenti o vari tipi in altri browser anche farlo in questo modo, e sembra che il panorama stia cambiando un po 'a questo proposito. Quindi ho sentito: è una cosa difficile da implementare. È più sicuro mettere il blocco in alto se finisci per mantenere le definizioni nei tuoi documenti.
In questo video esaminiamo alcuni test di base di tutto ciò, quindi guardiamo alcuni siti Web reali che utilizzano questo sistema e come / dove inseriscono il blocco svg defs.
Vedi la penna 954e71cb5d5e79fb61d3c89bb3f21b8a di Chris Coyier (@chriscoyier) su CodePen.
Nota
Mi piace il termine "SVG defs block" - solo così possiamo chiamarlo qualcosa che ha uno scopo specifico ma in realtà non ha un nome ufficiale. Tuttavia, non è sempre necessario utilizzare effettivamente un tag. Quando usi s, quelli non vengono visualizzati da soli comunque, e in effetti non penso che dovrebbero essere all'interno . Ho sentito che le definizioni dei gradienti in SVG sono le stesse e non funzioneranno nemmeno se si trovano nel file . Indipendentemente da ciò, è ancora un "blocco di codice SVG che stiamo solo definendo da utilizzare in seguito", quindi probabilmente continuerò a chiamarlo un "blocco SVG defs".