SVG-Datei erklärt: wann SVG, wann WebP, PNG oder JPG auf der Website

Eine SVG-Datei (Scalable Vector Graphics) beschreibt eine Grafik als Formen, Linien und Kurven in einer Textdatei statt als Raster aus Pixeln. Der Browser zeichnet sie bei jeder Grösse neu, deshalb bleibt sie scharf, egal ob sie auf einem Handy oder auf einem grossen Monitor erscheint. Für eine Firmenwebsite heisst das: Logo, Icons und einfache Grafiken als SVGSVG (Scalable Vector Graphics) ist ein Bildformat für Vektorgrafiken, das Formen, Linien und Text als mathematische Beschreibung speichert statt als Pixel.…Mehr erfahren →, Fotos und Screenshots als WebPWebP ist ein modernes Bildformat von Google, das JPEG- und PNG-Bilder um 25–50% in der Dateigrösse reduziert — bei gleicher oder besserer Qualität. WebP wird…Mehr erfahren → oder JPG, PNG nur dort, wo Transparenz bei einem Rasterbild nötig ist und WebP nicht passt.

Klingt einfach, und trotzdem landen auf vielen KMU-Websites Logos als unscharfe JPG-Dateien, Teamfotos als mehrere Megabyte grosse PNG-Dateien oder Icons in fünf verschiedenen Grössen. Die Wahl des Formats wirkt sich direkt auf Ladezeit und Schärfe aus, und damit auf den ersten Eindruck. Dieser Artikel ordnet die vier gängigen Formate ein und zeigt, wie Sie im Alltag entscheiden.

Vektor oder Raster: der eigentliche Unterschied

Alle Bildformate im Web gehören zu einer von zwei Familien.

Rastergrafiken wie JPG, PNG und WebP speichern ein Bild als Gitter aus Pixeln. Jedes Pixel hat eine Farbe. Ein Foto mit 2'000 × 1'500 Pixeln enthält drei Millionen solcher Farbpunkte. Wird das Bild grösser dargestellt, als es Pixel hat, muss der Browser Zwischenwerte erfinden, und es wird weich oder pixelig.

Vektorgrafiken wie SVG speichern Anweisungen: «Zeichne einen Kreis mit diesem Mittelpunkt und diesem Radius, fülle ihn mit diesem Blau.» Eine SVG-Datei ist im Kern lesbarer Text im XML-Format. Sie können sie in einem Texteditor öffnen und sehen Elemente wie <circle>, <path> oder <text>. Weil der Browser diese Anweisungen bei jeder Grösse neu ausführt, gibt es keine Auflösungsgrenze.

Daraus folgt die wichtigste Faustregel: Was ein Grafiker in einem Vektorprogramm gezeichnet hat, bleibt Vektor. Was eine Kamera aufgenommen hat, bleibt Raster.

Die vier Formate im Überblick

Neben diesen vier gibt es AVIF, ein noch jüngeres Rasterformat, das teils kleinere Dateien als WebP erzeugt. Für die meisten KMU-Websites ist WebP der pragmatische Standard, weil es breit unterstützt wird und sich gut in Bildbearbeitung und Content-Management einfügt. Moderne Frameworks wie Next.js können Bilder ohnehin automatisch in das passende Format umrechnen und mehrere Grössen ausliefern.

Wann SVG die richtige Wahl ist

Logo

Das Logo ist der klassische Fall. Es erscheint im Header klein, im Footer noch kleiner, auf einer Kampagnenseite vielleicht gross. Als SVG reicht eine einzige Datei für alle Grössen und alle Bildschirme, auch für hochauflösende Displays. Ein weiterer Vorteil: Die Farbe lässt sich per CSS ändern. Ein weisses Logo über einem dunklen Hero-Bild und ein dunkles Logo im hellen, fixierten Header können aus derselben Datei kommen.

Icons

Telefonhörer, Pfeil, Häkchen, Menü-Symbol: Icons bestehen aus wenigen Linien und sind als SVG oft nur einige hundert Byte gross. Sie übernehmen Farbe und Grösse aus dem umgebenden Text und passen sich so automatisch an Hover-Zustände oder den Dunkelmodus an.

Diagramme und Illustrationen

Ein Ablaufdiagramm, eine Grafik mit Kennzahlen oder eine gezeichnete Illustration bleibt als SVG scharf und hat einen weiteren Vorteil: Enthaltener Text bleibt echter Text. Suchmaschinen und Screenreader können ihn lesen, sofern er nicht in Pfade umgewandelt wurde. Für die Auffindbarkeit von Bildern gilt trotzdem: Beschreibender Alt-Text gehört dazu, mehr dazu unter Bilder-SEO.

Favicon

Auch für das kleine Symbol im Browser-Tab ist SVG möglich, mit einigen Eigenheiten je Browser. Welche Dateien und Grössen es insgesamt braucht, steht in unserem Artikel zu Favicon-Grössen für die Website.

Wann SVG die falsche Wahl ist

Fotos. Ein Foto hat keine klaren Formen, sondern Millionen feiner Farbübergänge. Als SVG müsste jede Nuance als eigene Form beschrieben werden. Das Ergebnis ist eine riesige Datei, die trotzdem schlechter aussieht als ein JPG. Manchmal steckt in einer SVG auch einfach ein eingebettetes Rasterbild. Dann haben Sie die Nachteile beider Welten: grosse Datei, keine echte Skalierbarkeit.

Sehr komplexe Illustrationen. Eine detailreiche Zeichnung mit tausenden Pfaden kann als SVG grösser sein als ein gut komprimiertes WebP. Zudem muss der Browser jede Form berechnen, was auf schwächeren Handys spürbar werden kann. Hier lohnt der direkte Vergleich der Dateigrösse.

Logos, die nur als Foto existieren. Wenn vom Logo nur ein abfotografierter Briefkopf vorliegt, wird daraus durch Umwandeln kein sauberes SVG. Dazu gleich mehr.

PNG zu SVG und SVG zu PNG: was beim Umwandeln passiert

Viele Suchen rund um SVG drehen sich ums Umwandeln. Beide Richtungen funktionieren, aber nicht gleich gut.

SVG zu PNG ist unproblematisch. Die Vektorgrafik wird in einer gewählten Grösse in Pixel umgerechnet. Das braucht es etwa für Plattformen, die keine SVG annehmen, für Präsentationen oder für ein Open-Graph-Bild beim Teilen in sozialen Netzwerken. Wählen Sie die Zielgrösse grosszügig, denn eine kleine PNG lässt sich später nicht mehr verlustfrei vergrössern.

PNG zu SVG heisst Vektorisieren oder Tracing. Ein Programm sucht im Pixelbild nach Kanten und Farbflächen und beschreibt sie als Pfade. Bei einfachen Formen mit wenigen Farben klappt das ordentlich. Bei Verläufen, feinen Linien oder Schriften entstehen Wellen, abgerundete Ecken und unruhige Kanten. Schriften werden zu Formen und lassen sich nicht mehr als Text bearbeiten. Für ein Firmenlogo ist das keine Grundlage, auf der man die nächsten zehn Jahre aufbauen will.

Sicherheit: SVG ist Text, und Text kann Code enthalten

Weil eine SVG-Datei Text im XML-Format ist, kann sie neben Formen auch Skripte, Verweise auf externe Dateien oder Ereignis-Attribute enthalten. Bei einer Datei, die Ihr Grafiker für Ihre Website erstellt hat, ist das kein Thema. Anders, wenn fremde Personen SVG-Dateien hochladen können, etwa in einem Bewerbungsformular, einem KundenportalEin Kundenportal ist ein geschützter Bereich auf der Website eines Unternehmens, in dem Kunden nach dem Login ihre eigenen Daten, Dokumente, Aufträge oder…Mehr erfahren → oder einem Content-Management-System mit vielen Benutzern.

Drei Regeln reichen für die meisten KMU:

• Hochladen nur durch Berechtigte. SVG-Uploads im CMS nur für Personen mit Admin-Rechten zulassen.
• Bereinigen vor dem Einbinden. Ein Optimierer entfernt unnötige Metadaten, Kommentare und Editor-Reste, ein Sanitizer zusätzlich Skripte.
• Fremde Dateien nicht direkt ausliefern. Wenn Kunden Dateien hochladen, werden SVGs entweder in ein Rasterformat umgewandelt oder mit einer strengen Sicherheitsrichtlinie ausgeliefert.

Ladezeit: welches Format wie viel ausmacht

Bilder sind auf vielen Websites der grösste Teil der übertragenen Daten. Das Hero-Bild entscheidet häufig über den Largest Contentful Paint, also darüber, wann der Hauptinhalt sichtbar ist. Die Formatwahl ist deshalb nicht nur Ästhetik, sondern Technik.

Was in der Praxis am meisten bringt:

1. Fotos als WebP in passender Grösse. Ein Foto, das auf dem Handy 400 Pixel breit erscheint, muss nicht in 4'000 Pixel Breite geladen werden. Responsive Bilder liefern je nach Bildschirm eine andere Grösse aus.
2. Logo und Icons als SVG, bereinigt. Eine SVG direkt aus dem Grafikprogramm enthält oft Ebenennamen, Editor-Informationen und ungenutzte Definitionen. Nach dem Bereinigen ist sie häufig deutlich kleiner.
3. Icons nicht als Icon-Schrift. Eine ganze Icon-Schrift zu laden, um sechs Symbole zu zeigen, ist unnötig. Einzelne SVG-Icons sind leichter und zugänglicher.
4. Lazy LoadingLazy Loading ist eine Technik, bei der Bilder, Videos oder andere Ressourcen erst geladen werden, wenn sie in den sichtbaren Bereich rücken — statt sofort beim…Mehr erfahren → für Bilder unterhalb des sichtbaren Bereichs. Bilder, die erst beim Scrollen erscheinen, lädt der Browser erst bei Bedarf. Der Begriff dazu: Lazy Loading.

Bei bestehenden Websites gehört das Nachoptimieren neu hochgeladener Bilder zur laufenden Website-Wartung, weil sich Bildgrössen mit jedem neuen Beitrag wieder einschleichen. Wie sich Ladezeit messen lässt und welche Werte Google heranzieht, beschreibt unser Artikel zu Core Web Vitals und INP.

Beispiel: die Bildformate eines Schweizer Handwerksbetriebs

Konstruiertes Beispiel, kein Kundenfall. Eine Schreinerei aus dem Zürcher Oberland lässt ihre Website neu bauen. Im Bestand liegen ein Logo als JPG mit weissem Hintergrund, rund 80 Fotos von Projekten direkt aus der Kamera, einige Screenshots von Offertplänen und ein gescanntes Zertifikat.

So werden die Dateien eingeordnet:

• Logo: Die Grafikerin, die das Logo vor Jahren gestaltet hat, findet die Vektordatei noch. Daraus entsteht eine bereinigte SVG in zwei Farbvarianten, hell und dunkel. Für Social Media und das Vorschaubild beim Teilen wird zusätzlich eine PNG erzeugt.
• Projektfotos: Die Originale bleiben im Archiv. Auf der Website erscheinen sie als WebP in mehreren Breiten, das System wählt je Bildschirm die passende.
• Screenshots der Pläne: Als WebP mit hoher Qualitätsstufe, damit Linien und Beschriftungen scharf bleiben. Wo Details entscheidend sind, zusätzlich als PDF zum Download.
• Icons für die Leistungen: Statt Clipart-PNGs ein einheitliches Set aus SVG-Icons, die die Akzentfarbe der Website übernehmen.
• Zertifikat: Als WebP zur Ansicht und als PDF zum Download. Ob das Zertifikat überhaupt auf die Website gehört, ist eine inhaltliche Frage, keine technische.

Das Ergebnis ist kein Zaubertrick, sondern Ordnung: jede Datei im Format, das zu ihrem Inhalt passt.

Checkliste für Ihre Website

• Ist das Logo eine SVG und auf allen Bildschirmen scharf?
• Sind Icons als SVG eingebunden und farblich an die Website angepasst?
• Werden Fotos als WebP oder JPG in passender Grösse ausgeliefert, nicht als grosse PNG?
• Haben alle inhaltlich relevanten Bilder einen beschreibenden Alt-TextDer Alt-Text ist eine Textbeschreibung, die im HTML einem Bild zugeordnet wird. Er hilft blinden Menschen über Screenreader, dient als Ersatz, wenn ein Bild…Mehr erfahren →?
• Wurden SVG-Dateien vor dem Hochladen bereinigt?
• Können nur berechtigte Personen SVG-Dateien hochladen?
• Liegt das Hero-Bild in einer Grösse vor, die zum Bildschirm passt?

Wenn Sie bei mehreren Punkten unsicher sind, lohnt sich ein Blick von aussen. In einem Website-Audit prüfen wir Bilder, Ladezeit und Technik zusammen. Wird ohnehin ein Neubau geplant, gehört die Formatfrage in die Konzeption, siehe Website erstellen lassen und unsere Webdesign-Leistungen.

Fazit

SVG ist kein besseres oder schlechteres Format als WebP, sondern ein anderes Werkzeug. Für alles, was gezeichnet wurde, ist SVG unschlagbar: scharf in jeder Grösse, klein, einfärbbar. Für alles, was fotografiert wurde, ist WebP der heutige Standard, mit JPG und PNG als Ausweichlösung. Wer die Formate so verteilt, bekommt eine Website, die schneller lädt und auf jedem Bildschirm sauber aussieht. Und wer sein Logo nur als JPG hat, sollte die Vektordatei suchen, bevor irgendjemand mit dem Umwandeln beginnt.