SVG Viewer

SVG-Code öffnen, sicher ansehen, direkt bearbeiten und wieder exportieren.

Sichere SVG-Vorschau

SVG kann mehr enthalten als reine Vektorformen. Minimenta prüft den Code deshalb vor der Vorschau und blockiert unter anderem Skripte, Event-Handler, foreignObject, DOCTYPE-/ENTITY-Deklarationen sowie externe Bild-, CSS- und URL-Referenzen. Erst ein sicher previewbares SVG wird als lokale Bildressource im Browser dargestellt – nicht als fremdes Markup direkt in die Seite eingesetzt.

Warum kann ein SVG hier anders aussehen als auf einer Website?

Eine SVG-Datei kann auf externe Bilder, Stylesheets oder andere Ressourcen verweisen. Solche Abhängigkeiten werden in der sicheren Vorschau bewusst nicht geladen. Fehlt dadurch zum Beispiel eine externe Grafik oder ein externer Stil, kann die Vorschau vom Originalkontext abweichen. Eingebettete Formen, lokale Fragment-Verweise wie url(#gradient) und eingebettete Rasterbilder als Data-URL bleiben dagegen möglich.

Was bedeuten width, height und viewBox?

width und height beschreiben die vorgesehene Darstellungsgröße des SVG-Viewports. Die viewBox legt dagegen den internen Koordinatenbereich fest, der in diesen Viewport eingepasst wird. Minimenta zeigt beide Angaben getrennt an. Für den PNG-Export verwendet das Tool feste numerische Maße aus width/height; fehlen solche Maße, kann eine gültige viewBox als Exportgröße dienen. Reine Prozentangaben wie width="100%" sind für Minimenta keine feste Pixelgröße.

Formatieren oder optimieren?

Formatieren macht den XML-Code lesbarer, ohne ihn als Optimierung neu zu strukturieren. „Optimieren“ verwendet SVGO mit mehreren Durchläufen, um unnötigen SVG-Code zu reduzieren. Minimenta zeigt die eingesparte Dateigröße an und hält die vorherige Fassung bereit, damit du das Ergebnis direkt vergleichen und bei Bedarf mit „Vor Optimierung wiederherstellen“ zurücknehmen kannst.

SVG als PNG exportieren

PNG ist ein Rasterbild. Die Exportstufen 1×, 2× und 4× vervielfachen deshalb die von Minimenta ermittelte Exportgröße. Ein transparenter Vorschau-Hintergrund bleibt standardmäßig auch im PNG transparent. Einen hellen, dunklen oder eigenen Vorschau-Hintergrund kannst du nur dann fest in das PNG einrechnen, wenn du „Hintergrund übernehmen“ aktivierst.

Bei animierten SVGs ist PNG immer nur ein statischer Snapshot des aktuellen Bildstands. Die Animation selbst bleibt ausschließlich im SVG erhalten.

Was lohnt sich vor dem Export zu prüfen?

Für Icons, Logos und UI-Grafiken sind vor allem drei Punkte hilfreich: Passt die viewBox ohne unerwartetes Clipping, stimmt die Grafik auf hellem und dunklem Hintergrund, und bleibt das optimierte SVG visuell identisch mit der Ausgangsversion? Zoom, Hintergrundwechsel, Größenangaben und die wiederherstellbare Optimierung sind genau für diese kurze Gegenprobe gedacht.

Wenn du Werte aus fill, stroke oder CSS-Farben umrechnen oder verständlich benennen möchtest, kannst du sie direkt in den passenden Farbtools weiterverwenden.