SVG fürs Web: Wann Vektoren Pixel schlagen — und wann nicht

Eine Designerin schickt ein 3-Megabyte-PNG eines Logos, das eine 800-Byte-SVG-Datei sein könnte. Jede E-Mail, jeder Seitenaufruf bezahlt für diesen Download — das Telefon der Empfängerin dekodiert ihn, der Mail-Client cached ihn, und niemand bemerkt, dass das gesamte Bild ein Kreis, zwei Linien und eine Form ist. Dieser Leitfaden zeigt, was Vektorgrafiken tatsächlich sind, wann SVG PNG wirklich schlägt, wann es eine Falle ist und warum Sie trotzdem ab und zu ein PNG brauchen.

SVG ist ein Rezept, kein Gemälde

Ein PNG ist ein Bitmap: ein Raster aus farbigen Pixeln, jedes ein gespeicherter Wert. SVG — Scalable Vector Graphics — ist XML, reiner Text, der Formen über Geometrie beschreibt. Ein Rechteck ist <rect x="..." y="..." width="..." height="...">; ein Kreis heißt „Mittelpunkt bei (12,12), Radius 10"; ein Pfad ist eine Folge aus Ziehe-, Linien- und Kurvenbefehlen. Der Browser liest diese Anweisungen, berechnet die Geometrie und zeichnet — in genau der Auflösung, die der Bildschirm braucht. Zoomen Sie in ein Vektor-Bild: Es gibt nichts zu verwischen; der Browser führt die Mathematik einfach mit größerem Maßstab erneut aus.

Ein Badge-Symbol — ein blauer Kreis mit weißem Häkchen — ist ein vollständiges, echtes Beispiel:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
  <circle cx="12" cy="12" r="10" fill="#2f6fed"/>
  <path d="M8 12.5l2.5 2.5L16 9.5" stroke="#ffffff" stroke-width="2" fill="none"/>
</svg>

Die ganze Datei liegt unter 250 Byte. Dasselbe Symbol als 2x-PNG exportiert ergibt 3–10 Kilobyte; auf ein 512-Pixel-Sitelogo skaliert, zig Kilobyte. Und weil SVG Text ist, lässt es sich prüfen und diffen: In jedem Editor öffnen, greppen, in Git einchecken — und Sie sehen genau, was sich geändert hat. Ein PNG ist eine Pixelwand; ein SVG ist Quellcode.

Wann SVG PNG ohne Kampf schlägt

SVG gewinnt in wenigen Situationen eindeutig. Besteht Ihr Bild überwiegend aus flachen Formen mit sauberen Kanten, ist SVG kein Nice-to-have — es ist messbar leichter und unendlich schärfer:

• Logos und Icons: flache, geometrische Arbeiten aus Füllungen, Strichen und Pfaden. Der kanonische SVG-Einsatz.
• Scharf bei jedem Zoom: Text und Kanten bleiben auf einem 4K-Monitor, in einer gezoomten Ecke des Dashboards oder auf einem Bannerdruck mit 300dpi rasiermesserscharf. Ein PNG verwischt, sobald es seine native Größe überschreitet.
• Winzige Dateien bei einfachen Formen: Die Dateigröße folgt der Komplexität, nicht der Auflösung; ein typisches Icon bleibt ein Bruchteil des PNG.
• CSS-Theme: Inline-SVG erbt currentColor und reagiert auf Hover, Fokus und Dark Mode. Ein PNG ist beim Export eingefroren.
• Animation und Interaktivität: SVG-Elemente sind Teil des DOM — man kann sie anklicken, mit CSS oder JavaScript animieren und an Daten binden. Davon existiert in einem statischen Bild nichts.

Wann SVG das falsche Werkzeug ist

Dieselbe Logik, die SVG für Icons winzig macht, macht es bei Fotos dick. Ein Foto sind Millionen einzelner Farbentscheidungen; es als Vektoren zu beschreiben bedeutet tausende Gradient-Stops und unscharfe Formen — die Datei übertrifft ein gleichwertiges JPEG, während der Browser bei jedem Bild kämpft. Stark gefilterte Arbeiten — weiche Schatten, Glow, mehrschichtige Unschärfe — sollte man meist als Raster ausliefern.

Die versteckte Kostenstelle ist das Rendern. Ein PNG wird einmal dekodiert und auf den Bildschirm kopiert; ein SVG wird bei jedem Layout-Durchlauf, jedem Zoom und jedem Animationsframe neu in die Zielgröße gerastert. Ein komplexes SVG auf einer Seite ist okay. Fünfzig Schneeflocken-SVGs, jede in einen Blur-Filter gewickelt, ruckeln auf einer scrollenden Seite sichtbar. Messen Sie die Performance, bevor Sie alles Mögliche vektorisieren:

viewBox, Breite und Höhe: Wer bestimmt die Größe?

Der verwirrendste Teil einer SVG-Datei ist der Unterschied zwischen Anzeigegröße und Koordinatensystem. Die Attribute width und height (oder die CSS-Eigenschaften) sagen, wie groß das Bild in CSS-Pixeln gezeichnet werden soll. Der viewBox sagt, wie groß die Zeichnung selbst ist: viewBox="0 0 24 24" bedeutet „Das Werk ist 24 Einheiten breit und 24 Einheiten hoch, beginnend bei 0,0". Der Browser teilt die Anzeigegröße durch diese Einheiten und skaliert die gesamte Zeichnung — deshalb lässt sich ein 24-Einheiten-Icon perfekt mit 200 Pixeln darstellen.

Mit vorhandenem viewBox bleibt das Seitenverhältnis standardmäßig erhalten. preserveAspectRatio="xMidYMid meet" ist der Standard und verhält sich wie object-fit: contain — das Werk passt zentriert hinein, bei anderem Box-Verhältnis bleibt Platz; die Variante slice verhält sich wie object-fit: cover. Eine Gewohnheit lohnt sich: Entfernen Sie die Attribute width und height nicht aus der Datei. Bei vorhandenem viewBox lassen moderne Browser CSS-Angaben sauber darübergehen, und die Attribute geben dem Browser vor dem Eintreffen des Stylesheets intrinsische Maße.

SVG auf einer Seite: img, inline oder Hintergrund

Wo Sie das SVG platzieren, entscheidet, was es darf. Vier gängige Behälter:

Das <img>-Tag ist der Arbeitssoldat: statisch, cachebar und parallel ladend. Es ist aber auch bewusst inert — sobald Sie Hover-Zustände, currentColor oder Animation brauchen, müssen Sie das SVG inline einbetten und das zusätzliche HTML-Gewicht akzeptieren. Hintergrundbilder passen zu dekorativer, wiederholter Grafik, die der Accessibility-Baum nie sehen soll. <object> führt Skripte und externe Ressourcen weiterhin aus — genau deshalb ist es für Icons weitgehend aus der Mode.

Fallstricke externer SVGs: CSP, Cookies und Skripte

Ein SVG ist Text, kann also ein <script> in sich tragen. Was daraus wird, hängt allein davon ab, wo Sie es laden. In <img src> wird das SVG wie ein statisches Bild behandelt: Skripte führen nie aus, und externe Referenzen — Schriften, Stylesheets, andere Bilder — werden aus Sicherheitsgründen ignoriert. Das ist der sichere Behälter. In <object>, einem Inline-<iframe> oder einem direkt aufgerufenen Dokument ist ein SVG ein vollwertiges Dokument: Skripte laufen, Cookies werden gesendet. Eine Drittanbieter-.SVG an dieser Stelle ist aktiver Code auf Ihrer Seite.

Content-Security-Policy weist jedem Behälter seinen Bereich zu. img-src regelt <img> und Hintergrundbilder; object-src regelt <object> und <embed>; Inline-SVG im HTML unterliegt dem eigenen script-src und style-src der Seite. Und eine strenge Policy, die den Host des SVG nicht aufführt, lehnt die Datei rundweg ab — ein weiterer Grund, einzubinden, was Sie selbst hosten, statt von woanders einzulinken.

Barrierefreiheit: title, desc und Label

Ein SVG trägt für Screenreader keine Bedeutung, bis Sie eine anhängen. Geben Sie dem Element role="img", einen <title> als Namen, ein <desc> für die längere Beschreibung und verbinden Sie sie mit aria-labelledby:

<svg role="img" aria-labelledby="badgeTitle badgeDesc" viewBox="0 0 24 24">
  <title id="badgeTitle">Verifiziertes Abzeichen</title>
  <desc id="badgeDesc">Ein blauer Kreis mit weißem Häkchen</desc>
  <circle cx="12" cy="12" r="10" fill="#2f6fed"/>
  <path d="M8 12.5l2.5 2.5L16 9.5" stroke="#fff" stroke-width="2" fill="none"/>
</svg>

Zwei weitere Gewohnheiten zahlen sich aus. Nutzen Sie echte <text>-Elemente statt Text in Pfade umzuwandeln — Screenreader lesen echten Text, und er bleibt auswählbar und durchsuchbar. Ist ein SVG rein dekorativ, setzen Sie aria-hidden="true" (oder lassen Sie es als Hintergrundbild), damit assistive Technologien es komplett überspringen.

Wann Sie trotzdem zu PNG rastern müssen

Vektoren sind nicht universal. Zahlreiche echte Auslieferungskanäle verweigern oder verhunzen SVG, und die einzig sichere Antwort ist ein PNG in passender Größe:

• E-Mail-Clients: Outlook — besonders der Windows-Renderer — zeichnet SVG nicht zuverlässig; transaktionale E-Mails nutzen immer noch PNG, weil ein Bitmap die einzige sichere Wette ist.
• Social-Preview-Karten: Open-Graph- und Twitter-Card-Scrapers rufen Ihr og:image ab; die meisten zeigen ein Raster zuverlässig, SVG-Previews werden oft abgelehnt oder leer gerendert.
• Favicons: moderne Browser akzeptieren SVG-Favicons, aber Apple-Touch-Icons und ältere Werkzeuge wollen PNG (apple-touch-icon.png) — Sie liefern beides.
• Alte Browser und WebViews: alles vor 2017, manche eingebettete WebViews und Legacy-Kiosks unterstützen SVG gar nicht.
• Upload-Formulare: CMS, Marktplätze und Design-Marktplätze lehnen .svg wegen möglicher Skripte nach Dateiendung ab; PNG besteht jede Validierung.

SVG zu PNG rastern — in Ihrem Browser, bei Convrs

Der sauberste Workflow hält das SVG als Quelle der Wahrheit und rastet nur für die Auslieferungskanäle, die es verlangen. Der SVG-zu-PNG-Konverter von Convrs verwandelt jedes SVG in Ihrem Browser in ein gestochen scharfes PNG: Datei einfügen oder ziehen, Pixelgröße wählen (etwa 256, 512 oder 1024 für ein Retina-Icon) und das Ergebnis herunterladen. Die Konvertierung läuft komplett über die Canvas-API in Ihrem eigenen Tab — die Datei wird nie hochgeladen, kein Server sieht sie. Keine Anmeldung, keine Warteschlange; vertrauen müssen Sie nur dem Browser, den Sie ohnehin haben.

Bewahren Sie das Vektor-Bild. Rastern Sie dort, wo die Welt es verlangt. Und wenn Ihnen eine Designerin wieder ein 3-Megabyte-Logo schickt, wissen Sie genau, was zu tun ist.