När vi väl har det som vi kallar vårt “defs block” av SVG - den bit SVG som definierar alla saker vi vill rita senare - var lägger vi det? Hittills har vi lagt det direkt i HTML-koden, och det fungerar helt enkelt. Om vi lämnar den högst upp på sidan, säg strax efter inledningen :
Det kommer att fungera bra i alla webbläsare som stöder SVG.
Det kan vara frestande att flytta ner det här. Kanske är ikonerna inte mycket viktiga för att sidan ska vara, inte lika viktiga som det verkliga innehållet som de sida är avsedda att leverera, så vi flyttar ikonerna till botten av sidan istället och skjuter upp laddningen som vi ofta gör med JavaScript. Vi försöker detta i videon, men har problem med att Safari återger ikonerna som vi senare försökte alls. För att vara ärlig har jag sett inkonsekvent beteende eller olika typer i andra webbläsare också gör det på detta sätt, och det verkar som att landskapet förändras lite i detta avseende. Så jag har hört: är en svår sak att genomföra. Säkrast att placera blocket högst upp om du slutar hålla defs rätt i dina dokument.
I den här videon tittar vi på några grundläggande tester av allt detta och tittar sedan på några verkliga webbplatser som använder detta system och hur / var de infogar svg defs-blocket.
Se pennan 954e71cb5d5e79fb61d3c89bb3f21b8a av Chris Coyier (@chriscoyier) på CodePen.
Notera
Jag gillar termen “SVG defs block” - bara så att vi kan kalla det något som har ett specifikt syfte men inte riktigt har ett officiellt namn. Men du behöver inte alltid använda en tagg. När du använder s, gör de inte på egen hand ändå, och jag tror faktiskt inte att de ska vara inom . Jag har hört att definitioner av gradienter i SVG är desamma och inte ens fungerar om de är i . Oavsett är det fortfarande ett “block av SVG-kod som vi bara definierar att vi ska använda senare” så jag kommer sannolikt fortsätta att kalla det ett “SVG defs block.”