Was ist SVG? Wann eignet sich SVG und wann PNG?

Was ist eine SVG-Datei?

SVG steht für Scalable Vector Graphics, also skalierbare Vektorgrafiken. Statt nur ein Raster aus farbigen Pixeln zu speichern, kann eine SVG Formen, Pfade, Füllungen und Text beschreiben. Ein Browser oder Zeichenprogramm zeichnet daraus ein Bild in der gewünschten Größe. Dafür musst du keinen Code schreiben: Ein Vektorgrafikprogramm kann deine Gestaltung als SVG exportieren.

Stell dir ein kreisförmiges Logo vor. Eine SVG kann den Kreis und seine Farbe beschreiben; eine PNG speichert die Pixel, aus denen der Kreis in einer bestimmten Größe besteht. Die SVG kann einen größeren Kreis mit glattem Rand zeichnen. Beim Vergrößern der PNG werden die vorhandenen Pixel auf eine größere Fläche verteilt, wodurch der Rand unschärfer werden kann. Die SVG-Übersicht von MDN erklärt die Funktionsweise des Formats.

SVG und PNG: die Unterschiede im Alltag

Keines der beiden Formate ist immer kleiner. Eine detaillierte SVG mit Tausenden von Pfaden kann größer sein als eine passende PNG. Vergleiche die tatsächlichen Dateien und prüfe, ob das Zielsystem sie akzeptiert. Für Fotos kommen eher JPG, WebP oder AVIF infrage; SVG ist kein Format zur Fotokomprimierung.

Wann SVG eine gute Wahl ist

Ein Logo, das im Kopfbereich einer Website, in einer Präsentation und auf einem großen Banner verwendet wird, profitiert von einem Vektororiginal. SVG eignet sich auch für Symbole und einfache Diagramme, die in mehreren Größen funktionieren sollen. Prüfe trotzdem die kleinste Version: Eine scharfe Darstellung macht winzige Schrift nicht automatisch lesbar und verhindert nicht, dass dünne Linien kaum noch zu erkennen sind.

Eine SVG kann ein gewöhnliches Pixelbild wie eine PNG oder JPG enthalten. Dieses Bild behält seine ursprüngliche Auflösung. Ein kleines Foto in eine SVG einzubetten stellt keine Details wieder her und wandelt es nicht in Vektorformen um. Auch das Umbenennen einer .png-Datei in .svg ändert ihr Format nicht.

Größe, viewBox und leere Ränder verstehen

Breite und Höhe beschreiben die Bildmaße. Die viewBox legt den Koordinatenbereich fest, in dem die Grafik angeordnet wird. Sie hilft, die Zeichnung in den verfügbaren Anzeigebereich zu skalieren; sie ist keine Einstellung für die Dateigröße. Die viewBox-Referenz von MDN erklärt diesen Zusammenhang.

Wirkt dein Logo innerhalb einer großen leeren Fläche zu klein, prüfe die Grenzen der Zeichenfläche oder Seite in deinem Grafikprogramm. Beim Export der gesamten Seite kann ungenutzter Raum um die Zeichnung mitgespeichert werden. Passe die Seite gegebenenfalls an die Grafik an, lass aber Platz für Konturen und Schatten. Eine größere Anzeigebreite vergrößert auch die leeren Ränder.

SVG auf einer Website verwenden

Ein gewöhnliches Website-Logo lässt sich als SVG-Bilddatei einbinden. Gib inhaltlich wichtigen Bildern einen beschreibenden Alternativtext und reserviere im Layout die passende Breite und Höhe. Rein dekorative Bilder sollten einen leeren Alternativtext haben. Beispiele findest du im Leitfaden zu Alt-Texten.

Dass ein Browser SVG anzeigen kann, bedeutet nicht, dass jedes CMS oder Upload-Formular das Format akzeptiert. Prüfe vor dem endgültigen Export die Regeln deiner Plattform. Eine SVG, die als Bild eingebunden wird, verhält sich außerdem anders als direkt in die Seite eingebetteter SVG-Code: Im Bildkontext sind Skripte und das Laden externer Ressourcen eingeschränkt. Der MDN-Leitfaden zu SVG als Bild beschreibt diese Einschränkungen. Nutze Grafiken aus vertrauenswürdigen Quellen und die von deiner Plattform unterstützte Veröffentlichungsmethode.

Eine SVG für die Weitergabe vorbereiten

• Exportiere den gewünschten Grafikbereich statt einer unnötig großen Seite.
• Binde verknüpfte Bilder und benötigte Stile in die Datei ein, damit sie nicht von separaten Dateien abhängt.
• Soll die Schrift auf einem anderen Gerät genau gleich aussehen, wandle den Text im Grafikprogramm in Pfade um. Bewahre ein bearbeitbares Original auf: Text in Pfaden lässt sich nicht mehr wie normaler Text bearbeiten.
• Entferne ungenutzte Objekte und unnötige Programmdaten aus einer Kopie. Prüfe das Ergebnis, bevor du das Original ersetzt.
• Öffne die exportierte SVG in der vorgesehenen App oder auf der Website und kontrolliere Kanten, Text, Hintergrund und fehlende Elemente.

Text in Pfade umzuwandeln kann die Anzahl der Pfade und die Dateigröße erhöhen. Zu starkes Vereinfachen von Pfaden kann die Zeichnung verändern. Beurteile die Optimierung anhand des tatsächlichen Ergebnisses, statt Daten ungeprüft zu entfernen. Pixilos SVG-zu-PNG-Werkzeug erstellt ein Pixelbild; es optimiert keine SVG und liefert keine kleinere SVG-Datei zurück.

Wann du eine PNG-Kopie brauchst

Erstelle eine PNG, wenn der empfangende Dienst sie verlangt, wenn du eine statische Kopie ähnlich einem Screenshot brauchst oder feste Pixelmaße benötigst. Exportiere das SVG-Original in der geforderten Größe. PNG bewahrt weder die Vektorpfade noch interaktives Verhalten, und späteres Vergrößern kann das Bild unscharf machen. Behalte die SVG für weitere Exporte.

Mit SVG zu PNG kannst du die Pixelmaße wählen und transparente Bereiche behalten oder einen einfarbigen Hintergrund hinzufügen. Die Werkzeugseite erklärt Größenlimits, Schriftarten und nicht unterstützte Inhalte. Die Option für einen transparenten Hintergrund erhält vorhandene Transparenz; sie entfernt keine Hintergrundform, die in der SVG gezeichnet wurde.

Vor dem Veröffentlichen oder Versenden

1. Prüfe, welche Formate das Zielsystem akzeptiert.
2. Behalte SVG, wenn Vektorformen und flexible Größen hilfreich sind; erstelle PNG, wenn Pixelbilder benötigt werden.
3. Kontrolliere die Grafikgrenzen, Schriftarten und eingebetteten Bilder.
4. Sieh dir die fertige Datei in der vorgesehenen Anzeigegröße und auf dem späteren Hintergrund an.
5. Vergleiche die Dateigrößen, wenn die Ladegeschwindigkeit wichtig ist, und bewahre dein bearbeitbares Original auf.