14: SVG-kuvakejärjestelmä - Defs-rakentaminen - CSS-temppuja

Anonim

Elementti on kytkin koko tähän ajatukseen inline SVG kuvaketta järjestelmä. Opimme, että puhdas tapa tehdä se on laittaa kaikki, mitä aiot piirtää myöhemmin, lohkoon, jotta sitä ei tehdä, ja voimme viitata niihin myöhemmin (käske selainta piirtämään kyseinen kuvake).

Tässä videossa vietämme jonkin aikaa rakentamaan omaa lohkoamme käsin. Se ei ole erityisen vaikeaa, ja mielestäni ajaa kotiin, miten kaikki tämä toimii.

Teemme sen SVG: ltä, jonka löydämme eri puolilta verkkoa. Otamme yhden The Noun Projectista, yhden IcoMoonista ja yhden Shutterstockista. Teemme asianmukaista huolellisuutta avatessamme SVG: n, korjaamalla kaikki outot muodot, pitämällä kankaan kokoa ja mitä muuta. Tässä ei ole rajoitusta siihen, mistä tämä vektoritieto voi tulla. Nämä kolme lähdettä ovat vain osoittamaan, että SVG voi tulla mistä tahansa vektorista.

Myöhemmin yksinkertaistamme tätä prosessia toivottavasti, mutta sen toiminnan muttereiden ja pulttien ymmärtäminen on aina hyödyllistä. Et koskaan tiedä, milloin sinun täytyy kaivaa syvemmälle (esim. Selvittääksesi miksi jokin ei toimi oikein).