14: SVG-Symbolsystem - Aufbau von Defs - CSS-Tricks

Anonim

Das Element ist Teil dieser ganzen Idee eines Inline-SVG-Symbolsystems. Wir haben gelernt, dass eine saubere Methode darin besteht, alles, was Sie später zeichnen möchten, in einen Block zu setzen, damit es nicht gerendert wird, und wir können später darauf verweisen (sagen Sie dem Browser, dass er dieses Symbol zeichnen soll).

In diesem Video werden wir einige Zeit damit verbringen, unseren eigenen Block von Hand zu bauen. Es ist nicht besonders schwierig und ich denke, es fährt nach Hause, wie das alles funktioniert.

Wir werden es aus SVG machen, das wir an verschiedenen Stellen im Web finden. Wir holen uns eines von The Noun Project, eines von IcoMoon und eines von Shutterstock. Wir tun unsere Sorgfalt, um die SVG zu öffnen, seltsame Formen zu reparieren, die Leinwandgröße zu verbessern und so weiter. Hier gibt es keine Begrenzung, woher diese Vektorinformationen stammen können. Diese drei Quellen sollen Ihnen nur zeigen, dass SVG von jedem beliebigen Vektor stammen kann.

Später werden wir diesen Prozess hoffentlich vereinfachen, aber es ist immer nützlich, die Grundlagen der Funktionsweise zu verstehen. Sie wissen nie, wann Sie tiefer graben müssen (z. B. um herauszufinden, warum etwas nicht richtig funktioniert).