SVG har ett mycket coolt och kraftfullt element som heter . Det är ganska enkelt i konceptet. Den hittar en annan bit SVG-kod, refererad av ID, och klonerar den inuti elementet.
Det mest grundläggande användningsfallet skulle vara: Jag har redan ritat den här formen en gång på sidan och jag vill rita den igen någon annanstans. Gå och få den formen / formarna och rita den igen.
Vi kan använda den förmågan som rotkoncept för (drumroll!) Och hela ikonsystemet! Vi kan ta alla former vi tänker använda på sidan i ett stort SVG-block. Vi förpackar dem alla i en tagg som är ett semantiskt sätt att säga "Vi definierar bara dessa saker som vi kan använda senare." Det gör också att de inte kommer att göra (men du bör också display: none;den själv.
Det fungerar så här:
Det funky xlink:hrefattributet refererar till ett ID någon annanstans. Det ID kan vara på ett valfritt formelement, som ett eller , eller det kan vara på en grupp av element som ett .
Bäst av allt när det gäller ett ikonsystem kan det vara på ett element. Förutom att vara rätt semantiskt (en ikon är en symbol, eller hur?), Det elementet kan bära sin egen viewBox attribut och tillgänglighetsinformation, som och taggar. Detta gör implementeringen väldigt enkel (som visas ovan).
Så du behöver bara se till att detta definieras någon annanstans i dokumentet:
Basketball Se Pen JoDmd av Chris Coyier (@chriscoyier) på CodePen.