Coole Dinge mit SVG

 (fuma-nama.vercel.app)
3 Punkte von GN⁺ 2025-04-13 | 2 Kommentare | Auf WhatsApp teilen
  • SVG ist ein leistungsstarkes Werkzeug, um Vektorgrafiken im Web darzustellen
  • Mit Animationen lassen sich SVG-Elemente noch attraktiver gestalten
  • Mit Masken können bestimmte Teile von SVG-Elementen hervorgehoben oder verborgen werden
  • Mit Server-Side Rendering lässt sich ein TOC ohne clientseitiges JavaScript umsetzen
  • Durch die Kombination von CSS und SVG können interaktive Elemente erstellt werden

SVG-Animationen

  • SVG wird verwendet, um Vektorgrafiken im Web darzustellen
  • Enthält Beispielcode, der in JSX (React) geschrieben ist
  • Mit line oder path lassen sich Linien erzeugen, die als Maske verwendet werden können, um Animationen hinzuzufügen
  • Mit @keyframes werden Animationen definiert, und über die Eigenschaft transform kann die Position von Elementen verändert werden
  • In Figma oder anderen SVG-Editoren gestaltete Bereiche können genutzt werden, um Animationsblöcke als Maske zu verarbeiten

Inhaltsverzeichnis im Clerk-Stil

  • Ein Inhaltsverzeichnis im Clerk-Stil wurde in Fumadocs umgesetzt
  • Das Inhaltsverzeichnis wird auf dem Server gerendert, damit es mit SSR kompatibel ist und ohne clientseitiges JavaScript auskommt
  • Das Inhaltsverzeichnis wird in einer Server-Umgebung gerendert, in der die exakte Position von Elementen bei Verwendung absoluter Positionierung nicht bekannt ist
  • Ein animierter Bereich namens thumb wurde hinzugefügt, um den aktiven Eintrag hervorzuheben
  • Mithilfe der auf dem Client gerenderten Positionsinformationen wird mit SVG eine „Mask Map“ aufgebaut
  • Über die Eigenschaft mask-image wird ein animierter div-Block maskiert, um den hervorgehobenen Bereich des Inhaltsverzeichnisses zu rendern

Inspiriert von Clerk wurde das Inhaltsverzeichnis einer Dokumentationsseite interessanter umgesetzt.

Verwandte Beiträge

2 Kommentare

 
ndrgrd 2025-04-14

Sieht zwar toll aus, aber wenn man einfach nur das aktuelle Element eindeutig hervorhebt, fällt das eher ins Auge.
 
GN⁺ 2025-04-13
Hacker-News-Kommentare

  • Sarah Drasners Vortrag "SVG Can Do That?" ist auch nach 8 Jahren für viele Menschen noch überraschend. CSS hat sich seitdem stark weiterentwickelt, bei SVG selbst bin ich mir weniger sicher. Trotzdem sehr zu empfehlen

  • Eines der interessanten Dinge, die man mit SVG-Dateien machen kann, ist, in einer Inline-DTD Entitäten zu verwenden, um Konstanten zu definieren, die an mehreren Stellen in der Datei gemeinsam genutzt werden können. Ein gutes Beispiel findet sich auf David Ellsworths Seite "Squares in Squares"

  • Komplexe animierte SVGs machen Spaß, sind aber schwierig wegen der Komplexität von SMIL und Problemen wie Safari, das Schwierigkeiten macht, wenn vor Gleitkommazahlen keine 0 steht

  • Nanda Syahrasyads "A Deep Dive Into SVG Path Commands" ist sehr hilfreich, um zu verstehen, wie SVG-Pfade aufgebaut sind. Das Material ist zwar fast 2 Jahre alt, öffnet einem aber die Augen dafür, was SVG alles kann und wie es funktioniert

  • Wenn jemand JS kreativ einsetzt, um SVG dynamisch zu erzeugen, soll er mir bitte eine DM schicken

  • Ich habe in einem mit React gebauten Projekt interessante Arbeiten mit SVG gemacht. Es gab eine Serie statischer Illustrationen und animierter Elemente, und die Farben wurden über ein CMS gesteuert

  • SVG+CSS ist sehr mächtig. Eine einfache Funktion, die ich mag, ist das Erstellen von Diagrammen, die ohne JavaScript den Dunkel-/Hellmodus respektieren. Beispieldiagramm: blog.davidv.dev/posts/ipvs-lb/

  • Ich frage mich, ob es eine SVG-Erweiterung gibt, die Liniendichte erlaubt. Ich habe einen Plotter, bei dem ich den Stift anheben und absenken kann, und er wird durch SVG-Dateien gesteuert. Es wäre schön, wenn man den Stift auch während des Zeichnens abgesenkt halten könnte

    • Ah, es ist der Axidraw von Evil Mad Scientist Labs. Ein großartiges Gerät und tolle Leute

  • Toller Beitrag, und auch das Site-Design ist großartig. SVG gibt es schon lange, aber es fühlt sich so an, als sei sein Potenzial noch nicht vollständig ausgeschöpft. Mir fällt kein anderes Element ein, das HTML, CSS und JS funktional kapseln kann. Man kann es im Grunde genauso einfach wie ein vollständig separates HTML-Dokument verwenden

  • SVG wirkt wie ein sehr unerforschtes und wenig genutztes Gebiet. Je nach Vorstellungskraft kann man damit sehr viel machen. Allerdings muss man manches vielleicht ziemlich "hardcore" umsetzen, daher hängt es vom jeweiligen Anwendungsfall ab