Kostenloser SVG-Viewer

Über SVG

SVG (Scalable Vector Graphics) ist ein XML-basiertes Format für Vektorgrafiken. Anders als Rasterformate wie PNG oder JPG skalieren SVG-Grafiken in jeder Größe ohne Qualitätsverlust. Sie sind leichtgewichtig, barrierefrei und in modernen Browsern weit verbreitet.

Häufige Fragen

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein Dateiformat für 2D-Grafiken, das mathematische Kurven und Pfade statt Pixel verwendet. Damit sind SVG-Dateien auflösungsunabhängig, sie sehen in jeder Größe scharf aus, vom kleinen Icon bis zur Großwerbung.

Was ist der Unterschied zwischen SVG und PNG?

PNG ist rasterbasiert (pixelbasiert) und hat eine feste Größe, beim Vergrößern entsteht Unschärfe. SVG ist vektorbasiert (mathematikbasiert) und skaliert unendlich ohne Qualitätsverlust. SVG ist ideal für Logos, Icons und Illustrationen. PNG eignet sich besser für Fotos und komplexe Bilder.

Kann ich SVG-Code direkt bearbeiten?

Ja, SVG ist XML-Text, Sie können ihn also in jedem Texteditor bearbeiten. Sie können Farben, Größen, Positionen und mehr ändern, indem Sie die Attribute anpassen. Nutzen Sie diesen Viewer, um Ihren Code einzufügen und Änderungen sofort zu sehen.

SVG gewann den Formatkrieg, zweimal

Bevor es SVG gab, wurden Anfang 1998 zwei konkurrierende Vektorformate beim W3C eingereicht. PGML (Precision Graphics Markup Language), am 10. April 1998 von Adobe, IBM, Netscape und Sun eingereicht, basierte auf dem Bildmodell von Adobe PostScript. VML (Vector Markup Language), am 13. Mai 1998 von Microsoft, Macromedia, Hewlett-Packard, Autodesk und Visio eingereicht, verwendete eine Syntax, die dem nahekam, was Microsoft bereits in Office 2000 und Internet Explorer 5 auslieferte. Das W3C kürte keinen Sieger. Stattdessen bildete es eine SVG Working Group unter dem Vorsitz von Chris Lilley, um einen einzigen Standard zu entwerfen, der beide ablösen sollte. Der erste öffentliche Arbeitsentwurf von SVG erschien am 11. Februar 1999.

SVG 1.0 wurde am 4. September 2001 als W3C-Recommendation veröffentlicht, mit dem Herausgeber Jon Ferraiolo (Adobe) und Mitwirkenden von Adobe, IBM, Sun, Apple, Canon, Corel, Kodak, Macromedia, Microsoft, Netscape, Oracle, Sharp, Quark und Xerox, eine der breitesten Herstellerkoalitionen aller W3C-Spezifikationen. SVG 1.1 folgte am 14. Januar 2003 und bildet bis heute die De-facto-Grundlage des modernen Webs; die zweite Ausgabe (16. August 2011) nahm Errata auf. SVG 1.1 unterteilte die Spezifikation in Module und definierte drei Profile (Full, Basic, Tiny). VML wurde weiterhin in IE 5 bis 9 ausgeliefert und intern von Microsoft Office genutzt, wurde aber in IE 9 (März 2011) zugunsten von nativem SVG für veraltet erklärt und war mit IE 11 praktisch tot. SVG 2 ist seit 2016 ein W3C-Arbeitsentwurf, ohne dass ein Termin für eine Recommendation in Sicht wäre; Browser liefern Funktionen stückweise aus, sobald die Nachfrage nach Interoperabilität entsteht.

Was SVG wirklich besonders macht

• Es ist einfach nur XML. Ein ganzes Icon kann in einer Zeile stehen: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="currentColor"/></svg>. Weil SVG Text ist, lässt es sich per Diff vergleichen und versionieren (Git behandelt es wie Quellcode), serverseitig generieren, von Suchmaschinen indexieren (Text innerhalb von <text> ist crawlbar), effizient komprimieren (gzip und brotli lieben wiederkehrende XML-Tokens, typischerweise 60 bis 80 % Reduktion) und in jedem Texteditor ohne Spezialsoftware bearbeiten.
• Auflösungsunabhängigkeit. Weil SVG-Pfade als mathematische Kurven und Koordinaten definiert sind und nicht als Pixelraster, wird ein SVG bei jeder Zoomstufe und jeder Pixeldichte des Geräts identisch dargestellt. Es gibt kein „@2x“- oder „@3x“-Retina-Asset zu verwalten. Ein einziges 2 KB großes Icon skaliert vom 16×16-Favicon bis zur 400×400-Hero-Illustration ohne jeden Qualitätsverlust.
• Winzige Dateigröße für Strichgrafiken. Ein typisches 24×24-Icon in einer Farbe hat als SVG ~200 bis 500 Byte gegenüber 1 bis 3 KB als transparentes PNG. Ein schlichtes Firmenlogo hat als SVG 1 bis 5 KB gegenüber 15 bis 50 KB als PNG. Ein Icon-Set aus 1.000 Symbolen hat als einzelnes SVG-Sprite ~50 KB gegenüber 2 bis 5 MB an Multi-DPI-PNG-Sprites.
• Inline in HTML und per CSS gestaltbar. Sobald SVG inline eingebettet ist, ist jedes Element Teil des DOM. CSS kann es ansprechen: .icon-stroke { stroke: currentColor; stroke-width: 2; }. Die einzelne Eigenschaft currentColor ist das, was moderne Icon-Systeme funktionieren lässt: Ein Icon übernimmt automatisch die Textfarbe seiner Umgebung.
• Auf drei verschiedene Arten animierbar. CSS-Animation/-Transition (der bevorzugte moderne Ansatz), deklaratives SMIL-XML innerhalb des SVG (<animate>, <animateTransform>, <animateMotion>) oder JavaScript über das SVG-DOM. SMIL funktioniert bis heute in Chrome, Firefox und Safari, nachdem Chrome seinen Plan zur Abkündigung von 2015 rückgängig gemacht hat.
• Programmgesteuert manipulierbar. document.querySelector('#chart-bar-3').setAttribute('height', newValue). Das ist die Grundlage von D3.js, Vega, Plotly, Highcharts, ApexCharts und dem Rest des Ökosystems zur Datenvisualisierung.
• Von Haus aus barrierefrei. <title> erscheint beim Überfahren mit der Maus als Tooltip. <desc> wird Screenreadern zugänglich gemacht. ARIA-Attribute (role="img", aria-label, aria-labelledby, aria-describedby) funktionieren normal. Im Vergleich zu einem <canvas>-Element (einer Blackbox für assistive Technik) ist SVG vollständig barrierefrei.

Browser-Unterstützung ist seit 2011 universell

Natives SVG kam in Firefox 1.5 (November 2005), Opera 9 (Juni 2006), Safari 3.0 (Juni 2007), Chrome 1.0 (September 2008) und schließlich Internet Explorer 9 (März 2011): was den Wendepunkt darstellte. Vor IE 9 mussten Websites VML-Konvertierungs-Shims oder das Plug-in Adobe SVG Viewer ausliefern, um IE 6 bis 8 zu unterstützen. iOS Safari hatte ab Werk teilweises SVG und ab iOS 5 (Oktober 2011) vollständige Unterstützung; Android erreichte das mit Honeycomb 3.0 (Februar 2011), und ChromeWebView ersetzte rund um Android 4.4 (2013) den AOSP-Browser. Die praktische Untergrenze für SVG-als-Bild (<img src="x.svg">) liegt etwa bei Ende 2011. Bis 2026 muss kein realistisches Webprojekt mehr Browser ohne vollständiges SVG unterstützen.

SVG ist nicht nur ein Bildformat, sondern ein ausführbarer Dokumenttyp

Das ist das mit Abstand Wichtigste, was man über die Sicherheit von SVG verstehen muss. Ein bösartiges SVG kann <script>-Blöcke, Event-Handler (onload, onclick, onmouseover) oder <a xlink:href="javascript:...">-Links enthalten. Wenn ein solches SVG in einem aktiven Kontext geladen wird (über <object>, <iframe>, Browser-Navigation zu einer .svg-URL oder per Einfügen via innerHTML), führt der Browser das Skript aus. Websites, die hochgeladene SVGs auf diese Weise einbetten lassen, können von den Hochladenden per XSS angegriffen werden.

Das <img>-Tag ist der sichere Weg. Wenn SVG über <img src="x.svg"> oder als CSS-background-image geladen wird, führen Browser das SVG in einem Sandbox-Modus ohne Skripte und ohne externe Abrufe aus. Skripte darin werden nicht ausgeführt, externe Abrufe werden blockiert, und das SVG kann nicht mit der übergeordneten Seite interagieren. CSS innerhalb des SVG wird gerendert, aber alles, was Nebenwirkungen haben könnte, ist deaktiviert. Das ist heute die empfohlene Art, SVG zu verwenden.

Zur serverseitigen Absicherung empfiehlt OWASP, hochgeladene SVGs mit DOMPurify (DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})), svg-sanitizer (PHP), sanitize-svg (Node) oder Bleach (Python) zu bereinigen, dabei <script>, <foreignObject> und alle on*-Handler zu entfernen und xlink:href-Werte abzuweisen, die mit javascript: oder data: beginnen. Eine strenge Content-Security-Policy auf der Seite, die nutzergeneriertes SVG anzeigt, sowie das Ausliefern heruntergeladener SVGs mit Content-Disposition: attachment sind zusätzliche, doppelt absichernde Maßnahmen. Dieser Viewer arbeitet rein clientseitig, und das SVG verlässt Ihr Gerät nie, aber wenn Sie nutzergeneriertes SVG auf einer öffentlichen Website einbetten, bereinigen Sie es.

SVG vs. PNG vs. JPG vs. WebP vs. AVIF, wann was zu verwenden ist

• Logo, Icon, Illustration, Diagramm, Chart, Infografik mit Text: SVG. Skaliert auf jede Größe, winzige Datei, per CSS umfärbbar, Text bleibt Text (auswählbar, übersetzbar, indexierbar).
• Fotografie: JPG (oder AVIF/WebP für moderne Stacks). Eine Vektorkodierung von Fotos wäre riesig.
• Screenshot: PNG (oder WebP). Verlustfreies Raster bewahrt eine pixelgenaue UI.
• Animierter UI-Sticker: SVG (CSS oder SMIL). Kleiner und schärfer als GIF, flüssiger als Video bei kurzen Schleifen.

WebP (Google, 2010) und AVIF (AOMedia, 2019) sind moderne Rasterformate, die mit PNG und JPG konkurrieren, nicht mit SVG; sie sind keine Vektorformate. Der Schwachpunkt von SVG sind Fotografien und Bilder mit kontinuierlichen Farbverläufen: Jedes Pixel als Vektorprimitiv darzustellen, bläht die Datei weit über ein JPEG hinaus auf. Für Icons und Logos bleibt SVG unübertroffen.

Ihr SVG mit SVGO optimieren

Ein typisches SVG, das aus Adobe Illustrator, Sketch, Figma oder Inkscape exportiert wurde, schleppt enormen Ballast mit sich: editor-spezifische Metadaten (<sodipodi:namedview>, <inkscape:groupmode>), Standard-Ebenennamen und Gruppenhierarchien, übertriebene Genauigkeit bei Pfadkoordinaten (d="M 12.000023 18.999991 ..."), Inline-Style-Attribute, die CSS-Klassen sein könnten, und Kommentarblöcke, die den Editor identifizieren.

SVGO (SVG Optimizer), ursprünglich 2012 von Kir Belevich geschrieben, ist das Werkzeug der Branche. Es ist ein Node.js-Kommandozeilenwerkzeug mit etwa 50 Plug-ins, die einzelne Optimierungen übernehmen: removeComments, removeMetadata, removeEditorsNSData, convertColors (wandelt rgb(255,0,0) in #f00 um), convertPathData (fasst Pfadbefehle zusammen und verwirft überflüssige Genauigkeit), mergePaths, cleanupNumericValues (Rundung auf eine konfigurierbare Genauigkeit, Standard 3 Dezimalstellen). Die typische Komprimierung ergibt 30 bis 70 % kleinere Dateien bei handgefertigten SVGs aus Design-Tools und erreicht bei Inkscape-Exporten wegen der umfangreichen Editor-Metadaten gelegentlich 80 %. SVGOMG (svgomg.net) ist das Web-Frontend für SVGO von Jake Archibald (Google) und die meistgenutzte GUI-Version.

Die Landschaft der Icon-Bibliotheken

SVG-Icon-Bibliotheken dominieren den modernen Web-Stack. Die großen Sets, denen Sie begegnen, sind Heroicons (Tailwind Labs, ~280 Icons, MIT), Lucide (ein Fork von Feather, ~1.400 Icons), Bootstrap Icons (~2.000), Material Symbols (Google, ~3.000 in mehreren Strichstärken), Font Awesome 6 (~30.000 kostenlos + Pro), Phosphor Icons (~9.000 in sechs Strichstärken) und Tabler Icons (~5.200). Der Aggregator Iconify beherbergt über 200.000 Open-Source-Icons aus mehr als 150 Icon-Sets hinter einer einzigen API; Entwicklerinnen und Entwickler können <iconify-icon icon="mdi:home"></iconify-icon> schreiben, und das Framework lädt genau dessen SVG bei Bedarf nach. Der Wechsel von Icon-Fonts (Ära von Font Awesome 4 / Glyphicons) zu SVG-Icons fand etwa 2017 bis 2019 statt, getrieben von Barrierefreiheit, Umfärbbarkeit und der Beseitigung von FOUT (Flash of Unstyled Text, bei dem die Icon-Schriftart noch nicht geladen war).

Weitere Fragen

Was ist der Unterschied zwischen viewBox und width/height?

viewBox="0 0 100 100" definiert das interne Benutzerkoordinatensystem des SVG, seine „natürliche“ Leinwand misst 100×100 Einheiten, unabhängig von der gerenderten Pixelgröße. width und height legen die gerenderte Anzeigegröße fest. Sind beide vorhanden, skaliert das SVG die viewBox so, dass sie in den gerenderten Rahmen passt. preserveAspectRatio (Standard xMidYMid meet) steuert, wie die Skalierung mit Abweichungen im Seitenverhältnis umgeht: meet bewahrt das Verhältnis und zentriert, none streckt, slice beschneidet zum Ausfüllen. Nur die viewBox zu setzen und CSS die width und height steuern zu lassen, ist die moderne Best Practice für Icon-Systeme.

Warum sehen meine SVG-Icons auf Bildschirmen unscharf aus?

Fast immer eine von drei Ursachen: (1) Das SVG wird in eine feste Pixelgröße gerendert, die nicht zum Seitenverhältnis der viewBox passt, sodass der Browser es streckt; (2) das SVG wurde aus einem Design-Tool mit Subpixel-Koordinaten exportiert („M 12.5 7.5 L ...“), und das Anti-Aliasing des Browsers gibt sein Bestes mit nicht ganzzahligen Kanten; oder (3) es wurde preserveAspectRatio="none" gesetzt, was das SVG beliebig strecken lässt. Beheben Sie es, indem Sie sicherstellen, dass der gerenderte Container dem viewBox-Verhältnis entspricht, in den Export-Optionen Ihres Design-Tools Koordinaten auf Ganzzahlen einrasten und preserveAspectRatio="none" vermeiden, sofern Sie nicht ausdrücklich eine Streckung wünschen.

Kann ich SVG als Favicon verwenden?

Ja. <link rel="icon" type="image/svg+xml" href="icon.svg"> wird in Chrome 80+, Firefox 41+ und Safari 14+ unterstützt. Ein gängiges Muster ist es, ein SVG-Favicon für moderne Browser und einen ICO-Fallback (<link rel="icon" sizes="any" href="favicon.ico">) für ältere Clients auszuliefern. SVG-Favicons können innerhalb des SVG auch prefers-color-scheme-Media-Queries verwenden, um automatisch zwischen Varianten für helles und dunkles Theme zu wechseln.

Ist das Pfad-Attribut d wirklich eine Mini-Sprache?

Ja, und die rund ein Dutzend Befehle zu lernen, kommt dem Erlernen, SVG von Hand zu lesen, am nächsten. Die Befehle sind: M/m (move to, absolut/relativ), L/l (line to), H/h (horizontale Linie), V/v (vertikale Linie), C/c (kubische Bézierkurve mit zwei Kontrollpunkten), S/s (glatte kubische, spiegelt den vorherigen Kontrollpunkt), Q/q (quadratische Bézierkurve), T/t (glatte quadratische), A/a (elliptischer Bogen, der komplexeste) und Z/z (Pfad schließen). Ein typisches Icon-d wie M5 12h14M12 5l7 7-7 7 bedeutet „bewege zu (5,12), horizontale Linie 14 Einheiten, bewege zu (12,5), Linie 7 nach rechts 7 nach unten, Linie 7 nach links 7 nach unten“, also ein nach rechts zeigender Pfeil.

Verwandte Tools