SVG vs. PNG: Welches Bildformat sollten Sie verwenden?

Schnelle Antwort

Wählen Sie SVG für Logos, Symbole, Diagramme, Strichzeichnungen und Illustrationen aus unterschiedlichen Formen. Wählen Sie PNG für Screenshots, strukturierte Grafiken und Bilder mit Details auf Pixelebene. Für Fotos sind JPEG, WebP oder AVIF normalerweise effizienter als beide Formate.

Der Kernunterschied

PNG ist ein Rasterformat: Es speichert ein rechteckiges Raster aus farbigen Pixeln. SVG ist ein Vektorformat: Es beschreibt Geometrie mit XML-Elementen wie Pfaden, Kreisen, Rechtecken, Füllungen und Strichen.

Dieser Unterschied wirkt sich auf die Skalierung aus. Beim Vergrößern einer PNG-Datei werden möglicherweise Pixel sichtbar, da die Datei eine feste Auflösung hat. Eine SVG-Datei wird anhand mathematischer Anweisungen in der gewünschten Größe neu gezeichnet, sodass ein gut erstellter Vektor auf einem kleinen Bildschirm oder einem großen Schild scharf bleibt.

Wenn SVG die bessere Wahl ist

SVG eignet sich normalerweise am besten, wenn das Bildmaterial klare Grenzen und eine überschaubare Anzahl an Farben aufweist. Typische Beispiele sind Markenzeichen, Schnittstellensymbole, Infografiken, Diagramme, flache Illustrationen, Karten, Diagramme und Schnittpfade.

SVG kann auch in einem Browser gestaltet oder animiert werden. Einzelne Füllungen und Striche können auf CSS reagieren, und aussagekräftiger Text kann durchsuchbar bleiben, wenn er als Text und nicht als umrissene Pfade gespeichert wird.

Ein Vektor lässt sich leichter anpassen. Ein Designer kann eine Form auswählen, eine Farbe ändern, eine Kurve anpassen oder ein Detail entfernen, ohne die umgebenden Pixel neu zu zeichnen.

Wenn PNG die bessere Wahl ist

PNG ist eine gute Wahl für verlustfreie Rasterinhalte und vollständige Alpha-Transparenz. Verwenden Sie es für Screenshots, Pixelkunst, detaillierte Texturen, gemalte Illustrationen und Rasterexporte, deren genaue Pixel unverändert bleiben müssen.

Der Versuch, Tausende von fotografischen Farbübergängen als Vektorpfade zu beschreiben, erzeugt eine große und schwer zu bearbeitende SVG-Datei. Das Ergebnis sieht möglicherweise wie ein Poster aus, wiegt aber immer noch mehr als das Originalbild.

Bei der Web-Performance geht es nicht nur um die Erweiterung

Ein einfaches Symbol kann als optimiertes SVG erheblich kleiner sein. Eine komplexe Illustration kann größer werden als ein entsprechendes PNG oder WebP, wenn sie zu viele Pfade und Koordinaten enthält.

Messen Sie die echten Dateien. Optimieren Sie SVG-Metadaten und numerische Genauigkeit und testen Sie dann das Rendering. Exportieren Sie bei PNG nach Möglichkeit mit den tatsächlichen Anzeigeabmessungen und vermeiden Sie den Versand einer großen Quelle, nur um eine kleine Miniaturansicht anzuzeigen.

Inline SVG kann eine Anfrage speichern und ermöglicht CSS-Styling, vergrößert aber auch das HTML-Dokument. Wiederverwendete Site-weite Symbole werden oft besser als externe, zwischenspeicherbare Dateien oder als Teil eines kontrollierten Symbolsystems bereitgestellt.

Überlegungen zur Barrierefreiheit und Sicherheit

Ein informatives Bild benötigt unabhängig vom Format immer noch einen zugänglichen Namen oder angrenzenden Text. Dekorative Bilder sollten von unterstützender Technologie ignoriert werden.

SVG ist aktiver XML-Inhalt und kann Links, Stile oder Skripte enthalten. Akzeptieren Sie nur vertrauenswürdige SVG-Dateien oder bereinigen Sie vom Benutzer bereitgestelltes Markup, bevor Sie es inline anzeigen. PNG ist kein ausführbares Markup, was das Rendering-Modell einfacher macht.

Welches Format sollte ein Logo verwenden?

Behalten Sie ein Master-Logo als SVG bei, wenn saubere Vektorpfade verfügbar sind. Exportieren Sie PNG-Kopien für Systeme, die SVG, E-Mail-Signaturen oder bestimmte Rasterplatzierungen nicht akzeptieren. Dadurch erhalten Sie eine bearbeitbare Quelle und vorhersehbare Fallbacks.

Konvertieren Sie für ein reines Raster-Logo die saubere Version mit der höchsten Auflösung, überprüfen Sie Buchstabenzähler und Kurven und überprüfen Sie das Ergebnis in einem Vektoreditor. Gehen Sie nicht davon aus, dass durch die Änderung eines Dateinamens von .png in .svg Vektorpfade entstehen.

Entscheidungscheckliste

Verwenden Sie SVG, wenn das Bildmaterial hauptsächlich aus Formen besteht, auf viele Größen skaliert werden muss, bearbeitbare Pfade benötigt oder eine Schneidemaschine antreiben soll. Verwenden Sie PNG, wenn das Bild auf Pixel, Texturen, exakten Screenshots oder detaillierter Transparenz angewiesen ist.

Konvertieren Sie ein Rasterlogo mit Bild zu SVG oder erstellen Sie eine Rasterlieferdatei mit SVG-zu-PNG-Konverter.