SVG-Tutorial

 (svg-tutorial.com)
6 Punkte von GN⁺ 2023-12-08 | 1 Kommentare | Auf WhatsApp teilen
  • SVG-Lernmaterial, mit dem man Bilder direkt als Code in HTML zeichnen kann und das sich Schritt für Schritt von Grundformen bis hin zu Interaktionen durcharbeiten lässt
  • Der Lernpfad erweitert sich von grundlegenden Elementen wie viewBox, polygon und polyline zu path, Bézier-Kurven und Arc
  • Der Abschnitt zu Transformationen behandelt Rotation, Verschiebung, Wiederverwendung, Skalierung und allgemeine Transformationen, und der CSS-Teil führt weiter zu Animationen, Hover- und pfadbasierten Animationen sowie zu Inline-SVG in CSS
  • In den fortgeschrittenen Themen werden Text, clip-path und Verläufe behandelt; mit JavaScript übt man eine Uhr, die die tatsächliche Zeit anzeigt, Interaktionen, datenbasierte Diagramme und die Aufteilung in mehrere Komponenten
  • Es gibt außerdem Editor-Links für line, circle, rect, polyline, polygon, text sowie quadratic/cubic Bézier curve und Arc, sodass man die einzelnen Elemente direkt ausprobieren kann

Aufbau des Tutorials

SVG-Elemente und path-Segmente zum Ausprobieren

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2023-12-08
Meinungen auf Hacker News

  • Die Kombination SVG + React wird unterschätzt. Man kann die Abstraktionen und die Power von React genauso nutzen, aber statt DOM beliebige Grafiken rendern; für manche Anwendungsfälle wie das Rendern von Graphen oder Diagrammen halte ich das für deutlich besser als Canvas.
    Besonders gut ist es, wenn man nichts grafisch Komplexes wie pixelgenaue Manipulation braucht, sondern nur ein wenig Interaktion. In Canvas ist es mühsam, Hover-Effekte zu bauen, weil man selbst berechnen muss, über welchem Element sich die Maus befindet; in SVG kann man eingebaute Funktionen wie onmouseover verwenden.

    • Stimmt. Dass man Click-Listener an SVG hängen und es per CSS wie normales HTML stylen kann, fühlt sich manchmal wie Magie an, und React / JSX macht die Nutzung einfach.
    • Gibt es gutes Einstiegsmaterial zu diesem Thema? Auch bei React bin ich noch fast Anfänger, aber ich glaube, da könnte man sich ziemlich gut und mit Spaß hineinarbeiten.
      Ein funktionierendes Beispiel, das Richtung oder Inspiration gibt, wäre schön.
    • Ich habe einmal mit Preact.js und SVG eine Komponente für Bildsegmentierung + Tagging für den Client gebaut, und das Ergebnis war ziemlich gut. Für Anwendungen dieser Art kann ich das empfehlen.
    • Stimmt. HTML Canvas ist in vielen Fällen deutlich performanter, aber wenn man nicht gerade das nächste Figma baut, ist die Arbeit mit SVG viel bequemer.
    • Ich codiere Muster zum Schneiden mit dem GlowForge in React & SVG, und das funktioniert sehr gut.

  • Insgesamt ein hervorragendes Material, und die Beispiele sind wirklich klar. Allerdings führt der im Abschnitt clip-path vorgeschlagene Code dazu, dass der große Kreis zweimal beschrieben wird; wenn man die Kreisgröße ändern will, muss man zwei Stellen anpassen.
    Da bereits defs verwendet wird, fände ich es besser, dieselbe Definition wiederzuverwenden.

    • Man braucht auch kein zweites Element; man kann den Kreis einfach normal rendern und ihn dann innerhalb von clipPath referenzieren.
      Persönlich würde ich auch das Umschließen mit <g> weglassen. Ich habe nie verstanden, warum diese Struktur empfohlen wird, und außer in den extrem seltenen Fällen, in denen man ein Element einfügen möchte, das gerendert würde, wenn es nicht in <defs> stünde, scheint sie keinen Nutzen zu bringen. Für Situationen wie defs/circle im Beispiel ist normalerweise <symbol> das Richtige.
    • Das stimmt und ist eine gute Idee. Vielleicht könnte man eine entsprechende Notiz ergänzen.

  • Wirklich großartig. SVG ist ein sauberes und flexibles Format, und weil es direkt mit einem laufenden Nebenprojekt von mir zu tun hat, werde ich mir die Zeit nehmen, dem Tutorial zu folgen.
    Wie andere fand ich es ziemlich spannend, SVG-basierte React-Komponenten zu bauen. React und JSX erleichtern es, Interaktion hinzuzufügen, und SVG ermöglicht UIs, die sich nur mit HTML nicht leicht erstellen lassen.
    Für ein Nebenprojekt zur Musiktheorie habe ich eine React-Komponente veröffentlicht, die einen interaktiven Circle of Fifths rendert. Es gibt noch viel zu tun, aber sie ist nutzbar: https://github.com/epiccoleman/react-circle-of-fifths
    Ich habe auch einen Artikel darüber geschrieben, wie man den Circle of Fifths mit SVG erstellt; besonders gefällt mir der erklärende Mittelteil, der den Prozess des Zeichnens komplexer Elemente nachvollzieht: https://epiccoleman.com/posts/2023-04-05-svg-circle-of-fifth...
    Derzeit baue ich auf ähnliche Weise einen Generator für Griffbrettdiagramme, und es ist nützlich, meinen früheren Artikel wieder als Referenz ansehen zu können. Das Gute daran, die eigene Arbeit aufzuschreiben, ist, dass man „abspielen“ kann, wie man ein Problem gelöst hat.

  • Dieses Material gefällt mir. Ich habe in React ein paar Inline-SVGs erstellt und Interaktion hinzugefügt; damit herumzuspielen macht wirklich Spaß.
    Besonders nützlich ist das Tag <foreignObject>. Damit kann man normales HTML in SVG einbetten, sodass man Dinge, die HTML besser kann – Links, Bilder, grundlegendes Flexbox-Styling – innerhalb eines SVG-Art-Projekts erledigen kann.
    An den Autor: Einige Links auf der Website funktionieren nicht. Unten auf der Seite ist bio.link nicht erreichbar, und der Link zur interaktiven Bézier-Kurven-Demo in Day 11 „How to Draw Quadratic Bézier Curves with SVG“ ist ebenfalls offline.

    • Den Link zur interaktiven Demo habe ich repariert. Die Seite scheint vermutlich mit Vue gebaut zu sein, weshalb Deep Links nicht immer zuverlässig funktionieren.
      Bei bio.link sehe ich kein Problem; mich würde interessieren, welche Fehlermeldung du siehst.
    • Auf der Seite https://svg-tutorial.com/svg/transform verweist der Link „next example“ unten ebenfalls auf /svg/path und führt zu einem 404; der richtige Link scheint /svg/use zu sein.
    • Irgendwas ist immer kaputt. Ich werde es mir ansehen.
      foreignObject kannte ich selbst nicht, aber das ist wirklich gut.

  • Vor ein paar Jahren habe ich an einem Interface gearbeitet und für einige Grafiken SVG verwendet. Es gab zwei Farbschemata, aber eine Grafik lag nur in einem Schema vor, also bin ich über den Flur gegangen, um den Hex-Code für die andere Farbe zu holen.
    Ich war ziemlich verblüfft, als ich sah, wie der Designer die SVG-Datei öffnete und einfach alle Farben suchte und ersetzte, um die zweite Farbversion zu erstellen.

    • Daran hatte ich überhaupt nicht gedacht. Ein toller Tipp, der einem irgendwann viel Zeit sparen kann.
    • Interessant – könntest du den Teil „bin über den Flur gegangen, um den Hex-Code für die andere Farbe zu holen“ etwas genauer erklären?

  • Hervorragend. Besonders die Beispiele zu Kurven und Clipping gefallen mir, mit denen ich immer noch kämpfe.
    Persönlich bevorzuge ich path, weil man damit fast alles machen kann und es weniger ausführlich ist als andere Wege.
    Ich lerne das schon lange, habe aber das Gefühl, dass es noch viel zu lernen gibt. Weil ich wirklich schlecht zeichne und Bilder auch nicht besonders mag, habe ich ein ganzes Nebenprojekt aus Gründen der Bequemlichkeit und Performance mit SVG gebaut.
    Nach dem heutigen Material habe ich das Gefühl, dass ich ziemlich viel refaktorieren muss: https://eddiots.com/1

    • Freut mich, dass es geholfen hat. Der Comic ist auch toll.

  • Danke für das gute Feedback; ein paar der gemeldeten Fehler habe ich behoben. Wenn noch etwas nicht funktioniert, sagt gern Bescheid. Ich bin noch ein wenig beim Feinschliff
    Weiß zum Beispiel jemand, warum die Thumbnail-Vorschau bei Twitter nicht funktioniert? Auf Unterseiten funktioniert sie problemlos

  • Sehr gut. Das Problem, mit dem ich gerade kämpfe, ist Text + Bild, daher wären ein oder zwei passende Beispiele schön
    Ausrichtung ist wirklich mühsam. Ich habe auch Inkscape ausprobiert, aber um das zu erstellen, was ich brauche, läuft es eindeutig eher darauf hinaus, „XML direkt zu schreiben“

    • Mit Text habe ich außer Beispielen, bei denen er einer Linie folgt, nicht viel experimentiert
      text-anchor kenne ich: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/t...
      Und hier hat jemand vorgeschlagen, dass das Tag foreignObject nützlich sein könnte: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    • Text ist definitiv lästig. Ich habe schnell etwas Python-Code gebaut, der mit svgwrite Tabellen erzeugt, und Text an die gewünschte Stelle zu setzen war die Hölle
      Am Ende habe ich mehrere Werte halbwegs passend korrigiert und es bei „gut genug“ belassen. Ich stimme zu, dass Beispiele für nichttriviales Text-Layout nötig wären
      [0] Der GitHub-Link ist im Profil
    • Die Ausrichtungsfunktion von Inkscape funktioniert für mich gut. Wenn es präziser sein muss, drücke ich ctrl+shift+x und gebe die Koordinaten direkt ein
      Der XML-Editor von Inkscape stürzt in meiner Umgebung ziemlich oft ab, aber wenn man daran denkt, nach jeder Bearbeitung zu speichern, ist er brauchbar

  • Wie macht man das normalerweise? Coden Leute SVG direkt, oder zeichnen sie es in etwas wie Figma und generieren dann eine SVG-Datei?

    • Da ich als Grafikdesigner ausgebildet wurde, habe ich es meist direkt in Inkscape gezeichnet oder aus anderen Programmen importiert
      Um die Dateigröße bei http://shapeoko.github.io/Docs/ auf ein vernünftiges Niveau zu bringen, war ziemlich viel Arbeit nötig
      Später habe ich auch einen Mechanismus gebaut, bei dem sich ein Bild beim Anklicken in einem neuen Fenster öffnet: http://shapeoko.github.io/Docs/content/tPictures/PS20028-100...
      Außerdem konnte ich dafür sorgen, dass beim Anklicken eines Bauteilnamens in der Stückliste das entsprechende Bauteil im Diagramm hervorgehoben wird
    • Leute aus dem Designbereich werden ihre bevorzugten Editoren wie Illustrator, Sketch oder Inkscape verwenden. Coder können mit solcher Software ebenfalls kleine Änderungen vornehmen, aber wenn Interaktion im Spiel ist, bearbeitet man SVG meist direkt
      Komplexe Formen oder Kurven werfe ich manchmal in einen Online-Editor, um sie zu visualisieren; dieses Tool ist gut: https://yqnn.github.io/svg-path-editor/
    • Für komplexere Grafiken ist es wohl weiterhin besser, Designer-Tools zu verwenden. Einfache Grafiken kann man aber auch direkt coden
      Wenn man einen Pfeil oder ein Hamburger-Menü-Icon braucht, kann man direkt in den Code gehen. Manchmal fange ich mit Papier und Stift an und passe dann die Koordinaten an, bis es gut genug aussieht
    • Mit neuen Transformer-basierten Vektormodellen wie denen von Adobe wird das Erzeugen von SVG einfacher denn je: https://www.adobe.com/products/illustrator/text-to-vector-gr...
    • In den Projekten, an denen ich gearbeitet habe, habe ich die Dateien mit Inkscape erstellt oder bearbeitet und sie dann wie normale Bilder verlinkt
      Manchmal brauchte eine bestimmte statische Seite eine eigene Grafik, die ich dann in die Seite eingebettet habe, aber in solchen Fällen war die Grafik nicht besonders komplex

  • Eine Sache, die mir kürzlich klar geworden ist: Man kann SVG-Tags in einer React-Anwendung inline wie JSX-Tags einfügen
    Ich weiß nicht, ob das genau First-Class-Support ist oder ob Webpack das übernimmt, aber in einigen Fällen fühlt es sich sehr gut an, SVG-Komponenten mit Logik zu bauen. Jetzt kann man Form, Farbe, das Weglassen bestimmter Abschnitte usw. eines SVG mit React-basierter Logik ändern

    • Für einfache SVGs oder Fälle, in denen viele Varianten nötig sind, ist das gut
      Wenn man SVG-Code aber inline einfügt, kann der Browser das Bild nicht cachen. Wenn das SVG groß ist oder es nur wenige Varianten gibt, kann es besser sein, für jede Bildvariante einen eigenen Endpoint zu haben
      https://chat.openai.com/share/49e91be6-bdef-4f4d-a263-80a884...
    • Genau. Seit HTML5 kann man SVG inline einfügen, und man braucht nichts wie Webpack. Es funktioniert einfach
      Eines der Beispiele in diesem Tutorial ist ebenfalls ein datengetriebenes Diagramm, das in React erzeugt wurde. Wenn man beides kombiniert, kann man ziemlich coole Dinge machen