SVG má velmi cool a mocný prvek zvaný . Je to docela jednoduché v pojetí. Najde další bit SVG kódu, na který odkazuje ID, a naklonuje ho přes uvnitř prvku.
Nejzákladnější případ použití by byl: Už jsem tento tvar (y) na stránku jednou nakreslil (a) a chci jej nakreslit znovu na jiném místě. Jděte pro získání těchto tvarů a nakreslete je znovu.
Tuto schopnost můžeme použít jako kořenový koncept pro (drumroll!) A celý systém ikon! Můžeme vzít všechny tvary, které hodláme na stránce použít, v jednom velkém bloku SVG. Všechny zabalíme do značky, což je sémantický způsob, jak říci „Právě definujeme tyto věci, které použijeme později.“ To také zajišťuje, že nebudou render (ale měli byste také sám.display: none;
Funguje to takto:
Tento funky vypadající xlink:hrefatribut odkazuje na ID jinde. Toto ID může být na jakémkoli prvku tvaru, jako je nebo , nebo může být na skupině prvků, jako je .
Nejlepší ze všeho v případě ikonového systému může být na prvku. Kromě správné sémantiky (ikona je symbol, ne?) Může prvek nést vlastní atribut viewBox a informace o přístupnosti, jako a tagy. Díky tomu je implementace velmi snadná (jak je uvedeno výše).
Musíte se tedy ujistit, že je to definováno někde jinde v dokumentu:
Basketball Podívejte se na Pen JoDmd od Chrisa Coyiera (@chriscoyier) na CodePen.