14: Sistem de pictograme SVG - Construirea definițiilor - CSS-Tricks

Anonim

Element este ambreiaj pentru toată această idee a unui sistem pictogramă SVG inline. Am aflat că o modalitate curată de a face acest lucru este să puneți tot ceea ce intenționați să desenați mai târziu într-un bloc, astfel încât să nu se redea și să le putem referi mai târziu (spuneți-le browserului să deseneze acea pictogramă).

În acest videoclip vom petrece ceva timp construindu-ne propriul bloc manual. Nu este deosebit de dificil și, cred, conduce acasă cum funcționează toate acestea.

O vom face din SVG pe care îl găsim în diferite locuri de pe web. Luăm unul de la The Noun Project, unul de la IcoMoon și unul de la Shutterstock. Ne străduim să deschidem SVG-ul, să reparăm orice forme ciudate, să strângem dimensiunea pânzei și ce nu. Aici nu există nicio limită de unde pot proveni aceste informații vectoriale. Aceste trei surse sunt doar pentru a vă arăta că SVG poate proveni din orice vector.

Mai târziu, sperăm să simplificăm acest proces, dar înțelegerea elementelor de funcționare este întotdeauna utilă. Nu știi niciodată când va trebui să sapi mai adânc (de exemplu, pentru a-ți da seama de ce ceva nu funcționează corect).