Als we eenmaal hebben wat we ons "defs-blok" van SVG noemen - dat stuk SVG dat alle dingen definieert die we later willen tekenen - waar plaatsen we het dan? Tot nu toe hebben we het rechtstreeks in de HTML gezet, en dat werkt absoluut. Als we het bovenaan de pagina laten staan, zeg dan net na de openingstag :
Dat werkt prima in alle browsers die SVG ondersteunen.
Het is misschien verleidelijk om dit naar beneden te verplaatsen. Misschien zijn de pictogrammen niet super essentieel voor de pagina, niet zo belangrijk als de echte inhoud die ze moeten weergeven, dus verplaatsen we de pictogrammen naar de onderkant van de pagina, waardoor het laden wordt uitgesteld zoals we vaak doen met JavaScript. We proberen dit in de video, maar hebben problemen met het renderen van de pictogrammen die we later hebben geprobeerd . Om eerlijk te zijn, ik heb inconsistent gedrag of verschillende typen in andere browsers gezien die het ook op deze manier deden, en het lijkt erop dat het landschap in dit opzicht een beetje verschuift. Dus ik heb gehoord: het is moeilijk te implementeren. Het is het veiligst om het blok bovenaan te plaatsen als u de defs in uw documenten behoudt.
In deze video bekijken we enkele basistests van dit alles, en kijken vervolgens naar enkele echte websites die dit systeem gebruiken en hoe / waar ze het svg defs-blok invoegen.
Zie de Pen 954e71cb5d5e79fb61d3c89bb3f21b8a door Chris Coyier (@chriscoyier) op CodePen.
Notitie
Ik hou van de term "SVG defs block" - zodat we het iets kunnen noemen dat een specifiek doel heeft maar niet echt een officiële naam heeft. Maar u hoeft niet altijd een tag te gebruiken. Als je s gebruikt, worden die sowieso niet vanzelf weergegeven, en ik denk inderdaad niet dat ze van binnen horen te zijn . Ik heb gehoord dat de definities van verlopen in SVG hetzelfde zijn, en zelfs niet werken als ze zich in de . Hoe dan ook, het is nog steeds een "blok SVG-code dat we net definiëren om later te gebruiken", dus ik zal het waarschijnlijk een "SVG defs-blok" blijven noemen.