Autoren · Profil
Mateusz Viola arbeitet bei AKARA Solutions in Pinneberg und verantwortet die technische Seite von svgpatheditor.de. Stack: ein eigener Parser und Serializer für das SVG-d-Attribut, der alle Pfadbefehle von Move und Line über die kubischen und quadratischen Bézier-Kurven bis zum Arc-Bogen zerlegt und wieder zusammensetzt; Astro 5 als statisches Hosting-Framework; React 19 für die interaktive Fläche mit ziehbaren Ankern und Kontrollpunkten. Die Bearbeitung läuft komplett im Browser, es werden keine Pfade hochgeladen. Sein Schwerpunkt liegt darauf, das d-Attribut ehrlich und nachvollziehbar zu halten: jedes Segment wird als einzelner Befehl geführt, implizite Wiederholungen werden ausgeschrieben, Arc-Flags auch in der kompakten Schreibweise korrekt erkannt. Ist die Eingabe ungültig, zeigt das Tool eine klare Fehlermeldung, statt still einen kaputten Pfad zu zeichnen. Bug-Reports oder Wünsche für weitere Funktionen gehen an info@akara-solutions.de.
Ratgeber von Mateusz
-
SVG-Pfade verstehen: das d-Attribut von Grund auf
Ein SVG-Pfad ist eine Kette aus Befehlen und Koordinaten im d-Attribut. Wie das Koordinatensystem funktioniert, was Move, Line und Close bedeuten und wie aus einer Zeichenkette eine Form wird, Schritt für Schritt und mit Beispielen erklärt.
-
Alle SVG-Path-Befehle im Überblick: M, L, H, V, C, S, Q, T, A, Z
Das d-Attribut kennt zehn Befehle, jeweils in absoluter und relativer Form. Was Move, Line, die horizontalen und vertikalen Kurzformen, die vier Bézier-Varianten, der Arc-Bogen und Close jeweils tun, mit der genauen Anzahl der Parameter und Praxisbeispielen.
-
Bézier-Kurven in SVG verstehen: kubisch, quadratisch, smooth
Kurven in SVG-Pfaden entstehen über Bézier-Befehle mit Kontrollpunkten. Wie kubische (C) und quadratische (Q) Kurven funktionieren, was die Smooth-Varianten S und T automatisch ergänzen und wie du mit den Kontrollpunkten die Form gezielt steuerst.