SVG-Pfad-Editor
SVG Path Editor
Wandelt Pfaddaten zwischen absoluten und relativen Befehlen um, verschiebt, skaliert, dreht und kehrt sie um und zeigt die Bounding-Box mit Live-Vorschau.
Liest ein `d`-Attribut und gibt Ihnen ein transformiertes zurück: absolut oder relativ, verschoben, skaliert, um das Zentrum der Bounding Box gedreht, umgekehrt und auf die Zahl von Dezimalstellen gerundet, die Sie wählen. Es zeichnet das Ergebnis über Path2D, sodass der Browser die Bogenmathematik genauso rechnet wie ein SVG-Renderer, und meldet die Bounding Box und eine viewBox, die Sie einfügen können.
Das d-Attribut eines path
Vorschau
Das gestrichelte Rechteck ist die Bounding Box, der rote Punkt der Startpunkt. Die Füllung folgt der Nonzero-Regel.
Ergebnis
Befehle
18
Teilpfade
3
Zahlen
32
Bytes
113 → 97
Bounding Box
x 2,00 y 2,00 w 20,00 h 20,00
viewBox
2.00 2.00 20.00 20.00
Was es tut
- · Gelesen wird mit demselben Parser wie im SVG-Optimierer, also wird auch gedrängte Schreibweise wie
1.5.5und die Flags eines Bogens richtig gelesen. Es wandelt zwischen absolut und relativ, rundet Nachkommastellen, verschiebt, skaliert und dreht um die Mitte der Bounding Box, kehrt die Richtung um und berechnet die Bounding Box. - · Beim Drehen werden
HundVzuL, und die Radien eines Bogens, seine Drehung um die x-Achse und sein Sweep-Flag werden mit den Formeln aus SVG 1.1, Anhang F.6, neu berechnet. Die Bounding Box stammt aus den echten Extrema jeder Kurve, nicht aus ihren Kontrollpunkten. - · Kurven werden nicht vereinfacht. Das ändert die Form, und die Toleranz zu wählen ist eine menschliche Entscheidung.
Um eine ganze Datei zu verkleinern: der SVG-Optimierer; um zu justieren, wie eine Kurve beschleunigt: der Easing-Kurven-Editor.
So funktioniert es
Fügen Sie das d-Attribut ein
Nur den Wert, ohne das `<path>` drumherum. Komprimierte Notation ist in Ordnung – `1.5.5` als zwei Zahlen, Bogen-Flags ohne Trennzeichen –, weil der Parser der aus dem SVG-Optimierer ist und diese Fälle behandelt.
Wenden Sie die Transformation an, die Sie brauchen
Verschieben, Skalieren und Drehen werden auf die Geometrie selbst angewendet, was herauskommt, braucht also kein `transform`-Attribut. Gedreht wird um das Zentrum der Bounding Box, was Sie für ein Icon wollen und was ein rohes `rotate()` nicht tut.
Wählen Sie absolut oder relativ, und die Genauigkeit
Relative Befehle sind gewöhnlich kürzer, was für ein inline eingefügtes Icon zählt. Die Genauigkeit ist der eigentliche Größenhebel: Drei Dezimalstellen reichen für ein 24-Einheiten-Icon-Raster völlig, und von sechs auf zwei zu gehen halbiert die Zeichenkette oft. Beobachten Sie den Byte-Zähler, während Sie ihn bewegen.
Kehren Sie die Richtung um, wenn eine Füllung falsch aussieht
Der rote Punkt markiert den Startpunkt, die Wirkung einer Umkehr ist also sichtbar. Die Richtung entscheidet, ob ein innerer Teilpfad unter der nonzero-Regel ein Loch ist, und ihr folgt auch eine stroke-dash-Animation.
Nehmen Sie den Pfad, oder die viewBox
Das Ausgabefeld hat den `d`-Wert und ein fertiges `<path>`-Element. Das Statistik-Panel hat die Bounding Box als viewBox-Zeichenkette, und das ist der schnellste Weg, ein Icon seinen Rahmen exakt füllen zu lassen.
Häufige Fragen
Warum vereinfacht es die Kurve nicht?
Weil Vereinfachung die Form verändert, und wie viel Veränderung akzeptabel ist, ist ein Urteil über diese bestimmte Zeichnung, das ein Werkzeug nicht fällen kann. Jeder Punktreduktionsalgorithmus nimmt eine Toleranz, und der ehrliche Ort für diese Entscheidung ist ein Vektoreditor, in dem Sie sehen, was sie kostet. Dezimalstellen zu runden ist der sichere Größenhebel, und der ist hier.
Was passiert mit Bögen, wenn ich drehe oder skaliere?
Sie bleiben Bögen. Die Radien, die x-Achsen-Drehung und das Sweep-Flag werden mit den Formeln aus SVG 1.1 Anhang F.6 neu berechnet, und das ist es, was die Achsen einer Ellipse unter einer ungleichmäßigen Skalierung korrekt hält. `H` und `V` werden unter Drehung zu `L`, weil eine horizontale Linie nicht horizontal bleibt.
Stammt die Bounding Box aus den Kontrollpunkten?
Nein, aus den tatsächlichen Extrema jeder Kurve. Ein Kontrollpunkt einer kubischen Kurve liegt gewöhnlich außerhalb der Kurve, eine Kontrollpunkt-Box ist also zu groß – oft merklich, und genau dann zählt es, weil die Box das ist, was Sie als viewBox einfügen.
Es verarbeitet nur einen Pfad. Was ist mit einer ganzen Datei?
Das hier arbeitet absichtlich auf einem einzelnen `d`-Wert – es ist die Ebene, auf der die Transformationen und die Umkehr Sinn ergeben. Für ein ganzes Dokument schreibt der SVG-Optimierer jeden Pfad darin um, und der SVG-Editor liest die Struktur um sie herum.
Eingabe aus
SVG-Optimierer
SVG Optimiser
Entfernt Editor-Ballast, fasst Transformationen zusammen und rundet die Pfadgenauigkeit, mit gerendertem Vorher-nachher-Vergleich.
Bild in SVG
Image to SVG
Zeichnet eine Bitmap in SVG-Pfade nach, abgestimmt auf Logos und Strichzeichnungen, nicht auf Fotos.
Easing-Kurven-Editor
Easing Curve Editor
Bearbeitet eine cubic-bezier- oder Feder-Kurve gegen eine animierte Vorschau und gibt die CSS-Timing-Funktion aus.
SVG-Editor mit Erklärung
SVG Editor and Explainer
Bearbeitet ein SVG neben seinem Live-Rendering und erklärt die Datei: viewBox und Skalierung, Transformationen, jeden Pfadbefehl, vererbte Füllung, verschwendete Bytes und was in einem <img>, einer Data-URI oder inline bricht.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
Easing-Kurven-Editor
Easing Curve Editor
Bearbeitet eine cubic-bezier- oder Feder-Kurve gegen eine animierte Vorschau und gibt die CSS-Timing-Funktion aus.
Bild in SVG
Image to SVG
Zeichnet eine Bitmap in SVG-Pfade nach, abgestimmt auf Logos und Strichzeichnungen, nicht auf Fotos.
SVG-Optimierer
SVG Optimiser
Entfernt Editor-Ballast, fasst Transformationen zusammen und rundet die Pfadgenauigkeit, mit gerendertem Vorher-nachher-Vergleich.
SVG in PNG
SVG to PNG
Rendert eine SVG-Datei mit beliebigem Skalierungsfaktor als PNG, JPEG oder WebP, mit transparentem oder gefülltem Hintergrund.
Farbformat-Konverter
Colour Format Converter
Wandelt eine Farbe zwischen HEX, RGB, HSL, HWB, LAB, LCH und OKLCH um und nennt die nächste bekannte Farbe.
Farbwähler
Colour Picker
Wählt eine Farbe auf einem OKLCH-Feld, per Bildschirm-Pipette oder aus einem eigenen Bild, und kopiert sie in jeder Notation.