14: SVG ikoonisüsteem - defektide väljatöötamine - CSS-trikid

Anonim

Element on sidur kogu see idee inline SVG ikooni süsteemi. Saime teada, et puhas viis seda teha on panna kõik, mida kavatsete hiljem joonistada, plokki, nii et see ei muutu, ja saame neile hiljem viidata (käskige brauseril see ikoon joonistada).

Selles videos veedame mõnda aega omaenda ploki käsitsi ehitamist . See pole eriti keeruline ja arvan, et see sõidab koju, kuidas see kõik töötab.

Me teeme selle SVG-st, mille leiame veebi erinevatest kohtadest. Haarame ühe The Noun Projectilt, ühe IcoMoonilt ja ühe Shutterstockilt. Teeme nõuetekohast hoolsust SVG avamisel, imelike kujundite parandamisel, lõuendi suuruse kinnitamisel ja mis veel. Siin pole piire, kust see vektoriteave pärineb. Need kolm allikat on lihtsalt selleks, et näidata teile, et SVG võib tulla kõikjalt vektorist.

Hiljem loodetavasti lihtsustame seda protsessi, kuid selle toimimise mutritest ja poltidest arusaamine on alati kasulik. Kunagi ei või teada, millal peate süvenema (nt selleks, et aru saada, miks midagi ei tööta õigesti).