Jednom kad imamo ono što nazivamo našim "defs blokom" SVG-a - onim dijelom SVG-a koji definira sve stvari koje želimo crtati kasnije - kamo ga stavljamo? Do sada smo ga stavljali izravno u HTML, a to apsolutno djeluje. Ako ga ostavimo na vrhu stranice, recite odmah nakon uvodne oznake:
To će izvrsno funkcionirati u svim preglednicima koji podržavaju SVG.
Možda bi bilo primamljivo pomaknuti ovo prema dolje. Možda ikone nisu od presudne važnosti za stranicu, nisu toliko vitalne koliko je stvarni sadržaj kojem je stranica namijenjena isporuci, pa ih umjesto toga premještamo na dno stranice, odgađajući njihovo učitavanje kao što to često čini JavaScript. Pokušavamo ovo u videozapisu, ali ima problema sa Safari-jem prikazivanjem ikona koje smo kasnije uopće pokušali . Da budem iskren, vidio sam nedosljedno ponašanje ili razne vrste u drugim preglednicima i na ovaj način i čini se da se krajolik pomalo pomiče u tom pogledu. Tako sam čuo: je teška stvar za provedbu. Najsigurnije je staviti blok na vrh ako na kraju držite defove u svojim dokumentima.
U ovom videozapisu pogledamo osnovna testiranja svega toga, a zatim neke web stranice iz stvarnog svijeta koje koriste ovaj sustav i kako / gdje ubacuju svg defs blok.
Pogledajte Olovku 954e71cb5d5e79fb61d3c89bb3f21b8a Chrisa Coyiera (@chriscoyier) na CodePenu.
Bilješka
Sviđa mi se izraz "SVG defs block" - samo da bismo ga mogli nazvati nečim što ima određenu svrhu, ali zapravo nema službeno ime. Ali, ne morate uvijek koristiti oznaku. Kada koristite s, oni se ionako ne prikazuju sami, i doista mislim da ne bi trebali biti unutra . Čuo sam da su definicije gradijenata u SVG iste, a neće ni raditi ako su u . Bez obzira na to, to je i dalje "blok SVG koda kojeg tek definiramo za korištenje kasnije", pa ću ga vjerojatno i dalje zvati "SVG defs block".