14: SVG Icon System - Defs építése - CSS-trükkök

Anonim

Az elem a belső SVG ikonrendszer egész ötletéhez kapcsolódik. Megtudtuk, hogy ennek tiszta módja az, hogy mindent, amit később rajzolni szándékozol, blokkba rakod, így az nem jelenik meg, és később hivatkozhatunk rájuk (mondd meg nekik a böngészőnek, hogy rajzolja meg az ikont).

Ebben a videóban el fogunk tölteni egy kis időt a saját blokkunk kézi építésével . Nem különösebben nehéz, és azt hiszem, hazafelé hajtja mindezeket.

Az SVG-től fogjuk elkészíteni, amelyet az internet különböző helyein találunk. Megragadunk egyet a The Noun Project-től, egyet az IcoMoon-tól és egyet a Shutterstock-tól. Megfelelő gondossággal végezzük az SVG megnyitását, az esetleges furcsa alakzatok javítását, a vászon méretének összeszorítását és még mást. Itt nincs korlátozva, hogy honnan származhatnak ezek a vektor információk. Ez a három forrás csak annak bemutatására szolgál, hogy az SVG bárhonnan származhat vektorból.

Később remélhetőleg leegyszerűsítjük ezt a folyamatot, de a működési anyák és csavarok megértése mindig hasznos. Soha nem tudhatod, mikor kell mélyebbre ásnod (pl. Hogy kiderítsd, miért nem működik valami jól).