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.
Bearbeiten Sie ein SVG mit der Darstellung daneben und lesen Sie ein Panel, das sagt, was die Datei tatsächlich ist: ob sie skaliert, was jede Transformation auf dem Weg hinunter zu einer Form tut, was das d-Attribut Befehl für Befehl ausbuchstabiert, wie sich eine Füllung durch Vererbung auflöst, was die Reste des Editors in Bytes kosten, und was bricht, wenn dieselbe Datei als <img>, als CSS-Hintergrund oder inline eingefügt verwendet wird. Jeder Befund zeigt auf genau das Attribut, um das es geht. Es ist ein Satz von Regeln über die geparste Datei, kein Modell, es meldet also, was da ist, und rät nie, wofür die Datei gedacht ist.
SVG-Quelltext
.svg-Datei hier ablegen
Wird in diesem Tab gelesen. Nichts wird hochgeladen.
Tippen Sie hier, und die Vorschau folgt. Klicken Sie in der Vorschau auf eine Form, und der Quelltext springt zu deren Element.
Vorschau
Die anklickbaren Umrisse liegen über den Formen, deren Rahmen sich aus der Datei berechnen lässt. <text>, <use> und ein <image> ohne Größe brauchen einen Renderer und werden deshalb über den Quelltext ausgewählt.
Gezeichnet in einem abgeschotteten Rahmen, aus Markup, das aus dem geparsten Baum neu aufgebaut wurde — nie aus Ihren Bytes. Der Rahmen ist ein fester Kasten und die Datei bekommt ihn ganz; genau dadurch sieht man einem Dokument, das nicht skalieren kann, an, dass es ihn nicht füllt.
Bytes
395
Elemente
5
Formen
3
Pfadbefehle
10
Tiefste Verschachtelung
1
Was diese Datei ist
- HinweisRahmen
Mit eigener Größe, und es skaliert
width="24" und height="24" geben der Datei eine eigene Größe, und viewBox="0 0 24 24" macht diese Größe zum Ausgangspunkt statt zur Grenze. Bekommt sie in CSS eine andere Breite, wird alles darin passend neu skaliert. Genau so soll ein Icon sein.
- HinweisKoordinaten
Eine Benutzereinheit, und was sie wert ist
Die Koordinaten darin reichen waagerecht von 0 bis 24 und senkrecht von 0 bis 24. Bei der angegebenen Breite von 24 zeichnet eine Benutzereinheit 1 CSS-Pixel — und diese Zahl ändert sich mit jeder Größe, die die Datei tatsächlich bekommt.
- HinweisPfade
Absolute und relative Befehle gemischt
3 absolute Befehle und 6 relative im selben Pfad. Beide sind zulässig und zeichnen dieselbe Form; der praktische Unterschied ist, dass sich ein vollständig relativer Pfad verschieben lässt, indem man nur das erste M ändert — dieser hier nicht.
- HinweisFarbe
currentColor: Die Seite bestimmt die Farbe
1 Attribut färbt mit currentColor, das zur CSS-Eigenschaft `color` aufgelöst wird, die dort geerbt wird, wo das SVG steht. Inline in einer Seite ist das genau das, was man von einem Icon will: Es übernimmt die umgebende Textfarbe und folgt einem Themenwechsel von selbst. Als <img> oder als CSS-background-image löst es sich gegen nichts auf und wird schwarz, weil es kein Element gibt, von dem es erben könnte.
- HinweisBarrierefreiheit
Name: „보관함에 저장“
<title> ist der zugängliche Name der Grafik, und die meisten Viewer zeigen ihn beim Überfahren mit der Maus auch als Tooltip — deshalb ist ein <title>, der wie ein Dateiname geschrieben ist, schlechter als keiner. Dieser lautet „보관함에 저장“.
- HinweisBarrierefreiheit
Kein <desc>
<title> ist der kurze Name; <desc> ist die längere Beschreibung für eine Grafik, deren Inhalt zählt — ein Diagramm, ein Schaubild, eine Karte. Ein Icon braucht keine, und eine leere hinzuzufügen ist schlechter, als sie wegzulassen.
Ausgewähltes Element
Klicken Sie in der Vorschau auf eine Form, oder setzen Sie den Cursor im Quelltext in ein Element.
Mit dem SVG-Optimierer den Ballast abwerfen · In einen CSS-Daten-URI verwandeln · Einen einzelnen Pfad für sich bearbeiten
So funktioniert es
Fügen Sie das SVG ein oder legen Sie die Datei ab
Das Quelltextfeld nimmt eine Einfügung an, die Ablagezone eine .svg. Alles wird in diesem Tab gelesen. Die vier Beispiele über den Fenstern sind einen ersten Klick wert: Jedes ist eine andere Art von echter Datei, und der Bericht sagt über jedes etwas anderes.
Lesen Sie zuerst den Rahmen-Abschnitt
Er sagt, welche von vier Formen dieses Dokument hat, und das entscheidet das meiste von dem, was folgt. Eine viewBox mit width und height skaliert und hat eine eigene Größe; eine viewBox allein füllt jede Box, die sie bekommt; width und height ohne viewBox skalieren überhaupt nicht, und deshalb weigert sich ein aus einem Designwerkzeug kopiertes Icon so oft, seine Größe zu ändern. Die Vorschau gibt der Datei eine feste Box, damit Sie sehen, welche es ist.
Klicken Sie eine Form an, um die beiden Fenster auszurichten
Ein Klick auf einen Umriss in der Vorschau setzt die Einfügemarke im Quelltext auf dieses Element und füllt das Element-Panel: die Transformationskette vom äußersten Element abwärts, was die aufsummierte Matrix tut, die Füll- und Konturfarbe, wie sie sich durch Vererbung auflöst, und bei einem Pfad jeden Befehl in Klartext. Die Einfügemarke im Quelltext zu bewegen wählt in der anderen Richtung aus.
Verwenden Sie die „Zeig mir“-Knöpfe statt zu suchen
Jeder Befund trägt den Quelltextbereich, um den es geht, sein Knopf wählt also genau diese Zeichen aus – den zweiten Verlauf mit der doppelten id, nicht den ersten, und das eine Attribut statt des Tags darum herum.
Bringen Sie die Größenbefunde zum Optimierer
Der Größen-Abschnitt zählt Bytes und benennt, was sie sind – Editor-Metadaten, ein ungenutzter Verlauf, sieben Nachkommastellen, die niemand gewählt hat –, aber dieses Werkzeug schreibt Ihre Datei nicht um. Der SVG-Optimierer macht diesen Durchgang für das ganze Dokument auf einmal und zeigt einen Vorher-Nachher-Unterschied, damit Sie prüfen können, dass sich nichts verschoben hat.
Häufige Fragen
Warum wird mein Icon nicht größer, wenn ich in CSS eine Breite setze?
Fast immer, weil die Datei width und height hat, aber keine viewBox. Ohne sie sind Benutzereinheiten CSS-Pixel, und es gibt keine Abbildung, mit der der Browser neu skalieren könnte – die Box wächst, und die Zeichnung bleibt stehen. Der Rahmen-Abschnitt sagt das und schlägt die genaue viewBox vor, die hinzuzufügen ist, gewöhnlich "0 0 <width> <height>" mit den Zahlen, die schon in der Datei stehen.
Ich habe zwei Icons inline eingefügt, und das zweite hat seinen Verlauf verloren. Warum?
Ihre ids sind kollidiert. Designwerkzeuge erzeugen Namen wie a, Layer_1 und SVGID_1_, und sobald beide Dateien in einer Seite sind, löst sich jedes url(#a) auf das auf, was im Dokument zuerst kam – das zweite Icon borgt sich also stillschweigend den Verlauf oder Clip-Pfad des ersten. Der Portabilitäts-Abschnitt markiert exporter-erzeugte ids genau deshalb. Setzen Sie vor jede id etwas, das für die Datei eindeutig ist, bevor Sie sie inline einfügen.
Die Datei funktioniert auf meiner Seite und bleibt als CSS-Hintergrund leer. Was hat sich geändert?
Drei Dinge unterscheiden sich, und der Bericht nennt das jeweils zutreffende. Ein fehlendes xmlns verzeiht der HTML-Parser, und überall sonst ist es fatal. currentColor hat außerhalb einer Seite nichts, wovon es erben könnte, es kommt also schwarz heraus. Externe Verweise werden in einem <img> oder einem background-image überhaupt nicht abgerufen, das Element, das sie braucht, zeichnet also nichts. Und ein # in einer Hex-Farbe schneidet eine Data-URI ab, sofern es nicht als %23 geschrieben ist.
Ein Loch in meinem Pfad füllt sich massiv. Muss ich es verschieben?
Nein – kehren Sie es um. Unter der Voreinstellung fill-rule="nonzero" ist eine innere Schleife nur dann ein Loch, wenn sie in der Gegenrichtung zu der Schleife umläuft, die sie enthält, ein Loch, das sich massiv füllt, ist also ein Richtungsproblem, kein Positionsproblem. Der Pfad-Abschnitt sagt, wie viele Teilpfade es gibt und welche Regel entscheidet. Einen Teilpfad umzukehren ist das, was das SVG-Pfad-Werkzeug tut.
Es hat ein <script> in einer Datei gefunden, die mir geschickt wurde. Ist das gefährlich?
Das hängt ganz davon ab, wohin die Datei geht, und der Bericht sagt, wohin. Inline in eine Seite eingefügt, läuft das Skript eines SVG mit der Origin dieser Seite – ihren Cookies, ihrem Speicher, ihrem DOM. Als <img> oder CSS-Hintergrund geladen, läuft es überhaupt nie. Die Vorschau hier hat es vor dem Rendern entfernt, und der Frame, in dem sie rendert, kann ohnehin kein Skript ausführen, die Datei in diesem Werkzeug anzusehen ist also in jedem Fall sicher.
Warum widerspricht das Farb-Panel dem, was ich sehe?
Weil die Datei einen <style>-Block hat und dieser Bericht ihn nicht anwendet. CSS-Selektoren aufzulösen braucht eine CSS-Engine; jeder hier genannte Wert stammt allein aus Präsentationsattributen und Inline-Styles. Der Bericht sagt das überall dort, wo ein <style>-Block existiert, statt stillschweigend einen Wert zu zeigen, den das Stylesheet überschrieben hat.
Eingabe aus
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.
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.
CSS-Verlaufsgenerator
CSS Gradient Builder
Baut lineare, radiale und konische Verläufe mit verschiebbaren Stopps und gibt das CSS aus, in sRGB oder OKLCH.
Box-Shadow-Generator
Box Shadow Generator
Setzt mehrschichtige Box- und Textschatten mit Live-Vorschau zusammen und gibt das CSS aus.
Danach
Diese Tools nehmen an, was dieses hier erzeugt, das Ergebnis kann also direkt weiter.
SVG als CSS-Data-URI
SVG to CSS Data URI
Kodiert ein SVG als CSS-Hintergrund-Data-URI und maskiert nur, was maskiert werden muss, damit es klein bleibt.
SVG-Optimierer
SVG Optimiser
Entfernt Editor-Ballast, fasst Transformationen zusammen und rundet die Pfadgenauigkeit, mit gerendertem Vorher-nachher-Vergleich.
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.
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.