Ratgeber
Was Du über SVG-Pfade wissen solltest
Acht Texte zu Format, Workflow und Recht. Geschrieben von drei festen Autoren, halbjährlich geprüft.
grundlagen
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.
von Mateusz Viola
grundlagen
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.
von Mateusz Viola
grundlagen
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.
von Mateusz Viola
best practices
Absolute vs. relative Pfadbefehle: wann Groß, wann klein?
Große Befehle arbeiten mit absoluten Koordinaten, kleine relativ zum vorherigen Punkt. Was der Unterschied konkret bedeutet, warum relative Pfade sich leichter verschieben lassen und wann absolute Koordinaten die klarere Wahl sind, mit klaren Faustregeln.
von Jan-Tristan Rudat
best practices
SVG-Pfade optimieren: kleinere Dateien, sauberer Code
Generierte SVG-Pfade sind oft unnötig groß: zu viele Nachkommastellen, überflüssige Befehle, doppelte Punkte. Wie du Pfade verkleinerst, ohne die Form zu verändern, welche Rolle die Rundung spielt und welche Werkzeuge wie SVGO dabei helfen.
von Jan-Tristan Rudat
best practices
SVG-Pfade in CSS und JavaScript: clip-path, path() und Animation
Pfade sind mehr als Grafik: Mit clip-path und der CSS-path()-Funktion beschneidest du Elemente, mit der Web Animations API und animateMotion bewegst du Objekte entlang eines Pfades. Wie du ein d-Attribut aus dem Editor in echten Code übernimmst.
von Jan-Tristan Rudat
recht
Datenschutz bei Online-SVG-Werkzeugen: warum lokal gewinnt
SVG-Dateien können versteckte Metadaten, eingebettete Bilder oder Kommentare enthalten. Welche DSGVO-Pflichten beim Bearbeiten gelten und warum Browser-only-Tools wie svgpatheditor.de, die nichts hochladen, die Compliance-Frage stark vereinfachen.
von Eike-Christian Ramcke
recht
Die AKARA-Toolsite-Methodik: Pflege, Quellen, Korrekturen
Wie AKARA Solutions Marketing-Toolsites wie svgpatheditor.de baut und pflegt: ein Drei-Autoren-Modell, Quellenpflicht in jedem Ratgeber, ein offener Korrektur-Workflow, regelmäßige Reviews und lokale Verarbeitung als Grundprinzip.
von Eike-Christian Ramcke