SVG oder PNG: was für Logos, Icons und Illustrationen?

Designer schicken Logos als SVG, Websites verlangen PNG, und manche Programme nehmen nur eines von beiden an. Beides sind Bildformate, aber sie beschreiben Bilder auf völlig verschiedene Weise, und das entscheidet, welches für eine Aufgabe das richtige ist. Wir haben fünf sehr unterschiedlich komplexe SVGs mit PNG-Kopien aus unserem eigenen Konverter verglichen.

Formen gegen Pixel

Eine SVG-Datei ist Text: eine Liste von Formen wie „hier ein Kreis, 3 Einheiten groß, grün gefüllt“. Der Browser oder das Programm zeichnet diese Formen in jeder benötigten Größe neu, die Kanten sind also immer so scharf, wie der Bildschirm es zulässt. Ein PNG ist ein Raster aus Pixeln, verlustfrei gespeichert. In seiner eigenen Größe sieht es perfekt aus und muss gestreckt, und damit unscharf, werden, um größer angezeigt zu werden.

Damit ist SVG das natürliche Format für alles, was aus Formen besteht: Logos, Icons, Schaubilder, Diagramme, Karten. Fotos bestehen aus Millionen leicht unterschiedlicher Pixel ohne Formen, die man beschreiben könnte, sie gehören also in ein Pixelformat wie JPEG, WebP oder AVIF, wie wir in JPG, PNG, WebP oder AVIF getestet haben.

Die Testdateien

• Icon: eine Kamera aus dem Open-Source-Set Lucide, zwei Formen.
• Logo: das Tooloat-Logo, drei Formen.
• Flagge: die Flagge Brasiliens, 17 Formen einschließlich Schriftzug.
• Siegel: das Große Siegel der Vereinigten Staaten, eine detaillierte Illustration mit 776 Formen.
• Weltkarte: eine leere Weltkarte mit jedem Land als eigener Form, insgesamt 2.316.

Flagge, Siegel und Karte sind gemeinfreie Dateien von Wikimedia Commons. Jedes SVG lief mit Standardeinstellungen durch unseren SVG-Minifier und wurde mit dem SVG-in-PNG-Konverter in vier Größen zu PNG.

Dateigrößen

Komprimiert waren Icon, Logo und Flagge kleiner als selbst ein PNG mit 64 Pixeln davon und 50- bis 250-mal kleiner als eines mit 1024 Pixeln, und das für jede Bildschirmgröße zugleich. Deshalb werden Icon-Sets und Logos als SVG verteilt.

Siegel und Karte zeigen die Grenze. Ein SVG wächst mit der Zahl der Formen, nicht mit der Größe, in der es angezeigt wird. Das Siegel ist als komprimiertes SVG noch kleiner als ein PNG mit 1024 Pixeln, aber die Karte mit ihren Tausenden detaillierter Küstenlinien braucht selbst komprimiert 342 KB, sechsmal mehr als ein optimiertes PNG mit 1024 Pixeln. Wird eine komplexe Zeichnung immer in einer Größe gezeigt, kann ein PNG oder ein verlustfreies WebP die leichtere Wahl sein.

Schärfe

Der Größenunterschied zählt weniger als das, was passiert, wenn ein Bild größer angezeigt wird als geplant: auf einem Handybildschirm mit hoher Dichte, wenn jemand hineinzoomt oder wenn ein für eine Website gemachtes Logo auf einem Poster landet.

PNG mit 256 px erstelltSVG

Ein SVG hat dieses Problem nie. Bei einem PNG besteht die Lösung darin, es in der größten Größe zu erstellen, in der es je gezeigt wird, mindestens doppelt so groß wie seine normale Anzeigegröße für scharfe Bildschirme, und die größere Datei in Kauf zu nehmen.

Ein PNG in ein SVG verwandeln

Wenn Sie von Ihrem Logo nur ein PNG haben, kann ein Vektorisierer es aus Formen neu aufbauen. Wir haben drei PNGs mit unserem PNG-in-SVG-Konverter und seinen Vorgaben vektorisiert:

• Das Logo, 512 Pixel: 6 Formen in einem SVG mit 1,5 KB, das wie das Original aussieht. Flache Farben und saubere Kanten kann das Vektorisieren am besten.
• Das Siegel, 1024 Pixel: 943 Formen und 401 KB, größer als das Original-SVG und mit weniger Detail in den feinen Linien. Eine Illustration zu vektorisieren funktioniert, aber ein echtes Vektororiginal ist immer besser.
• Ein Foto einer Eule, 1000 Pixel: 7.039 Formen und 1,8 MB, vierzehnmal so groß wie ein JPEG desselben Fotos mit 129 KB.

Wo SVG nicht funktioniert

• E-Mail. Viele E-Mail-Programme, darunter einige der beliebtesten, zeigen keine SVG-Bilder an. Nutzen Sie in E-Mails PNG.
• Uploads. Soziale Netzwerke, Marktplätze und viele Formulare nehmen nur JPEG, PNG oder WebP an.
• Nicht vertrauenswürdige Dateien. SVG kann Skripte enthalten, deshalb lehnen viele Websites SVG-Uploads aus Sicherheitsgründen ab. Unser Minifier entfernt Skripte und Event-Handler standardmäßig.
• Text ohne seine Schrift. Text in einem SVG wird mit den Schriften des Geräts des Betrachters gezeichnet, sofern er nicht in Formen umgewandelt wurde, ein Logo kann also anderswo anders aussehen. Wandeln Sie Schriftzüge in Pfade um, bevor Sie eine Logodatei weitergeben.

Die übliche Lösung: das SVG als Masterdatei behalten und daraus PNGs exportieren, wo ein Pixelformat verlangt wird.

Was Sie nutzen sollten

Alle hier verwendeten Werkzeuge laufen in Ihrem Browser: Der SVG-in-PNG-Konverter exportiert jede Größe, der SVG-Minifier verschlankt Dateien, und der PNG-in-SVG-Konverter vektorisiert Logos und Zeichnungen.