SVG vs. PNG: Was sind die Unterschiede und wann werden sie verwendet?
Veröffentlicht: 2021-12-15Es gibt Dutzende von Bilddateitypen, die sich je nach Komprimierungstyp, Formatierung und Browserunterstützung unterscheiden. Aber zwei der am häufigsten verwendeten sind SVG- und PNG-Formate.
Diese beiden Dateitypen könnten unterschiedlicher nicht sein – jeder eignet sich besser für bestimmte Situationen. Sie sind sicherlich nicht in jeder Hinsicht austauschbar, aber Sie werden vielleicht feststellen, dass SVGs bestimmte Aufgaben besser ausführen können als das Standard-PNG-Bild.
Erfahren Sie den Unterschied zwischen SVG und PNG und wo sie am besten auf Ihrer Website eingesetzt werden.
Was ist SVG?
SVG steht für Scalable Vector Graphics und ist das am weitesten verbreitete Vektordateiformat im Internet. Lassen Sie uns das aufschlüsseln:
- Skalierbar: SVGs können vergrößert oder verkleinert werden, ohne die Bildqualität zu beeinträchtigen. Es wird vollkommen scharf und klar sein, egal wie groß oder klein es ist.
- Vektor: Die meisten Bilddateitypen enthalten Pixel. Vektoren sind im Wesentlichen Codeteile, die ein Bild in Echtzeit rendern und es in die Pixel umwandeln, die Sie auf Ihrem Bildschirm sehen. Während sie das gleiche Bild zeigen, ist das, was im Hintergrund passiert, sehr unterschiedlich.
- Grafiken: Obwohl es vielleicht nicht so bekannt ist, ist SVG ein Bilddateityp wie PNG, JPEG oder GIF. Es geht nur etwas anders an die Sache heran.
Vektoren sind in XML geschriebene Codeteile, die Formen, Linien und Farben darstellen, um zu erläutern, wie es funktioniert.
Während das Erstellen eines Bildes mit nichts als Code durchaus möglich ist, verwenden die meisten Menschen einen Vektorgrafik-Editor wie Inkscape oder Adobe Illustrator. Sie können auch PNGs oder andere Rasterbilder in SVG konvertieren, aber die Ergebnisse sind nicht immer großartig.

Wenn die Seite geladen wird, wird dieser Code in Grafiken umgewandelt, sodass Sie ein SVG nicht sofort von einem PNG unterscheiden können. Da SVGs jedoch einfach Codezeilen sind, die in Pixel konvertiert werden, bedeutet dies, dass sie auf jede Auflösung – ob groß oder klein – skaliert werden können, ohne an Qualität zu verlieren.

SVG unterstützt auch Animation und Transparenz, was es zu einem vielseitigen Dateiformat macht.
Das einzige Problem ist, dass es nicht so weit verbreitet ist wie Standardformate wie PNG, daher wird es von älteren Browsern und Geräten weniger unterstützt, und es ist nicht immer am einfachsten, es auf Ihre Website hochzuladen und korrekt anzuzeigen.
Dieser Leitfaden soll
Vor- und Nachteile von SVG
Obwohl sie immer noch nicht so weit verbreitet sind wie Rasterdateitypen wie PNG, werden Vektorgrafiken immer beliebter. Sie erledigen einige wesentliche Aufgaben, die Rasterbilder einfach nicht können. Deshalb lieben Menschen SVGs.
- SVG-Bilder sind skalierbar. Sie können es in jeder Auflösung entwerfen, und es wird vergrößert oder verkleinert, ohne die Qualität zu beeinträchtigen oder verpixelt zu werden. Bei Rasterbildern müssen Sie von Anfang an wissen, welche Größe Sie möchten, sonst riskieren Sie, dass das Bild zu groß oder zu klein wird.
- SVGs sehen immer knackig und schön aus, da es nie zu Qualitätsverlusten kommt. Rasterbilder können bereits bei geringfügiger Größenänderung verschwommen aussehen.
- Da SVGs nur Code sind, ist ihre Dateigröße minimal und gut optimiert. Es gibt auch SVG-Optimierer, um sie noch besser handhabbar zu machen. Ihre Website wird wahrscheinlich etwas schneller geladen, wenn Sie sie stattdessen verwenden.
- Im Gegensatz zu PNGs unterstützen SVGs Animationen.
SVG hat einiges mit PNG zu tun, von der Skalierbarkeit bis hin zu einer kleineren Größe, aber es ist nicht in jeder Situation besser. Hier ist das Schlechte von Vektordateitypen.
- Während SVGs von allen gängigen, modernen Browsern unterstützt werden, können Sie auf Kompatibilitätsprobleme stoßen, wenn Sie sie auf älteren Browsern und Geräten rendern. Wenn ein erheblicher Teil Ihrer Besucher diese verwendet, könnte ein Wechsel eine schlechte Idee sein.
- SVGs sind schwieriger zu bearbeiten und erfordern spezielle Programme zum Erstellen und Bearbeiten. Obwohl Sie sie nur mit XML entwerfen können, ist dies nicht immer machbar. Premium-Tools wie Adobe Illustrator können teuer sein.
- SVGs lassen sich nicht annähernd so einfach einbetten wie PNGs. Wenn Sie WordPress verwenden, wird es von der Standard-Medienbibliothek nicht unterstützt, sodass Sie ein Plugin benötigen, um sie überhaupt hochzuladen.
- SVGs müssen vom Browser gerendert werden, wenn die Seite geladen wird, sodass die Verwendung eines Überschusses davon oder einer großen Datei mit vielen Vektoren das Gerät belasten kann.
Wann sollte man SVG über PNG verwenden?
Während Sie definitiv nicht alle Ihre PNGs in SVGs konvertieren sollten, können Vektorgrafiken einen hervorragenden Ersatz für einige Bilder darstellen.
SVG-Bilder eignen sich hervorragend für dekorative Website-Grafiken, Logos, Symbole, Grafiken und Diagramme sowie andere einfache Bilder. Auf unserer Homepage finden Sie ein hervorragendes Beispiel für Vektorgrafiken in Aktion.

Sie funktionieren jedoch nicht so gut mit komplexen Bildern mit vielen Farben und Formen, wie z. B. Screenshots, Fotografien und sogar detaillierten Kunstwerken. Obwohl es möglich ist, jedes Bild in SVG umzuwandeln, verarbeiten Browser komplexe Vektoren mit Hunderten von Farben nicht immer gut, da sie gerendert werden müssen, wenn die Seite geladen wird.
Darüber hinaus können SVG-Grafiken schön sein, aber das Entwerfen komplexer Bilder erfordert viel Zeit, Mühe und Kenntnisse in fortgeschrittenen Bearbeitungswerkzeugen. Halten Sie es einfach, wenn Sie Ihre Vektorbilder erstellen möchten.
Wenn Sie detaillierte Bilder haben, bleiben Sie auf jeden Fall bei PNG.
SVGs eignen sich jedoch aufgrund ihrer Skalierbarkeit und fehlenden Qualitätsminderung besser für reaktionsschnelles und Retina-fähiges Webdesign. Darüber hinaus unterstützen sie Animationen, während PNG dies nicht tut, und Rasterdateitypen, die Animationen unterstützen, wie GIF, APNG und WebP, haben alle ihre Probleme.
Verwenden Sie SVG für einfache Grafiken, die möglicherweise eine Animation erfordern und sich garantiert auf jeder Bildschirmgröße gut skalieren lassen.
Was ist PNG?
PNG steht für Portable Network Graphics, und dieser Name spiegelt sich in der Verbreitung dieses Dateityps wider. Jeder, der jemals einen Computer benutzt hat, hat wahrscheinlich mit PNGs gearbeitet, da es neben JPEG der häufigste Dateityp im Internet ist.
PNG ist ein Rasterbilddateityp, ähnlich den meisten gängigen Bildformaten. Das bedeutet, dass es aus Pixeln besteht, den gleichen kleinen Punkten, die auf Ihrem Monitor oder Bildschirm angezeigt werden. Dies erleichtert zwar die Anzeige, bedeutet aber auch, dass die Bildqualität von der Auflösung abhängt – wie viele Pixel das Bild enthält.
Wenn Sie also ein Rasterbild vergrößern oder verkleinern, wird die Qualität beeinträchtigt. Manchmal ist der Schaden vernachlässigbar, insbesondere beim Herunterskalieren, und manchmal kann er ein Bild verschwommen und völlig unbrauchbar machen.

Dennoch macht die Verbreitung von PNG es zu einem guten Kandidaten für die allgemeine Verwendung. Dieser Dateityp unterstützt Transparenz, aber keine Animation.
Vor- und Nachteile von PNG
Was macht PNG zum am weitesten verbreiteten Bilddateiformat im Internet? Hier sind die Vorteile:
- PNG-Dateien können einfach bearbeitet und in jedem gängigen Bildbearbeitungstool geöffnet werden. Sie müssen nicht für fortgeschrittene Programme bezahlen, um ein PNG-Bild zu erstellen oder zu ändern; Sie müssen höchstens einen kostenlosen Editor wie GIMP herunterladen.
- Unabhängig davon, ob Sie von Grund auf neu programmieren oder den WordPress-Medienmanager verwenden, das Anzeigen von PNG-Bildern auf Ihrer Website ist eine einfache Aufgabe.
- PNG verwendet eine verlustfreie Komprimierung, die es schärfer aussehen lässt als JPEGs mit verlustbehafteter Komprimierung. Dies ist jedoch mit höheren Kosten für die Dateigröße verbunden und kann nicht mit Vektorgrafiken verglichen werden.
Andererseits wurde das PNG-Format vor Jahrzehnten erstellt und weist mehrere bemerkenswerte Mängel auf, die nicht für die Neuzeit aktualisiert wurden.
- Sie können die Größe von PNG-Dateien nicht ohne Qualitätsverlust ändern. Sie müssen beim Entwerfen von Rastergrafiken sorgfältig planen und sicherstellen, dass sie die richtige Größe haben, oder Sie könnten am Ende Zeit damit verschwenden, unbrauchbare Bilder zu erstellen.
- PNGs sind aufgrund ihrer verlustfreien Komprimierung sehr groß. Daher können sie Ihre Website verlangsamen. Um dies zu beheben, muss es noch stärker komprimiert und die Qualität beeinträchtigt werden.
- Bilder „retina-ready“ zu machen ist bei PNGs mühsamer und verursacht eher Unschärfen.
- PNG unterstützt keine Animationen. Andere animierte Rasterdateitypen wie GIFs können ernsthafte Probleme haben; Beispielsweise sind GIFs von sehr niedriger Qualität und unterstützen nur 256 Farben.
Wann sollten Sie PNG über SVG verwenden?
PNG ist aus einem bestimmten Grund der häufigste Dateityp; Es ist sehr vielseitig und passt in fast jede Situation. Es gibt nur ein paar Mängel, die bei der Verwendung zu berücksichtigen sind, wie die große Dateigröße und die mangelnde Skalierbarkeit.
PNGs eignen sich zum Anzeigen detaillierter Bilder, Kunstwerke und Fotografien – alles, was ein Vektorbild nicht verarbeiten kann. Alles mit Hunderten von Farben und einer hohen Auflösung sollte wahrscheinlich ein PNG sein.
Das heißt nicht, dass Sie PNGs nicht für einfachere Bilder wie Logos und dekorative Grafiken verwenden können, aber SVGs wären für diese Aufgabe besser geeignet.
Benötigen Sie eine Hosting-Lösung, die Ihnen einen Wettbewerbsvorteil verschafft? Kinsta bietet Ihnen unglaubliche Geschwindigkeit, modernste Sicherheit und automatische Skalierung. Sehen Sie sich unsere Pläne an
Wenn Sie sich nicht sicher sind, ob eine Plattform den neueren, weniger unterstützten SVG-Dateityp verarbeiten kann, ist PNG der richtige Weg – und sei es nur, um auf der sicheren Seite zu sein.
Beispielsweise können Sie SVGs nicht in die meisten sozialen Medien hochladen. Und da einige E-Mail-Clients Probleme mit Vektoren haben, wird normalerweise empfohlen, bei PNGs in E-Mail-Vorlagen zu bleiben.
Im Allgemeinen funktionieren PNGs gut mit allen komplexen, nicht animierten Bildern, insbesondere solchen, die Transparenz erfordern. Sie können es so ziemlich überall verwenden; Es ist nur so, dass manchmal ein SVG besser passen würde.
Denken Sie daran, dass Sie immer PNG-Fallbacks verwenden können, wenn Ihr SVG nicht geladen werden kann. Daher ist es normalerweise sicher, mit Vektoren zu arbeiten, selbst wenn ein erheblicher Teil Ihrer Benutzerbasis bei älteren Geräten oder Browsern geblieben ist.
Was ist besser: SVG oder PNG?
Kein Dateityp ist besser oder schlechter als der andere; jeder hat seine Grenzen. Obwohl SVG PNG in mehreren Bereichen übertrifft, kann PNG bestimmte Dinge viel besser handhaben.
Im Allgemeinen sollten Sie sich jedoch an SVGs halten, wo immer es angebracht ist, und PNGs in allen anderen Situationen verwenden, die Vektoren nicht bewältigen können. In diesen Fällen sind Sie möglicherweise technisch in der Lage, beides zu verwenden, aber SVG ist in einigen bestimmten Bereichen vorzuziehen.
Während SVG Animationen unterstützt, tut PNG dies nicht. Rasterdateitypen wie GIF und APNG können als Alternativen betrachtet werden. Dennoch gibt es kein perfektes animiertes Rasterformat, das weithin unterstützt wird, bekannt ist, eine hohe Qualität hat und zu kleinen Dateigrößen führt. SVGs erfüllen all diese Nischen.
SVGs lassen sich außerdem perfekt auf jede Bildschirmgröße skalieren, sodass sie standardmäßig reaktionsschnell und retinafähig sind. PNGs verlieren an Qualität, wenn die Größe geändert wird, und es ist mühsam, sie gut zu skalieren – besonders wenn Sie nur winzige Bilder haben, die auf großen Bildschirmen nicht gut angezeigt werden.
Schließlich sind SVGs im Allgemeinen kleiner als PNGs, sodass sie Ihren Server weniger belasten, obwohl sie beim Laden gerendert werden müssen.
Verwenden Sie sie für einfache, flache Farbgrafiken, Logos und dekorative Grafiken auf Ihrer Website.
Andererseits eignen sich PNGs, um komplexe Grafiken in hoher Auflösung oder Bilder mit Tausenden von Farben anzuzeigen. SVGs können im Moment nicht mit dieser Menge an Farben und Formen umgehen.
Diese Art von komplexen Bildern macht oft die Mehrheit der Bilder auf Ihrer Website aus, daher ist es noch nicht an der Zeit, PNG zu verwerfen.
Und PNGs werden von Browsern und bestimmten Plattformen wie E-Mail-Clients umfassender unterstützt. Wenn Sie sich nicht sicher sind, ob ein SVG richtig gerendert wird, gehen Sie auf Nummer sicher und verwenden Sie ein PNG.
Zusammenfassung
SVG und PNG sind zwei sehr unterschiedliche Dateiformate. Am Ende ist es keine große Sache, ob Sie PNGs oder JPEGs auf Ihrer Website außerhalb von Nischenanwendungsfällen verwenden, aber die Wahl zwischen SVG und PNG ist eine viel wichtigere Wahl.
Es ist viel wahrscheinlicher, dass Sie PNGs verwenden, da es sich um ein einfacheres, leichter zugängliches und vielseitigeres Dateiformat handelt. Komplexe Bilder wie Screenshots und detaillierte Illustrationen sollten PNG verwenden.
Obwohl SVGs schwieriger zu erstellen und zu bearbeiten sind, haben sie gegenüber PNGs eine Reihe von Vorteilen. Verwenden Sie auf jeden Fall SVG, wenn es sinnvoll ist, Vektorgrafiken zu verwenden, z. B. dekorative Grafiken und Logos.
Sie werden wahrscheinlich nicht jedes einzelne Bild auf Ihrer Website gegen ein SVG austauschen, aber ihre Reaktionsfähigkeit und kleinere Dateigröße machen sie in bestimmten Situationen zu einem großartigen Kandidaten.
Bist du eine SVG- oder PNG-Gang? Bitte teilen Sie Ihre Ansichten mit unserer Community in den Kommentaren unten!