Het plaatsen van dat SVG-def-blok bovenaan het document werkt zeker. Het heeft ook een aantal voordelen, zoals het feit dat er geen HTTP-verzoek hoeft te worden gedaan, alle informatie voor het tekenen van de afbeeldingen staat direct op de pagina. Maar het heeft ook enkele nadelen. Al die informatie moet door de browser op elke pagina vanuit het document worden geparseerd. Het is geen afzonderlijk document dat mogelijk al door de client in de cache is opgeslagen, zoals andere items dat wel kunnen zijn. En als je het over cache hebt, als je site HTML in de cache opslaat (meestal een goed idee), zou je deze "paginacache-bloat" kunnen overwegen, omdat elke afzonderlijke in de cache opgeslagen pagina dit grote zich herhalende codeblok bevat - geen erg efficiënt gebruik van de servercache.
Het goede nieuws is dat we die SVG-blokkeringen kunnen verplaatsen naar een extern bestand en het kunnen gebruiken zoals we een afbeelding of een ander item zouden gebruiken.
Wanneer we het dan gebruiken, zou het bestandspad in het attribuut staan, zoals dit:
Belangrijk om te weten: domeinoverschrijdende beperkingen zijn hier streng op. Zelfs CORS-headers zullen je in mijn ervaring niet helpen. Dus geen CDN's (kan zelfs niet spelen op CodePen, en zeker niet spelen op een file: // URL).
Nog een belangrijk ding om te weten: je moet zeker het xmlns-attribuut gebruiken om dit te laten werken. Net als in, zou je SVG defs-blok moeten beginnen met:
Ik had de indruk dat je dat niet nodig had in een HTML5-document (op vrijwel dezelfde manier heb je geen typen op s nodig), maar misschien omdat dit bestand niet meer binnen de grenzen van een HTML5-document valt (het is extern verwezen), heb je het nodig.
Om die reden is de demo hiervoor hier.
Even belangrijk om te weten: geen enkele versie van IE ondersteunt dit (maximaal 11 op het moment van publicatie). Maar er is een manier om het te laten werken, door in wezen Ajaxing in het stukje SVG dat je nodig hebt en het in te voegen waar het zou zijn, waardoor het een soort "normale" inline SVG wordt die wordt ondersteund. Het kost ons een korte minuut om dit werkend en getest te krijgen in Internet Explorer met BrowserStack, maar uiteindelijk krijgen we het.
Bestanden
- 16-svg4everybody.js
- 16-svg-defs-test.svg