Das <use>-Element ist entscheidend für die Idee eines Inline-SVG-Iconsystems. Wir haben gelernt, dass ein sauberer Weg, dies zu tun, darin besteht, alles, was wir später zeichnen wollen, in einen <defs>-Block zu legen, damit es nicht gerendert wird und wir später darauf verweisen können (dem Browser sagen, er soll dieses Icon zeichnen).
In diesem Video werden wir etwas Zeit damit verbringen, unseren eigenen <defs>-Block von Hand zu erstellen. Es ist nicht besonders schwierig und, wie ich denke, verdeutlicht es, wie das alles funktioniert.
Wir werden ihn aus SVGs erstellen, die wir an verschiedenen Stellen im Web finden. Wir holen uns eines vom Noun Project, eines von IcoMoon und eines von Shutterstock. Wir machen unsere Hausaufgaben, indem wir das SVG öffnen, seltsame Formen korrigieren, die Leinwandgröße anpassen und so weiter. Es gibt keine Grenzen dafür, woher diese Vektorinformationen stammen können. Diese drei Quellen dienen nur dazu, Ihnen zu zeigen, dass SVG von überall kommen kann, wo Vektoren sind.
Später werden wir diesen Prozess hoffentlich vereinfachen, aber das Verständnis der Grundlagen, wie es funktioniert, ist immer nützlich. Man weiß nie, wann man tiefer graben muss (z. B. um herauszufinden, warum etwas nicht richtig funktioniert).
Hallo, mit Ihren Videos ist SVG nicht beängstigend. Tolle Arbeit.
Bei mir funktioniert es nicht, ich kopiere den Pfad, die Viewbox, erstelle ein Symbol in Defs und mache eine Referenz im Use-Tag, aber es wird nicht angezeigt, funktioniert das heute noch?