Es gibt Dutzende von Bilddateitypen, die sich je nach Komprimierungsart, Formatierung und Browser-Support unterscheiden. Zwei der am häufigsten verwendeten Formate sind jedoch SVG und PNG.
Diese beiden Dateitypen könnten unterschiedlicher nicht sein – jeder ist für bestimmte Situationen besser geeignet. Sie sind sicherlich nicht in jeder Hinsicht austauschbar, aber du wirst feststellen, dass SVGs bestimmte Aufgaben besser erfüllen können als das Standard-PNG-Bild.
Erfahre den Unterschied zwischen SVG und PNG und wo sie auf deiner Webseite am besten eingesetzt werden.
Schau dir unseren Video-Leitfaden zu SVG vs. PNG an
Was ist SVG?
SVG steht für Scalable Vector Graphics (skalierbare Vektorgrafiken) und ist das am häufigsten verwendete Vektordateiformat im Internet. Schauen wir uns das mal genauer an:
- Skalierbar: SVGs können verkleinert oder vergrößert werden, ohne dass die Qualität des Bildes darunter leidet. Es bleibt gestochen scharf und klar, egal wie groß oder klein es ist.
- Vektor: Die meisten Bilddateitypen enthalten Pixel. Vektoren sind im Grunde genommen Codeteile, die ein Bild in Echtzeit rendern und es in die Pixel umwandeln, die du auf deinem Bildschirm siehst. Während sie dasselbe Bild anzeigen, ist das, was im Hintergrund vor sich geht, sehr unterschiedlich.
- Grafiken: Auch wenn es vielleicht nicht so bekannt ist, ist SVG ein Bilddateityp wie PNG, JPEG oder GIF. Es geht nur ein bisschen anders vor.
Vektoren sind in XML geschriebene Codestücke, die Formen, Linien und Farben darstellen, um zu erklären, wie es funktioniert.
Obwohl es durchaus möglich ist, ein Bild nur mit Code zu erstellen, verwenden die meisten Leute einen Vektorgrafik-Editor wie Inkscape oder Adobe Illustrator. Du kannst auch PNGs oder andere Rasterbilder in SVG umwandeln, aber die Ergebnisse sind nicht immer gut.
Wenn die Seite geladen wird, wird dieser Code in Grafiken umgewandelt, so dass du ein SVG nicht sofort von einem PNG unterscheiden kannst. Aber weil SVGs einfach in Pixel umgewandelte Codezeilen sind, können sie auf jede Auflösung skaliert werden – ob groß oder klein – ohne Qualitätsverlust.
SVG unterstützt auch Animationen und Transparenz, was es zu einem vielseitigen Dateiformat macht.
Der einzige Nachteil 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 ganz einfach, es auf deine Webseite hochzuladen und korrekt anzuzeigen.
Vor- und Nachteile von SVG
Obwohl sie noch nicht so weit verbreitet sind wie Rasterdateitypen wie PNG, werden Vektorgrafiken immer beliebter. Sie erfüllen einige wichtige Aufgaben, die Rasterbilder einfach nicht können. Hier erfährst du, warum die Leute SVGs lieben.
- SVG-Bilder sind skalierbar. Du kannst es in jeder beliebigen Auflösung gestalten, ohne dass die Qualität leidet oder es pixelig wird. Bei Rasterbildern musst du von Anfang an wissen, welche Größe du willst, sonst riskierst du, dass das Bild zu groß oder zu klein wird.
- SVGs sehen immer gestochen scharf und schön aus, weil sie nie an Qualität verlieren. Rasterbilder können schon bei geringer Größenänderung unscharf aussehen.
- Da SVGs nur Code sind, ist ihre Dateigröße minimal und gut optimiert. Es gibt auch SVG-Optimierer, die sie noch handlicher machen. Deine Webseite wird wahrscheinlich etwas schneller geladen, wenn du sie stattdessen verwendest.
- Im Gegensatz zu PNGs unterstützen SVGs Animationen.
SVG hat PNG einiges voraus, von der Skalierbarkeit bis zur geringeren Größe, aber es ist nicht in jeder Situation besser. Hier sind die Nachteile der Vektordateitypen.
- Obwohl SVGs von allen modernen Browsern unterstützt werden, kann es bei der Darstellung in älteren Browsern und auf älteren Geräten zu Kompatibilitätsproblemen kommen. Wenn ein großer Teil deiner Besucherinnen und Besucher diese verwendet, könnte ein Umstieg eine schlechte Idee sein.
- SVGs sind schwieriger zu bearbeiten und erfordern spezielle Programme zur Erstellung und Bearbeitung. Du kannst sie zwar auch nur mit XML gestalten, aber das ist nicht immer möglich. Hochwertige Tools wie Adobe Illustrator können teuer sein.
- SVGs lassen sich nicht so einfach einbetten wie PNGs. Wenn du WordPress verwendest, wird es von der Standard-Mediathek nicht unterstützt, sodass du ein Plugin brauchst, um es überhaupt hochzuladen.
- SVGs müssen vom Browser gerendert werden, wenn die Seite geladen wird. Wenn du also zu viele SVGs oder eine große Datei mit vielen Vektoren verwendest, kann das das Gerät überfordern.
Wann du SVG statt PNG verwenden solltest
Du solltest zwar nicht alle deine PNGs in SVGs umwandeln, aber Vektorgrafiken sind ein hervorragender Ersatz für manche Bilder.
SVG-Bilder eignen sich hervorragend für dekorative Webseiten-Grafiken, Logos, Icons, Grafiken und Diagramme und andere einfache Bilder. Auf unserer Homepage findest du ein hervorragendes Beispiel für Vektorgrafiken in Aktion.
Allerdings funktionieren sie nicht so gut mit komplexen Bildern, die viele Farben und Formen enthalten, wie z. B. Screenshots, Fotos und sogar detaillierte Kunstwerke. Es ist zwar möglich, jedes beliebige Bild in SVG zu konvertieren, aber die Browser kommen mit komplexen Vektoren mit Hunderten von Farben nicht immer gut zurecht, da sie beim Laden der Seite gerendert werden müssen.
Außerdem können SVG-Grafiken wunderschön sein, aber das Entwerfen komplexer Bilder erfordert viel Zeit, Mühe und die Beherrschung fortschrittlicher Tools. Halte es einfach, wenn du deine Vektorgrafiken erstellen willst.
Wenn du detaillierte Bilder hast, solltest du auf jeden Fall bei PNG bleiben.
SVGs eignen sich jedoch besser für responsive und retina-fähiges Webdesign, da sie skalierbar sind und keine Qualitätseinbußen aufweisen. Außerdem unterstützen sie Animationen, PNG hingegen nicht, und Rasterdateitypen, die Animationen unterstützen, wie GIF, APNG und WebP, haben alle ihre Probleme.
Für einfache Grafiken, die eventuell eine Animation benötigen und garantiert auf jeder Bildschirmgröße gut skalierbar sind, solltest du SVG verwenden.
Was ist PNG?
PNG steht für Portable Network Graphics, und dieser Name spiegelt die weite Verbreitung dieses Dateityps wider. Jeder, der schon einmal einen Computer benutzt hat, hat wahrscheinlich schon mit PNG-Dateien gearbeitet, denn neben JPEG ist es der häufigste Dateityp im Internet.
PNG ist ein Rasterbild-Dateityp, ähnlich wie die meisten gängigen Bildformate. Das bedeutet, dass es aus Pixeln besteht, denselben kleinen Punkten, die auch auf deinem Monitor oder Bildschirm angezeigt werden. Das macht es zwar einfach darzustellen, bedeutet aber auch, dass die Bildqualität von der Auflösung abhängt – also davon, wie viele Pixel das Bild hat.
Wenn du also ein Rasterbild vergrößerst oder verkleinerst, wird die Qualität beeinträchtigt. Manchmal ist der Schaden vernachlässigbar, vor allem beim Verkleinern, und manchmal kann es dazu führen, dass ein Bild unscharf und völlig unbrauchbar wird.
Dennoch macht die weite 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
Warum ist PNG das am weitesten verbreitete Bilddateiformat im Internet? Hier sind die Vorteile:
- PNG-Dateien lassen sich leicht bearbeiten und in jedem gängigen Bildbearbeitungstool öffnen. Um ein PNG-Bild zu erstellen oder zu verändern, musst du nicht für fortgeschrittene Programme bezahlen, sondern kannst höchstens einen kostenlosen Editor wie GIMP herunterladen.
- Egal, ob du von Grund auf neu programmierst oder den WordPress-Medienmanager verwendest, die Anzeige von PNG-Bildern auf deiner Webseite ist ganz einfach.
- PNG verwendet eine verlustfreie Kompression, die es schärfer aussehen lässt als verlustbehaftete JPEGs. Allerdings kostet dies eine größere Dateigröße und kann nicht mit Vektorbildern verglichen werden.
Andererseits wurde das PNG-Format vor Jahrzehnten entwickelt und hat einige bemerkenswerte Mängel, die nicht an die moderne Zeit angepasst wurden.
- Du kannst die Größe von PNG-Dateien nicht ohne Qualitätsverlust ändern. Wenn du Rastergrafiken entwirfst, musst du sorgfältig planen und darauf achten, dass sie die richtige Größe haben, sonst verschwendest du am Ende Zeit mit der Erstellung unbrauchbarer Bilder.
- PNGs sind aufgrund ihrer verlustfreien Komprimierung sehr groß. Daher können sie deine Webseite verlangsamen. Um dies zu beheben, müssen sie noch stärker komprimiert werden, was die Qualität beeinträchtigt.
- Bilder „retina-tauglich“ zu machen, ist bei PNGs mühsamer und führt eher zu Unschärfen.
- PNG unterstützt keine Animationen. Andere animierte Rasterdateitypen wie GIFs können schwerwiegende Probleme haben; GIFs sind zum Beispiel von sehr geringer Qualität und unterstützen nur 256 Farben.
Wann ist PNG besser als SVG?
PNG ist nicht umsonst der am häufigsten verwendete Dateityp: Er ist sehr vielseitig und passt in fast jede Situation. Es gibt nur ein paar Schwachpunkte, die du bei der Verwendung beachten solltest, wie die große Dateigröße und die fehlende Skalierbarkeit.
PNGs eignen sich für die Darstellung von detaillierten Bildern, Kunstwerken und Fotografien – also für alles, was ein Vektorgrafikbild nicht bewältigen kann. Alles, was Hunderte von Farben und eine hohe Auflösung hat, sollte wahrscheinlich ein PNG sein.
Das heißt nicht, dass du PNGs nicht auch für einfachere Bilder wie Logos und dekorative Grafiken verwenden kannst, aber SVGs sind für diese Aufgabe besser geeignet.
Wenn du dir nicht sicher bist, ob eine Plattform mit dem neueren, weniger unterstützten SVG-Dateityp umgehen kann, ist PNG die beste Wahl – allein schon, um sicherzugehen.
Zum Beispiel kannst du SVGs in den meisten sozialen Medien nicht hochladen. Und da einige E-Mail-Clients mit Vektoren nicht zurechtkommen, ist es in der Regel empfehlenswert, in E-Mail-Templates PNGs zu verwenden.
Generell eignen sich PNGs gut für alle komplexen, nicht animierten Bilder, vor allem für solche, die Transparenz erfordern. Du kannst es so gut wie überall verwenden, nur manchmal wäre ein SVG besser geeignet.
Denke daran, dass du immer PNG-Fallbacks verwenden kannst, wenn dein SVG nicht geladen werden kann. Daher ist es in der Regel sicher, Vektoren zu verwenden, selbst wenn ein großer Teil deiner Nutzer/innen ältere Geräte oder Browser verwendet.
Was ist besser: SVG oder PNG?
Keiner der beiden Dateitypen ist besser oder schlechter als der andere; jeder hat seine Grenzen. Auch wenn SVG in einigen Bereichen besser ist als PNG, kann PNG bestimmte Dinge besser handhaben.
Generell solltest du aber SVG verwenden, wenn es sinnvoll ist, und PNG in allen anderen Situationen, in denen Vektoren nicht ausreichen. Technisch gesehen kannst du in diesen Fällen zwar beides verwenden, aber in einigen Bereichen ist SVG vorzuziehen.
SVG unterstützt Animationen, PNG nicht. Rasterdateitypen wie GIF und APNG können als Alternativen betrachtet werden. Dennoch gibt es kein perfektes animiertes Rasterformat, das weithin unterstützt wird, gut bekannt ist, eine hohe Qualität hat und eine kleine Dateigröße aufweist. SVGs erfüllen all diese Anforderungen.
SVGs passen sich außerdem perfekt an jede Bildschirmgröße an und sind daher standardmäßig responsive und retina-fähig. PNGs verlieren an Qualität, wenn sie in der Größe verändert werden, und es ist mühsam, sie zu skalieren – vor allem, wenn du nur kleine Bilder hast, die auf großen Bildschirmen nicht gut dargestellt werden können.
Außerdem sind SVGs in der Regel kleiner als PNGs, sodass sie deinen Server weniger belasten, obwohl sie beim Laden gerendert werden müssen.
Verwende sie für einfache, flache Farbgrafiken, Logos und dekorative Grafiken auf deiner Webseite.
PNGs hingegen eignen sich für die Darstellung komplexer Grafiken mit einer hohen Auflösung oder für Bilder mit Tausenden von Farben. SVGs können diese Menge an Farben und Formen im Moment noch nicht verarbeiten.
Diese Art von komplexen Bildern wird oft den Großteil der Bilder auf deiner Webseite ausmachen, also ist es noch nicht an der Zeit, PNG zu verwerfen.
Zusammenfassung
SVG und PNG sind zwei sehr unterschiedliche Dateiformate. Letztendlich ist es egal, ob du PNG oder JPEG auf deiner Webseite verwendest, es sei denn, es handelt sich um eine Nische, aber die Entscheidung zwischen SVG und PNG ist viel wichtiger.
Die Wahrscheinlichkeit, dass du PNGs verwendest, ist viel größer, da es ein einfacheres, leichter zugängliches und vielseitigeres Dateiformat ist. Komplexe Bilder wie Screenshots und detaillierte Illustrationen sollten PNG verwenden.
SVGs sind zwar schwieriger zu erstellen und zu bearbeiten, haben aber eine Reihe von Vorteilen gegenüber PNGs. Wenn es sinnvoll ist, Vektorbilder zu verwenden, z. B. für dekorative Grafiken und Logos, solltest du auf jeden Fall SVG verwenden.
Du wirst wahrscheinlich nicht jedes einzelne Bild auf deiner Webseite durch ein SVG ersetzen, aber ihre responsive Eigenschaft und die geringere Dateigröße machen sie in bestimmten Situationen zu einem guten Kandidaten.
Bist du ein SVG- oder PNG-Fan? Bitte teile deine Meinung mit unserer Community in den Kommentaren unten!
Salman Ravoof ist ein autodidaktischer Webentwickler, Autor, Kreativer und ein großer Bewunderer von Free and Open Source Software (FOSS). Neben Technik begeistert er sich für Wissenschaft, Philosophie, Fotografie, Kunst, Katzen und Essen. Erfahre mehr über ihn auf seiner Website und trete mit Salman auf X in Kontakt.
Schreibe einen Kommentar