SVG → </>
SVG-Viewer und Code-Editor
Öffne eine SVG-Datei oder füge ihren Code ein, um sie gerendert zu sehen, ihre Größe zu prüfen und sie mit Live-Vorschau zu bearbeiten. Alles bleibt in deinem Browser.
Läuft im Browser · Dateien bleiben auf deinem Gerät
So nutzt du den SVG-Viewer
- Datei öffnen oder Code einfügen. Nutze „Datei öffnen“, zieh eine SVG-Datei auf die Vorschau oder füge den Code in den Editor ein.
- Vorschau prüfen. Wechsle zwischen transparentem, hellem und dunklem Hintergrund, um Kanten und weiße Formen zu sehen.
- Code bearbeiten. Die Vorschau aktualisiert sich beim Tippen. „Code formatieren“ räumt die Einrückung auf.
- Kopieren oder herunterladen. Speichere die bearbeitete SVG-Datei oder kopiere den Code.
SVG anzeigen auf jedem Hintergrund
Viele SVG-Icons sind weiß oder haben transparente Bereiche und verschwinden auf einer weißen Seite. Der Hintergrundschalter zeigt das Bild auf einem Schachbrettmuster, auf Weiß und auf einer dunklen Fläche. So erkennst du ein weißes Logo, eine fehlende Füllung oder eine ausfransende Kante.
Unter der Vorschau siehst du die angegebene width und height, die viewBox, die Anzahl der Elemente und die Dateigröße. Diese Werte erklären die meisten Größenprobleme: Eine SVG-Datei ohne Breite und Höhe übernimmt die Größe ihres Containers, und eine falsche viewBox beschneidet oder verkleinert die Zeichnung.
SVG Viewer online mit Code-Editor
Der Editor hebt das XML farbig hervor, klappt lange Gruppen ein und zeigt Zeilennummern. Enthält der Code einen Fehler, etwa ein nicht geschlossenes Tag, zeigt der Viewer die Fehlermeldung des Parsers statt eines leeren Bildes, und du weißt, welche Zeile du korrigieren musst.
Die Vorschau wird als Bild gerendert. Skripte in einer SVG-Datei werden nicht ausgeführt, deshalb kannst du auch Dateien gefahrlos öffnen, die du von anderen bekommen hast.
SVG-Datei bearbeiten: schnelle Korrekturen im Browser
Typische Änderungen dauern ein paar Sekunden: eine fill-Farbe ändern, feste Angaben für width und height entfernen, damit das Icon responsiv wird, eine versteckte Ebene löschen oder einen <title> für die Barrierefreiheit ergänzen. Für eine gründlichere Bereinigung schick die Datei durch den SVG-Optimizer.