At sætte den SVG defs-blok øverst i dokumentet fungerer helt sikkert. Det har også nogle fordele, som det faktum, at der ikke skal foretages nogen HTTP-anmodning, al information til tegning af grafikken er lige på siden. Men det har også nogle ulemper. Alle disse oplysninger skal analyseres af browseren på hver side fra dokumentet. Det er ikke et separat dokument, der muligvis allerede er cachelagret af klienten, ligesom andre aktiver kan være. Og når vi taler om cache, hvis dit websted cacher HTML (typisk en god idé), kan du overveje denne "sidecache-opblæsning", fordi hver enkelt cachelagrede side indeholder denne store gentagne blok af kode - ikke en meget effektiv brug af servercache.
Den gode nyhed er, at vi kan flytte, at SVG-defs blokerer til en ekstern fil og bruger det ligesom vi ville have et billede eller et andet aktiv.
Når vi bruger det derefter, ville filstien være i attributten, som denne:
Vigtigt at vide: Begrænsninger på tværs af domæner er hårde på dette. Selv CORS-overskrifter hjælper ikke dig efter min erfaring. Så ingen CDN'er (kan ikke engang afspille på CodePen og kan bestemt ikke afspille i en fil: // URL).
En anden vigtig ting at vide: Du skal helt sikkert bruge xmlns-attribut for at dette fungerer. Som i skal din SVG defs-blok starte med:
Jeg var under det indtryk, at du ikke havde brug for det i et HTML5-dokument (på samme måde som du ikke har brug for typer på s), men måske fordi denne fil ikke længere er inden for rammerne af et HTML5-dokument (det er der refereres eksternt), har du brug for det.
Af den grund er demo for dette her.
Lige så vigtigt at vide: Ingen version af IE understøtter dette (op til 11 på tidspunktet for denne udgivelse). Men der er en måde at få det til at arbejde, ved i det væsentlige at Ajaxing i den bit af SVG, du har brug for, og indsætte det, hvor det ville være, hvilket gør det lidt ”normalt” inline SVG, der understøttes. Det tager os et varmt øjeblik at få dette til at blive testet i Internet Explorer ved hjælp af BrowserStack, men i sidste ende får vi det.
Filer
- 16-svg4everybody.js
- 16-svg-defs-test.svg
