SVG-Tutorial

Zusammenfassung des SVG-Tutorials

• Ein von Hunor Márton Borbély erstelltes SVG-Tutorial, mit dem man Schritt für Schritt lernen kann, wie SVG-Bilder programmiert werden – von grundlegenden Formen bis hin zu komplexen Animationen.
• Es behandelt verschiedene Themen wie das Zeichnen grundlegender Formen, einen Weihnachtsbaum, eine Lebkuchenfigur und ein Haus und stellt dabei unterschiedliche SVG-Funktionen vor, darunter Clip-Pfade, Farbverläufe, Bézier-Kurven und das Zeichnen von Text entlang eines Pfads.
• Außerdem enthält es Methoden zur Kombination von SVG mit anderen Technologien, etwa das Zeichnen einer Uhr mit JavaScript, das Hinzufügen von Interaktionen zu SVG-Elementen oder das Erzeugen von SVG-Diagrammen mit JavaScript.

Meinung von GN⁺

• Dieses Tutorial ist eine gute Ressource, mit der Software Engineers am Anfang ihrer Laufbahn systematisch das Programmieren von SVG-Bildern erlernen können – von den Grundlagen bis zu fortgeschrittenen Techniken.
• Besonders nützlich und interessant dürften die praktischen Beispiele sein, etwa wie man eine Uhr baut, die die tatsächliche Zeit anzeigt, oder wie man SVG-Elementen Interaktionen hinzufügt.
• Für alle, die SVG lernen möchten, ist dieses Tutorial ein attraktives Lernmaterial, das das Verständnis für grafisches Webdesign erweitert und die Fähigkeit verbessert, Webseiten originelle visuelle Elemente hinzuzufügen.

[GN⁺]

Hacker-News-Kommentare

• Die Kombination aus SVG und React wird unterschätzt. Man kann alle Funktionen und Abstraktionen von React nutzen und beliebige Grafiken statt des DOM rendern. Beim Rendern von Graphen und Diagrammen hat es sich gezeigt, dass es Canvas in bestimmten Situationen übertrifft. Zum Beispiel ist es nützlich, wenn einfache Interaktionen benötigt werden, aber keine komplexe Grafik wie pixelgenaue Manipulationen.
• SVG ist ein flexibles Format, und es lohnt sich, Zeit in das Lernen über entsprechende Tutorials zu investieren. In Kombination mit React-Komponenten kann man mit SVG beeindruckende UIs umsetzen, die nur mit HTML schwer zu realisieren wären.
• Eine interaktive "Circle of Fifths"-Komponente, die mit React umgesetzt wurde, wurde für ein Musiktheorie-Side-Project verwendet. Die Komponente ist nutzbar, und ein Blogbeitrag über den Aufbau eines Circle of Fifths mit SVG ist hilfreich.
• Im Beispiel zur Verwendung von <clip-path> in SVG ist es ineffizient, den großen Kreis zweimal zu definieren. Wenn man die Größe ändert, muss man beide Stellen anpassen; wenn defs ohnehin schon verwendet wird, ist es besser, den Kreis nur einmal zu definieren und wiederzuverwenden.
• Inline-SVG-Coding mit SVG und React macht Spaß, und mit dem Tag <foreignObject> kann man SVG innerhalb von HTML nutzen, was für Dinge nützlich ist, die HTML besser kann (Links, Bilder, grundlegendes Flexbox-Styling usw.).
• Vor ein paar Jahren wurde bei Interface-Arbeiten SVG verwendet, und für zwei Farbschemata wurde einfach der Farbcode in der SVG-Datei gesucht und ersetzt, was den Designer überrascht hat.
• Es wird Dank für das positive Feedback zum Tutorial ausgedrückt, und die gefundenen Fehler wurden korrigiert. Es wird noch feinjustiert, und es wird gefragt, ob jemand weiß, warum zum Beispiel die Thumbnail-Vorschau auf Twitter nicht funktioniert.
• Es gibt eine kleine Beschwerde über den Begriff SVG-"Tag". Als man mit HTML angefangen hat, wurde alles als "Tag" bezeichnet, aber nach dem Aufkommen von XHTML begann man, es "Element" zu nennen. Gedanklich ist es immer noch ein "Tag", aber inzwischen sagt man "Element".
• Die Beispiele zu Kurven und Clipping gefallen besonders gut. path wird bevorzugt, weil man damit fast alles machen kann und es weniger wortreich ist als andere Methoden. Da Zeichnen nicht liegt und Bilder nicht gemocht werden, wurde aus Performance- und Bequemlichkeitsgründen ein ganzes Side-Project mit SVG aufgebaut. Durch dieses Tutorial wurde klar, dass es viel zum Refaktorieren gibt.
• Es wäre schön, ein Beispiel mit Text und Bildern zusammen zu sehen. Derzeit wird mit genau diesem Problem gekämpft, und die Ausrichtung ist knifflig. Es gibt Erfahrung mit Inkscape, aber man gehört eher zur XML-schreibenden Fraktion, um das zu erzeugen, was gebraucht wird.
• Es wird gefragt, ob es gängige Praxis ist, SVG direkt zu coden, oder ob es üblicher ist, zum Beispiel in Figma zu zeichnen und daraus eine SVG-Datei zu erzeugen.