Was ist SVG? Skalierbare Vektorgrafiken erklärt

SVG – Scalable Vector Graphics, auf Deutsch skalierbare Vektorgrafiken – ist ein Bildformat, das auf einem grundlegend anderen Prinzip basiert als JPG, PNG oder GIF. Während diese Formate Bilder als Raster von farbigen Pixeln speichern, beschreibt SVG Bilder mit mathematischen Formen und Koordinaten. Das Ergebnis: SVG-Grafiken können auf jede beliebige Größe skaliert werden, ohne an Qualität zu verlieren.

Raster vs. Vektor: Der grundlegende Unterschied

Um SVG zu verstehen, hilft ein Vergleich mit Rastergrafiken:

Rastergrafiken (JPG, PNG, GIF): Das Bild besteht aus einem Gitter von Pixeln. Jedes Pixel hat eine Farbe. Bei kleinen Darstellungen sieht das gut aus; wenn Sie das Bild stark vergrößern, werden die einzelnen Pixel sichtbar und das Bild wirkt pixelig oder unscharf.

Vektorgrafiken (SVG): Das Bild wird durch mathematische Beschreibungen von Formen gespeichert: „Zeichne einen Kreis mit Mittelpunkt (50, 50) und Radius 30, fülle ihn mit Rot.” Wenn Sie die Grafik vergrößern, werden die Formen einfach neu berechnet und mit perfekter Schärfe gezeichnet – egal ob auf einem Briefkopf oder einer Plakatwand.

Wie ist eine SVG-Datei aufgebaut?

SVG ist ein XML-basiertes Format – das bedeutet, eine SVG-Datei ist schlicht lesbarer Text. Das ermöglicht es, SVG-Dateien mit einem Texteditor zu öffnen und zu bearbeiten. Eine einfache SVG-Datei mit einem roten Kreis sieht so aus:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

SVG unterstützt eine Vielzahl von grafischen Elementen:

• Einfache Formen: Rechteck, Kreis, Ellipse, Linie, Polygon
• Pfade (paths): Beliebig komplexe Kurven und Formen
• Text mit präziser Typografie
• Farbverläufe (Gradients) und Muster
• Filter und Effekte (Weichzeichner, Schatten)
• Transformationen (Drehen, Skalieren, Spiegeln)
• Animationen direkt in der Datei
• Eingebettete Rastergrafiken

SVG im Web: Ein nativer Browser-Standard

SVG ist kein externes Plugin – es ist ein W3C-Standard und wird von allen modernen Browsern nativ unterstützt. SVG-Grafiken können direkt in HTML eingebettet werden, als externe Dateien verlinkt werden oder sogar mit CSS gestylt und mit JavaScript animiert werden. Das macht SVG zu einem mächtigen Werkzeug für interaktive Webgrafiken, Karten, Diagramme und Benutzeroberflächen.

Ein praktischer Vorteil: Da SVG-Code im HTML steht, kann das CSS der Webseite direkt auf SVG-Elemente angewendet werden. Logos können in verschiedenen Farbvarianten ausgespielt werden, ohne mehrere Bilddateien zu benötigen – einfach per CSS-Klasse.

Stärken von SVG

• Verlustfreie Skalierbarkeit: Perfekte Qualität von 16px Icon bis 16-Meter-Plakatwand
• Kleine Dateigrößen: Für Logos, Icons und einfache Grafiken oft winzige Dateien
• Durchsuchbar und indexierbar: Text in SVG-Dateien ist für Suchmaschinen lesbar
• Animierbar: SVG unterstützt CSS- und JavaScript-Animationen
• Bearbeitbar mit Code: SVG-Dateien können mit Texteditoren oder Programmatisch generiert werden
• Barrierefreiheit: SVG-Elemente können mit ARIA-Attributen zugänglich gemacht werden
• Keine Pixelierung: Ideal für hochauflösende Displays (Retina-Displays)

Schwächen von SVG

• Ungeeignet für Fotos: Komplexe Fotografien lassen sich nicht sinnvoll als Vektoren beschreiben – der Code würde riesig und langsam
• Sicherheitsrisiken: Da SVG JavaScript einbetten kann, können SVGs aus unbekannten Quellen Sicherheitsrisiken darstellen
• Komplexe Grafiken werden groß: Sehr detaillierte Vektorgrafiken mit tausenden Pfaden können langsam zu rendern sein

Wann sollten Sie SVG verwenden?

• Logos und Markenzeichen
• Icons und Piktogramme in Benutzeroberflächen
• Diagramme, Infografiken und Karten
• Animierte Grafiken und interaktive Visualisierungen
• Illustrationen und Artwork für Web und Print

SVG erstellen und bearbeiten

Die führenden Programme für SVG-Erstellung sind Adobe Illustrator und das kostenlose Inkscape. Figma, Sketch und Affinity Designer exportieren ebenfalls SVG. Für einfache SVGs reicht ein Texteditor. Online-Tools wie Vectr oder SVG-Edit bieten eine browserbasierte Alternative.

Fazit

SVG ist das Format der Wahl für alle Grafiken, die in verschiedenen Größen und auf verschiedenen Geräten perfekt aussehen müssen. Es ist ein offener W3C-Standard, ideal für das Web, interaktive Anwendungen und professionelle Drucksachen. Wer Logos, Icons oder Diagramme erstellt, sollte immer SVG als primäres Format in Betracht ziehen.

Der Weg ohne Upload

Wenn die Datei vertraulich ist, ist der sicherste Weg der, auf dem sie Ihren Rechner gar nicht erst verlässt. Bild umwandeln läuft vollständig im Browser: Die Datei wird von Ihrer Festplatte gelesen, im Arbeitsspeicher verarbeitet und wieder zurückgeschrieben — an einen Server geht nichts.

1. Öffnen Sie Bild umwandeln.
2. Wählen Sie die Datei auf Ihrem Rechner. Sie wird lokal gelesen, nicht hochgeladen.
3. Wählen Sie das Zielformat und bei Bedarf die Qualität.
4. Laden Sie das Ergebnis herunter. Das Original bleibt, wo es war.

Direkt im Browser erledigen — die Datei verlässt Ihr Gerät nicht: Bild umwandeln