SVG Stroke-zu-Fill-Konverter

Füge ein beliebiges SVG mit konturierten Formen ein und erhalte ein gleichwertiges SVG zurück, in dem jede Kontur durch einen gefüllten Pfad mit derselben visuellen Form und Breite ersetzt wurde. Nützlich für Icon-Systeme und Design-Tools, die nur Füllungen zuverlässig rendern, oder um ein SVG vor weiterer Vektorbearbeitung auf reine Füllpfade zu reduzieren.

Was ist dieses Tool?

Manche Render-Pipelines — bestimmte Icon-Font-Generatoren, einige Game-Engines, ältere PDF-Exporter und Tools, die nur Füllungen zusammensetzen — kommen mit SVG-Konturen nicht richtig oder gar nicht klar. Eine Kontur in eine gefüllte Form gleicher Breite umzuwandeln umgeht das Problem vollständig: Das visuelle Ergebnis sieht identisch aus, wird aber als einzelner gefüllter Pfad statt als konturierte Linie ausgedrückt.

Dieses Tool tastet dafür entlang der Umrisslinie jeder Form viele Punkte ab (mit der pfadlängen-API des Browsers selbst, demselben Mechanismus, den auch SVG-Animationen nutzen) und baut zwei parallele Versatzlinien im halben Abstand der Konturbreite auf jeder Seite auf, die anschließend zu einem einzigen gefüllten Polygon geschlossen werden.

Warum sollte man es nutzen?

Funktioniert mit path-, line-, polyline-, polygon-, rect-, circle- und ellipse-Elementen — nicht nur <path> — mit einer einzigen einheitlichen Abtastmethode.
Erhält die eigene Füllung der Form (falls vorhanden) als separate Ebene unter der neuen Konturfüllung, sodass gefüllte und konturierte Formen zugleich korrekt konvertiert werden.
Vorher/Nachher-Vorschau nebeneinander, um die Konvertierung visuell zu bestätigen, bevor du das Ergebnis kopierst.
Läuft komplett in deinem Browser — das eingefügte SVG wird nirgendwo hochgeladen.
Kostenlos, sofort verfügbar, keine Dateigrößenbeschränkung außer dem, was dein Browser rendern kann.

Anleitung

Füge deinen SVG-Code in das Textfeld ein (ein funktionierendes Beispiel ist bereits vorausgefüllt).
Klicke auf "Convert strokes to fills".
Vergleiche die Vorher/Nachher-Vorschau, um zu bestätigen, dass das Ergebnis stimmt.
Klicke auf "Copy SVG", um den konvertierten, konturfreien Code zu kopieren.

Beispiel

Eingabe

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

Ausgabe

Ein einzelner <path fill="#3B82F6">, dessen Umriss beide Seiten der ursprünglichen Kurve im Abstand von 12 Einheiten nachzeichnet, ganz ohne stroke-Attribut.

Die Form der Kurve bleibt erhalten, weil das Tool kontinuierlich entlang des tatsächlich gerenderten Pfads abtastet, nicht nur anhand seiner Kontrollpunkte.

Häufig gestellte Fragen

Warum werden scharfe Ecken abgerundet statt spitz (mitered)?

Das ist eine bekannte, bewusste Vereinfachung der Abtastmethode: Dichte Punktabtastung entlang eines Pfads erzeugt naturgemäß abgerundete Verbindungen und Endkappen, unabhängig vom ursprünglichen Wert von stroke-linejoin oder stroke-linecap. Exakte Miter- oder Bevel-Verbindungen zu rekonstruieren erfordert einen anderen, komplexeren Algorithmus (Liniensegment-Schnittpunkte an jedem Eckpunkt), den dieses Tool nicht implementiert. Für die meisten Icon- und Illustrationszwecke ist der visuelle Unterschied gering, aber wenn du exakte Miter-Verbindungen brauchst, liefert die "Kontur nachzeichnen"-Funktion eines dedizierten Vektoreditors präzisere Ergebnisse.

Werden gestrichelte Konturen (stroke-dasharray) unterstützt?

Nein — das Tool behandelt jede Kontur als durchgezogen und ignoriert stroke-dasharray/stroke-dashoffset. Eine gestrichelte Kontur wird so konvertiert, als wäre sie durchgezogen, was ihr Aussehen verändert. Wenn dein SVG gestrichelte Konturen verwendet, ist dieses Tool für diese Formen nicht die richtige Wahl.

Warum wurde nichts konvertiert?

Das Tool konvertiert nur Elemente, die sowohl eine Konturfarbe (nicht "none") als auch einen positiven stroke-width-Wert besitzen — egal ob als Attribut oder im eigenen style des Elements gesetzt. Wenn dein SVG die Kontur über eine externe CSS-Klasse setzt, die der Browser innerhalb der isolierten Vorschau dieses Tools nicht auflösen kann, oder über einen <style>-Block mit Klassenreferenzen, wird der berechnete Stil möglicherweise nicht korrekt aufgelöst — versuche stattdessen, stroke und stroke-width als direkte Attribute auf der Form zu setzen.

Wann sollte ich Konturen in Füllungen umwandeln, und wann sollte ich Konturen behalten?

Wenn du noch designst, behalte die Konturen — stroke-width bleibt eine einzelne editierbare Zahl, die nach der Konvertierung verloren geht. Wenn du für eine Pipeline exportierst, die Konturen fehlerhaft verarbeitet (Icon-Font-Generatoren, bestimmte Game-Engines oder PDF-Exporter), konvertiere als letzten Exportschritt und behalte die ursprüngliche konturierte Datei als deine editierbare Quelle, da die Konvertierung nur in eine Richtung funktioniert.

Macht die Konvertierung die SVG-Datei größer?

Meistens ja — eine konturierte Kurve mit wenigen Kontrollpunkten wird zu einem gefüllten Umriss aus Hunderten abgetasteter Liniensegmente, sodass die Pfaddaten deutlich wachsen. Bei Icons spielt das in der Praxis selten eine Rolle, aber wenn die Dateigröße wichtig ist, lass das konvertierte Ergebnis anschließend durch einen SVG-Optimierer laufen, um die Koordinatengenauigkeit zu reduzieren.

Wird stroke-opacity in die konvertierte Füllung übernommen?

Nein — der konvertierte Pfad übernimmt die Konturfarbe als Füllung, aber mit voller Deckkraft; ein stroke-opacity-Wert der ursprünglichen Form geht verloren. Wenn du die Transparenz beibehalten möchtest, füge nach dem Kopieren des Ergebnisses manuell fill-opacity mit demselben Wert zum konvertierten Pfad hinzu.