SVG vs PNG im Vergleich: Vektor- vs. Rasterbilder einfach erklärt
SVG und PNG lösen verschiedene Aufgaben. SVG beschreibt Vektorgeometrie und kann Raster einbetten; PNG speichert ein festes Pixelraster. Die Wahl hängt von Quelle, Sicherheit, Barrierefreiheit, Bearbeitung, Rendering und gemessener Größe ab.
Der Kernunterschied zwischen SVG und PNG
Die Unterscheidung entspricht Vektor- und Rastergrafik.
SVG basiert auf XML und beschreibt Formen, Pfade, Text, Filter, Stile und Ressourcen. Vektorteile werden neu gezeichnet, doch Schärfe hängt von Geometrie, Strichen, Effekten, Ausrichtung und Rasterinhalt ab.
PNG speichert ein festes Pixelraster. Vergrößern erfordert Resampling und kann weich oder pixelig wirken. Eine zu große Quelle erhöht Übertragung und Decodierung, sofern responsive Kandidaten keine passende Wahl erlauben.
Das beeinflusst Größe, Skalierung, Bearbeitung und geeignete Bildarten.
Wann SVG sinnvoll ist
SVG ist ein guter Kandidat für geprüfte Vektorgrafik mit geklärten Sicherheits-, Zugänglichkeits-, Rendering- und Einbettungsanforderungen:
- Logos — ein sauberes SVG deckt viele Größen ohne Rastervergrößerung ab; kleine Marken brauchen eventuell Vereinfachung oder Variante.
- Symbole — UI und Navigation teilen Geometrie und Stil. SVG kann kleiner als mehrere Raster sein, komplexe Pfade oder Inline-Wiederholung aber größer.
- Illustrationen und Diagramme — klare Linien und Flächen. SVG-Text kann wählbar bleiben; Barrierefreiheit und Indexierung brauchen korrektes Markup.
- Animationen — SVG nutzt CSS, JavaScript und eigene Mechanismen; Bewegung, CPU, CSP, Zugänglichkeit und Interaktion prüfen.
- Favicons — aktuelle Browser nutzen SVG, vollständige Sets können Raster oder ICO brauchen. Nutzen Sie den Favicon-Generator.
SVG wird von aktuellen Browsern breit unterstützt. Beliebtheit entscheidet nicht; vergleichen Sie Komplexität, Sicherheit, Cache, Barrierefreiheit und Rendering.
Wann PNG sinnvoll ist
PNG passt, wenn verlustfreie Rasterpixel oder Alpha wichtig sind und die Größe ins Budget passt:
- Fotos mit Transparenz — PNG bietet Alpha und verlustfreie Pixel, kann aber groß sein. WebP/AVIF mit Alpha vergleichen; ohne Transparenz JPEG und moderne Fotoformate testen.
- Screenshots — PNG kann codierte Pixel bewahren; Profile, Metadaten, Skalierung und Palette sind getrennte Fragen.
- Komplexe Kunst — Gemälde, Texturen und fotorealistische Illustrationen, die nicht in saubere Formen passen.
- Rastergrafik mit Text — PNG vermeidet verlustbehaftete Artefakte an pixelgenauen Textkanten.
Dateigröße und Performance im Vergleich
Bei Symbolen, Logos und einfachen Illustrationen kann SVG oder Raster kleiner sein, abhängig von Geometrie, Maßen, Wiederholung, Kompression und Cache:
| Grafiktyp | PNG-Größe | SVG-Größe | Ersparnis |
|---|---|---|---|
| Einfaches Symbol | Eine Rastergröße je Kandidat | Oft kompakte Vektorgeometrie | Beide messen |
| Logo | Kann mehrere Auflösungen brauchen | Oft passend mit Vektorquelle | Beide messen |
| Symbolsatz | Getrennte Dateien addieren Anfragen und Bytes | Sprite, extern und inline haben andere Cachekosten | Gesamte Seite messen |
| Einfache Illustration | Wächst mit Pixelmaßen und Detail | Wächst mit Pfaden, Stilen und Filtern | Inhaltsabhängig |
Brotli oder gzip kann SVG-Übertragung je nach Markup und Server verkleinern. Vergleichen Sie komprimierte Transferbytes, nicht nur die Datei auf Disk.
Inline-SVG spart eine Anfrage, vergrößert HTML und ist nicht separat cachebar. Externes SVG kann gecacht werden. Vektoren brauchen meist keine Dichtevarianten; komplexes oder Raster-SVG kann responsive Behandlung benötigen. Messen Sie die Seite.
Bei Fotos und Texturen erzeugt Nachzeichnen zu viel Geometrie oder verliert Details. Raster in SVG fügt Container und oft base64 hinzu, ohne Vektor zu werden. Nutzen Sie PNG, JPEG, WebP oder AVIF.
SVG vs. PNG: Schnellvergleich
| Eigenschaft | SVG | PNG |
|---|---|---|
| Bildtyp | Vektor (Formen und Pfade) | Raster (Pixelraster) |
| Skalierung | Vektorteile werden neu gezeichnet; Rendering bleibt wichtig | Festes Raster; Vergrößern kann weich werden |
| Transparenz | Ja | Ja (Alpha) |
| Fotoinhalt | Meist ungeeignet außer als Rastereinbettung | Verlustfreie Alphaoption; Größe vergleichen |
| Symbole/Logos | Stark mit sauberer geprüfter Vektorquelle | Funktioniert in vorbereiteten Pixelmaßen |
| Animation | Ja (SVG/CSS/JS) | APNG-Erweiterung |
| Per Code editierbar | Ja (XML) | Nein |
| Text und Zugänglichkeit | Mit korrektem Markup möglich | Braucht umgebenden Text oder Alt-Entsprechung |
| Browser | Aktuelle Hauptbrowser; Einbettung variiert | Sehr breit |
| Dateigröße | Geometrie- und Markup-abhängig | Maß- und inhaltsabhängig |
Praxisbeispiel: Neugestaltung einer Firmenwebsite
Stellen Sie sich eine Website mit Logo, 30 Symbolen, Hauptfoto und Produktscreenshots vor. Ordnen Sie so zu:
- Logo → SVG bei sauberer Vektorquelle; Striche und kleine Lesbarkeit testen.
- Symbolsatz → Sprite oder Komponenten teilen Geometrie; Zugänglichkeit, Cache, CSP und Markup prüfen.
- Hauptfoto → JPEG, WebP und AVIF bei gleichen Maßen und sichtbarer Qualität testen; Fallbacks behalten. Siehe Optimierungsleitfaden.
- Produktscreenshots → mit PNG beginnen, wenn Pixel erhalten bleiben müssen, dann andere Optionen vergleichen.
Zwischen SVG und PNG konvertieren
Unterstützte Dateien lassen sich im Browser umwandeln. Vizua verarbeitet die Datei dort und sendet sie nicht an unseren Bildserver; Seitendienste können das Netz nutzen:
- SVG zu PNG — unterstütztes SVG in verfügbarer Skalierung rastern und prüfen
- Bild vektorisieren — Raster in angenäherte Pfade zeichnen; stellt Originalgeometrie nicht wieder her
- Favicon-Generator — gängige Ausgaben aus unterstützter Quelle erzeugen
Maße und Bytebudgets behandelt der Leitfaden zu Bilddateigrößen.
Häufig gestellte Fragen
Kann SVG PNG vollständig ersetzen?
Nein. SVG passt zu Grafiken, Symbolen und Illustrationen, stellt Fotos aber nicht effizient dar. Eingebettet wäre ein Foto groß, nachgezeichnet verlöre es Details. Nutzen Sie SVG für Vektorinhalte und PNG, JPEG oder WebP für komplexe Rasterbilder.
Sind SVG-Dateien im Web sicher?
SVG ist aktives XML und kann Skripte, Ereignisse, externe Verweise, Links, CSS und Filter enthalten. Behandeln Sie fremdes SVG wie Code: per Positivliste validieren, mit gepflegtem Werkzeug bereinigen, passend isolieren und CSP anwenden. Vertrauenswürdige Herkunft ersetzt keine Prüfung.
Warum wirkt mein SVG unscharf?
Vektorgeometrie wird ohne Rastervergrößerung neu gezeichnet, kann durch Bruchteilausrichtung, Striche, Filter, Transformation, Antialiasing, eingebettetes Raster oder Anzeige dennoch weich wirken. Prüfen Sie viewBox, Maße, Striche und Rasterinhalt.
SVG oder Icon-Font?
SVG passt oft, weil Symbole zugänglich benannt oder dekorativ verborgen und Stile begrenzt werden können. Es ist nicht automatisch schneller oder barrierefrei: Inline erhöht HTML, externe Sprites sind cachebar und ARIA muss korrekt sein. Vergleichen Sie die Systemanforderungen.
Kann ich PNG in SVG umwandeln?
Ja. Vizua zeichnet PNG oder JPEG als angenäherte SVG-Pfade nach. Das klappt am besten bei Logos, Symbolen und einfachen Illustrationen mit wenigen Farben und klaren Kanten, nicht bei komplexen Fotos.
Bilder umwandeln
Kein Konto. Die Datei wird im Browser verarbeitet und nicht an unseren Bildserver gesendet.