Keď už máme to, čo nazývame náš „blok defs“ SVG - ten kúsok SVG, ktorý definuje všetky veci, ktoré chceme nakresliť neskôr - kam to máme dať? Doteraz sme to vkladali priamo do HTML a to absolútne funguje. Ak to necháme v hornej časti stránky, povedzme hneď za úvodnú značku:
To bude fungovať skvele vo všetkých prehľadávačoch, ktoré podporujú SVG.
Mohlo by to byť lákavé posunúť to nadol. Ikony možno nie sú pre stránku príliš dôležité, nie také dôležité ako skutočný obsah, ktorý majú poskytovať, takže ikony presunieme namiesto toho do dolnej časti stránky a odložíme ich načítanie, ako to často robíme pomocou JavaScriptu. Skúšame to vo videu, ale má problémy s vykresľovaním ikon v Safari, ktoré sme sa neskôr vôbec pokúsili . Úprimne povedané, videl som nekonzistentné správanie alebo rôzne typy aj v iných prehliadačoch, ako to robia týmto spôsobom, a zdá sa, že krajina sa v tomto smere trochu posúva. Takže som počul: je ťažké implementovať. Najbezpečnejšie je dať blok na vrch, ak v konečnom dôsledku ponecháte deficity priamo v dokumentoch.
V tomto videu sa pozrieme na základné testovanie tohto všetkého a potom na niektoré webové stránky z reálneho sveta, ktoré používajú tento systém, a na to, ako / kam vložia blok svg defs.
Prečítajte si pero 954e71cb5d5e79fb61d3c89bb3f21b8a od Chrisa Coyiera (@chriscoyier) na stránke CodePen.
Poznámka
Páči sa mi termín „blok SVG defs“ - len aby sme ho mohli nazvať niečo, čo má konkrétny účel, ale v skutočnosti nemá oficiálny názov. Nie vždy však musíte značku skutočne používať . Keď použijete s, tie sa aj tak nevykreslia samy o sebe a myslím si, že by v nich nemali byť . Počul som, že definície prechodov v SVG sú rovnaké a nebudú fungovať, ani keď budú v . Bez ohľadu na to, stále ide o „blok kódu SVG, ktorý sa práve chystáme použiť neskôr“, takže ho budem pravdepodobne naďalej nazývať „blok SVG defs“.