SVG-l on väga lahe ja võimas element nimega . See on kontseptsioonilt üsna lihtne. See leiab veel ühe SVG-koodi, millele viitab ID, ja kloonib selle elemendi sisse.
Kõige elementaarsem kasutamisjuhtum oleks: ma olen selle kuju (d) juba kord lehele joonistanud ja tahan selle jälle kuhugi mujale joonistada. Mine võta see kuju (d) ja joonista see uuesti.
Me võime seda võimalust kasutada (drumroll!) Ja kogu ikoonisüsteemi juurkontseptsioonina! Saame võtta kõik kujundid, mida kavatseme lehel kasutada, ühes suures SVG-plokis. Pakime need kõik silti, mis on semantiline viis öelda: "Me lihtsalt määratleme need asjad, mida hiljem kasutada." Samuti muudab kindel, et nad ei muuda (aga sa peaksid ka ise.display: none;
See töötab nii:
See funky välimusega xlink:hrefatribuut viitab ID-le mujal. See ID võib olla mis tahes kujuelementil, näiteks a või , või see võib olla elementide rühmal nagu a .
Kõige parem on ikoonisüsteemi puhul see, et see võib olla elemendil. Lisaks sellele, et element on semantiliselt korrektne (ikoon on sümbol, pole?), Võib element kanda ka oma viewBoxi atribuudi ja juurdepääsetavuse teavet, nagu ja sildid. See muudab rakendamise väga lihtsaks (nagu eespool näidatud).
Nii et peate lihtsalt veenduma, et see on dokumendis mujal määratletud:
Basketball Vaadake Chris Coyieri (@chriscoyier) Pen JoDmd-i CodePenis.