Mettere quel blocco SVG defs nella parte superiore del documento funziona decisamente. Ha anche alcuni vantaggi, come il fatto che non è necessario effettuare alcuna richiesta HTTP, tutte le informazioni per disegnare la grafica sono direttamente sulla pagina. Ma ha anche alcuni svantaggi. Tutte queste informazioni devono essere analizzate dal browser in ogni pagina, dal documento. Non è un documento separato che potrebbe già essere memorizzato nella cache dal client, come potrebbero esserlo altre risorse. E a proposito di cache, se il tuo sito memorizza nella cache HTML (in genere una buona idea), potresti considerare questo "page cache bloat" perché ogni singola pagina cache include questo grande blocco ripetitivo di codice - un uso non molto efficiente della cache del server.
La buona notizia è che possiamo spostare il blocco delle definizioni SVG in un file esterno e utilizzarlo come se fosse un'immagine o qualsiasi altra risorsa.
Quando lo usiamo, il percorso del file sarebbe nell'attributo, in questo modo:
Importante da sapere: le restrizioni interdominio sono difficili su questo. Anche le intestazioni CORS non ti aiuteranno nella mia esperienza. Quindi nessun CDN (non può nemmeno giocare su CodePen e sicuramente non può riprodurre un file: // URL).
Un'altra cosa importante da sapere: è assolutamente necessario l'attributo xmlns affinché funzioni. Come in, il tuo blocco SVG defs dovrebbe iniziare con:
Avevo l'impressione che non ne avessi bisogno in un documento HTML5 (più o meno allo stesso modo non hai bisogno di tipi su s), ma forse perché questo file non è più all'interno dei confini di un documento HTML5 (è essendo referenziato esternamente), ne hai bisogno.
Per questo motivo, la demo per questo è qui.
Altrettanto importante da sapere: nessuna versione di IE lo supporta (fino a 11 al momento della pubblicazione). Ma c'è un modo per farlo funzionare, essenzialmente Ajaxing nel bit di SVG di cui hai bisogno e inserendolo dove dovrebbe essere, rendendolo un SVG in linea "normale" supportato. Ci vuole un minuto caldo per farlo funzionare e testarlo in Internet Explorer utilizzando BrowserStack, ma alla fine lo otteniamo.
File
- 16-svg4everybody.js
- 16-svg-defs-test.svg