SVG are un element foarte tare și puternic numit . Este destul de simplu ca concept. Găsește un alt bit de cod SVG, la care se face referire prin ID și îl clonează în interiorul elementului.
Cel mai simplu caz de utilizare ar fi: am desenat deja aceste forme o dată pe pagină și vreau să le desenez din nou în altă parte. Du-te să obții acele forme și desenează-le din nou.
Putem folosi această abilitate ca concept rădăcină pentru (drumroll!) Și întregul sistem de pictograme! Putem lua toate formele pe care intenționăm să le folosim pe pagină într-un bloc mare SVG. Le vom înfășura pe toate într-o etichetă care este o modalitate semantică de a spune „Definim doar aceste lucruri în care să le folosim mai târziu”. De asemenea, se asigură că nu vor reda (dar ar trebui să faceți și display: none;el însuși.
Funcționează așa:
Acest xlink:hrefatribut funky face referire la un ID în altă parte. ID-ul respectiv ar putea fi pe orice element de formă, cum ar fi a sau , sau ar putea fi pe un grup de elemente, cum ar fi un .
Cel mai bun din toate în cazul unui sistem de pictograme, acesta poate fi pe un element. Pe lângă faptul că este corect semantic (o pictogramă este un simbol, nu?), Elementul poate purta propriul atribut viewBox și informații de accesibilitate, cum ar fi și etichete. Acest lucru face implementarea foarte ușoară (așa cum se arată mai sus).
Deci, trebuie doar să vă asigurați că acest lucru este definit în altă parte în document:
Basketball Vedeți Pen JoDmd de Chris Coyier (@chriscoyier) pe CodePen.