Att sätta det SVG-defs-blocket högst upp i dokumentet fungerar definitivt. Det har också några fördelar, som det faktum att ingen HTTP-begäran behöver göras, all information för att rita grafiken finns på sidan. Men det har också några nackdelar. All den informationen måste analyseras av webbläsaren på varje sida, från dokumentet. Det är inte ett separat dokument som redan kan cachas av klienten, som andra tillgångar kan vara. Och när man talar om cache, om din webbplats cachar HTML (vanligtvis en bra idé), kan du överväga detta "sidcache uppblåst" eftersom varje enskild cachad sida innehåller detta stora upprepade kodblock - inte en mycket effektiv användning av servercache.
Den goda nyheten är att vi kan flytta att SVG-def blockerar till en extern fil och använder den precis som vi skulle göra en bild eller någon annan tillgång.
När vi använder det då skulle filvägen vara i attributet, så här:
Viktigt att veta: Begränsningar över flera domäner är svåra för detta. Inte ens CORS-rubriker hjälper mig enligt min erfarenhet. Så inga CDN-skivor (kan inte ens spela på CodePen och kan definitivt inte spela på en fil: // URL).
En annan viktig sak att veta: Du måste definitivt attributet xmlns för att detta ska fungera. Som i bör ditt SVG-defs-block börja med:
Jag hade intrycket av att du inte behövde det i ett HTML5-dokument (på ungefär samma sätt som du inte behöver typer på s), men kanske för att den här filen inte längre ligger inom ramen för ett HTML5-dokument (det är refereras externt), behöver du det.
Av den anledningen är demo för detta här.
Lika viktigt att veta: Ingen version av IE stöder detta (upp till 11 vid tidpunkten för publiceringen). Men det finns ett sätt att få det att fungera, genom att i huvudsak Ajaxa i den bit av SVG du behöver och infoga den där det skulle vara, vilket gör det ganska "normalt" inbyggt SVG som stöds. Det tar en het minut att testa detta i Internet Explorer med BrowserStack, men i slutändan får vi det.
Filer
- 16-svg4everybody.js
- 16-svg-defs-test.svg