SVG ima vrlo cool i moćan element tzv . Koncept je prilično jednostavan. Pronalazi još jedan bit SVG koda na koji se poziva ID i klonira ga unutar elementa.
Najosnovniji slučaj upotrebe bio bi: Već sam jednom nacrtao ovaj oblik (oblika) na stranici i želim ga ponovno nacrtati negdje drugdje. Idite po taj oblik (e) i nacrtajte ga ponovo.
Tu sposobnost možemo koristiti kao korijenski koncept (drumroll!) I cijelog sustava ikona! Sve oblike koje namjeravamo koristiti na stranici možemo uzeti u jedan veliki SVG blok. Sve ćemo ih zamotati u oznaku koja je semantički način da kažemo "Mi samo definiramo te stvari koje ćemo kasnije koristiti." Također se čini da oni neće prikazati (ali trebali biste također sama.display: none;
Djeluje ovako:
Taj xlink:hrefatribut funky izgleda negdje drugdje upućuje na ID. Taj ID može biti na bilo kojem elementu oblika, poput ili , ili može biti na grupi elemenata poput .
Najbolje od svega, u slučaju sustava ikona, može biti na elementu. Osim što je semantički ispravan (ikona je simbol, zar ne?), Element može nositi svoj atribut viewBox i informacije o pristupačnosti, poput i oznaka. To čini provedbu vrlo jednostavnom (kao što je gore prikazano).
Dakle, samo trebate osigurati da je to definirano negdje drugdje u dokumentu:
Basketball Pogledajte Pen JoDmd Chrisa Coyiera (@chriscoyier) na CodePenu.