Vektor- oder Rastergrafik: Wann brauchen Sie wirklich SVG?

Vektor- oder Rastergrafik: Im Kern geht es dabei um die Frage, wie ein Bild gespeichert wird. Eine Rastergrafik (PNG, JPG, WebP) ist ein festes Raster aus farbigen Pixeln. Eine Vektorgrafik (SVG) dagegen ist eine Reihe von Zeichenanweisungen: Formen, Linien, Kurven und Füllungen, beschrieben über Koordinaten. Dieser eine Unterschied entscheidet, wofür sich beide eignen. Vektoren bleiben in jeder Größe scharf und passen zu Logos, Icons und Diagrammen. Rastergrafiken halten die unendlich vielen feinen Details eines Fotos fest. In diesem Ratgeber erfahren Sie, wann SVG die richtige Wahl ist, wann nicht, und was beim Umwandeln zwischen beiden wirklich passiert.

Was eine Rastergrafik eigentlich ist#

Eine Rastergrafik ist ein Rechteck aus Pixeln, von denen jedes seine eigene Farbe hat. Ein Foto mit 1200 × 800 Pixeln besteht aus genau 960.000 farbigen Quadraten, nicht mehr und nicht weniger. PNG, JPG, WebP, GIF und HEIC sind alles Rasterformate. Sie unterscheiden sich darin, wie sie diese Pixel komprimieren, nicht im Grundprinzip. (Wenn Sie zwischen den beiden häufigsten Formaten wählen, hilft unser Vergleich PNG oder JPG.)

Weil die Pixelzahl feststeht, hat eine Rastergrafik eine natürliche Größe. Verkleinern Sie sie, werden überzählige Pixel verworfen. Vergrößern Sie sie, muss die Software neue Pixel dazwischen erfinden. Deshalb wirkt ein kleines Logo, das auf ein Banner gezogen wird, weich oder pixelig. Der Vorteil: Ein Pixelraster kann alles festhalten, was eine Kamera sieht, also Haut, Laub, Nebel, Schatten und jeden Farbverlauf dazwischen.

Was eine Vektorgrafik eigentlich ist#

Eine Vektorgrafik speichert überhaupt keine Pixel. Sie speichert eine Beschreibung, etwa so: „Zeichne hier einen Kreis mit diesem Radius, fülle ihn lila, dann zeichne diese Kurve durch diese Punkte.“ SVG (Scalable Vector Graphics) ist das Vektorformat des Webs. Es ist in der SVG-Spezifikation des W3C definiert und wird von allen modernen Browsern unterstützt, wie die SVG-Dokumentation von MDN beschreibt. Technisch ist eine SVG-Datei reiner Text (XML), den Sie in einem Texteditor öffnen könnten.

Die Pixel entstehen erst in dem Moment, in dem das Bild angezeigt wird: Browser oder App zeichnen die Anweisungen dann in genau der benötigten Größe. Darum lassen sich Vektoren ohne Schärfeverlust skalieren. Ein Logo aus einem Kreis und ein paar Kurven wird auf dem Smartphone, auf einem 4K-Monitor oder auf einem gedruckten Plakat jedes Mal gestochen scharf neu gezeichnet. Und darum sind einfache Vektorgrafiken oft winzige Dateien, denn ein paar Formen lassen sich mit ein paar Zeilen Text beschreiben. Eine ausführlichere Einführung in das Format selbst finden Sie in unserem Beitrag Was ist eine SVG-Datei?.

Vektor- und Rastergrafik im direkten Vergleich#

Wann Sie wirklich SVG brauchen#

Greifen Sie zu einem Vektorformat, wenn das Bild aus Formen besteht statt aus der echten Welt aufgenommen zu sein, und wenn es in mehr als einer Größe gut aussehen muss:

• Logos. Dasselbe Logo erscheint als winziges Favicon, im Header einer Website und auf einem gedruckten Banner. Eine einzige SVG-Datei deckt alles ab.
• Icons und Oberflächengrafiken. Sie werden auf hochauflösenden Displays scharf dargestellt, und einfache Icons sind als SVG oft kleiner als als PNG.
• Diagramme, Schaubilder und Illustrationen mit flächigen Farben und klaren Linien.
• Alles, was eine Maschine steuert. Schneideplotter, Folienschneider und Lasergravierer folgen Pfaden. Sie brauchen also Vektorkonturen, keine Pixel.
• Grafiken, die Sie weiter bearbeiten. Einen Vektor umzufärben oder in der Größe zu ändern, verschlechtert ihn nicht, egal wie oft Sie es tun.

Wann eine Rastergrafik die richtige Wahl ist#

Verwenden Sie ein Rasterformat, sobald das Bild ein Foto ist oder fotografische Details enthält:

• Fotos jeder Art. Reale Szenen bestehen aus Millionen leicht unterschiedlicher Farben. Genau das kann ein Pixelraster gut festhalten, Formen dagegen nicht effizient beschreiben.
• Screenshots. Sie bestehen ohnehin aus Pixeln, und PNG bewahrt sie exakt.
• Scans und Texturen wie Papier, Stoff oder gemalte Bilder, bei denen gerade die Struktur zählt.
• Überall, wo SVG nicht akzeptiert wird. Viele Upload-Formulare, soziale Netzwerke und Office-Programme verlangen PNG oder JPG, selbst für ein Logo.

Als Faustregel gilt: Wurde es gezeichnet, denken Sie an Vektor. Wurde es fotografiert, bleiben Sie bei Raster.

Zwischen Vektor und Raster umwandeln#

Die beiden Richtungen sind nicht spiegelbildlich, und genau daher kommt die meiste Verwirrung.

Von Vektor zu Raster ist einfach und in der Praxis verlustfrei. Da eine SVG-Datei aus Anweisungen besteht, kann ein Konverter sie in jeder gewünschten Pixelgröße zeichnen. Sie erhalten also ein scharfes Ergebnis in genau den Maßen, die Sie brauchen. Mit unserem SVG-zu-PNG-Konverter wählen Sie einen Skalierungsfaktor oder eine exakte Breite und Höhe, die Transparenz bleibt erhalten, und alles läuft vollständig in Ihrem Browser. Unser Ratgeber Was beim Umwandeln von SVG in PNG passiert erklärt die Details, etwa wie die Ausgabegröße bestimmt wird.

Von Raster zu Vektor heißt Nachzeichnen (Tracing), nicht Rückgängigmachen. Nichts kann aus einem PNG oder JPG die ursprüngliche Vektordatei zurückholen. Diese Information ist verloren, sobald ein Bild zu Pixeln wird. Ein Tracer fasst stattdessen Pixel ähnlicher Farbe zu flächigen Bereichen zusammen und zeichnet um jeden Bereich eine Kontur. Bei einem Logo, das ohnehin aus einer Handvoll flächiger Formen besteht, kann das Ergebnis nahezu perfekt sein. Unser PNG-zu-SVG-Konverter ist genau dafür gemacht: Logos, Strichzeichnungen und einfache Illustrationen.

Bei einem Foto geht das Nachzeichnen schief. Als wir ein 14,1 KB großes Foto durch unseren JPG-zu-SVG-Konverter geschickt haben, kam eine 151,5 KB große SVG-Datei aus 607 Pfaden heraus: mehr als zehnmal so groß und neben dem Original sichtbar fleckig. Das Tool zählt inzwischen zuerst die Farben in Ihrem Bild und warnt Sie, wenn ein Foto auf genau dieses Ergebnis zusteuert. Warum die Dateigröße so explodiert, erklärt unser Beitrag Warum eine nachgezeichnete SVG größer ist als das PNG.

Häufig gestellte Fragen#

Was ist der wichtigste Unterschied zwischen Vektor- und Rastergrafiken? Eine Rastergrafik speichert ein festes Raster aus farbigen Pixeln, während eine Vektorgrafik Formen und Linien als mathematische Anweisungen speichert, die erst bei der Anzeige gezeichnet werden. Deshalb bleiben Vektoren in jeder Größe scharf, während Rastergrafiken unscharf werden, wenn man sie über ihre Originalauflösung hinaus vergrößert.

Ist SVG besser als PNG? SVG ist für Logos, Icons und einfache flächige Grafiken besser als PNG, PNG dagegen für Screenshots, Fotos und alles mit komplexen Details. Keines der beiden ist grundsätzlich besser, sie sind für unterschiedliche Arten von Bildern gemacht.

Kann ich ein Foto in SVG umwandeln? Sie können ein Foto in eine SVG-Datei nachzeichnen lassen, aber das Ergebnis ist meist viel größer als das Original und wirkt fleckig, weil die weichen Farbübergänge des Fotos zu Hunderten flächiger Formen werden. Behalten Sie Fotos als JPG, PNG oder WebP.

Wird ein PNG durch die Umwandlung in SVG beliebig skalierbar? Ein PNG wird durch die Umwandlung in SVG nur dann skalierbar, wenn das Bild einfach genug ist, um sauber nachgezeichnet zu werden, etwa ein Logo oder eine Strichzeichnung. Der Tracer zeichnet die Pixel als Formen neu: Eine saubere Nachzeichnung skaliert gut, eine unsaubere vergrößert nur die unsauberen Formen.

Verliert man Qualität, wenn man SVG in PNG umwandelt? Beim Umwandeln von SVG in PNG geht in der exportierten Größe keine Qualität verloren, weil der Vektor in genau dieser Pixelgröße neu gezeichnet wird. Das PNG lässt sich danach aber nicht mehr wie die SVG-Datei vergrößern, exportieren Sie es also in der größten Größe, die Sie brauchen.

Sollte mein Logo SVG oder PNG sein? Ihr Logo sollte als SVG-Masterdatei vorliegen, weil es sich so sauber auf jede Größe vom Favicon bis zur Plakatwand skalieren lässt. Für Plattformen und Formulare, die kein SVG akzeptieren, exportieren Sie PNG-Kopien aus dieser SVG-Datei.

Kurz zusammengefasst#

• Raster (PNG, JPG, WebP) ist ein festes Pixelraster: richtig für Fotos, Screenshots und Scans.
• Vektor (SVG) ist eine Reihe von Zeichenanweisungen: richtig für Logos, Icons, Diagramme und Schneidedateien.
• Wandeln Sie SVG mit SVG zu PNG in jeder gewünschten Größe in Pixel um. Zeichnen Sie einfache Grafiken mit PNG zu SVG oder JPG zu SVG als Vektor nach, und lassen Sie Fotos Fotos sein.
• Weitere Vergleiche finden Sie in unseren Ratgebern zu Dateiformaten, alle Bildwerkzeuge im Überblick der Bildtools.