Odată ce avem ceea ce numim „blocul nostru de defs” al SVG - acea bucată de SVG care definește toate lucrurile pe care vrem să le desenăm mai târziu - unde o punem? Până acum am introdus-o direct în HTML și asta funcționează absolut. Dacă îl lăsăm în partea de sus a paginii, spuneți imediat după eticheta de deschidere :
Acest lucru va funcționa excelent în toate browserele care acceptă SVG.
Ar putea fi tentant să coborâți asta. Poate că pictogramele nu sunt extrem de vitale pentru pagină, nu la fel de vitale precum conținutul real pe care sunt menite să le difuzeze, așa că mutăm pictogramele în partea de jos a paginii, amânând încărcarea lor așa cum facem deseori cu JavaScript. Încercăm acest lucru în videoclip, dar are probleme cu redarea Safari a pictogramelor pe care le-am încercat ulterior . Sincer să fiu, am văzut un comportament inconsistent sau diferite tipuri în alte browsere, făcând acest lucru și se pare că peisajul se schimbă puțin în acest sens. Așa că am auzit: este un lucru dificil de implementat. Cel mai sigur pentru a pune blocul în partea de sus, dacă ajungeți să păstrați defurile chiar în documentele dvs.
În acest videoclip ne uităm la câteva teste de bază pentru toate acestea, apoi ne uităm la câteva site-uri web din lumea reală care utilizează acest sistem și cum / unde inserează blocul svg defs.
Vedeți Penul 954e71cb5d5e79fb61d3c89bb3f21b8a de Chris Coyier (@chriscoyier) pe CodePen.
Notă
Îmi place termenul „bloc defs SVG” - doar pentru a-l putea numi ceva care are un scop specific, dar care nu are cu adevărat un nume oficial. Însă nu trebuie întotdeauna să utilizați de fapt o etichetă. Când utilizați s, oricum aceștia nu redau singuri și, într-adevăr, nu cred că ar trebui să fie înăuntru . Am auzit că definițiile gradienților din SVG sunt aceleași și nici nu vor funcționa dacă sunt în . Indiferent, este în continuare un „bloc de cod SVG pe care tocmai îl definim să îl folosim mai târziu”, așa că probabil îl voi numi „bloc SVS defs”.