SVG har et veldig kult og kraftig element som heter . Det er ganske enkelt i konseptet. Den finner en annen bit SVG-kode, referert til av ID, og kloner den over i elementet.
Den mest grunnleggende brukssaken ville være: Jeg har allerede tegnet denne formen (ene) en gang på siden, og jeg vil tegne den igjen et annet sted. Gå og få den formen / formene, og tegne den igjen.
Vi kan bruke den evnen som rotkonsept for (drumroll!) Og hele ikonsystemet! Vi kan ta alle figurene vi har tenkt å bruke på siden i en stor SVG-blokk. Vi vil pakke dem alle sammen i en merkelapp som er en semantisk måte å si "Vi definerer bare disse tingene vi skal bruke senere." Det gjør også at de ikke vil gjengi (men du bør også display: none;den selv.
Det fungerer slik:
Det funky xlink:hrefattributtet refererer til en ID andre steder. At ID kan være på et hvilket som helst formelement, som et eller , eller det kan være på en gruppe av elementer som en .
Best av alt når det gjelder et ikon-system, kan det være på et element. I tillegg til å være korrekt semantisk (et ikon er et symbol, nei?), Kan elementet bære sin egen viewBox-attributt og tilgjengelighetsinformasjon, som og koder. Dette gjør implementeringen veldig enkel (som vist ovenfor).
Så du trenger bare å sørge for at dette er definert et annet sted i dokumentet:
Basketball Se Pen JoDmd av Chris Coyier (@chriscoyier) på CodePen.