SVG heeft een erg cool en krachtig element genaamd . Het is vrij eenvoudig van opzet. Het vindt nog een stukje SVG-code, waarnaar wordt verwezen door ID, en kloont dit binnen het element.
De meest basale use case zou zijn: ik heb deze vorm (en) al een keer op de pagina getekend en ik wil hem ergens anders nog een keer tekenen. Pak die vorm (en) en teken het opnieuw.
We kunnen die mogelijkheid gebruiken als het basisconcept voor (tromgeroffel!) En het hele pictogramsysteem! We kunnen alle vormen die we op de pagina willen gebruiken in één groot SVG-blok nemen. We verpakken ze allemaal in een tag, wat een semantische manier is om te zeggen: "We definiëren alleen deze dingen om later te gebruiken." Het zorgt er ook voor dat ze niet worden weergegeven (maar u moet ook display: none;de zelf.
Het werkt als volgt:
Dat funky uitziende xlink:hrefattribuut verwijst naar een ID ergens anders. Die ID kan op een willekeurig vormelement staan , zoals a of , of het kan op een groep elementen staan, zoals een .
Het beste van alles in het geval van een pictogramsysteem, kan dit op een element zijn. Behalve dat het semantisch correct is (een pictogram is een symbool, niet?), Kan het element zijn eigen viewBox-attribuut en toegankelijkheidsinformatie, zoals en tags dragen. Dit maakt de implementatie erg eenvoudig (zoals hierboven weergegeven).
U moet er dus voor zorgen dat dit ergens anders in het document is gedefinieerd:
Basketball Zie de Pen JoDmd door Chris Coyier (@chriscoyier) op CodePen.