SVG – Scharfe Bilder in WordPress

SVG-Dateien sind im heutigen Webdesign nicht mehr wegzudenken. „Scalable Vector Graphics“ bieten Ihnen in der Zeit von unzählbaren, unterschiedlichen Bildschirmgrößen und -auflösungen eine einfache und sichere Darstellung Ihrer Logos und anderer zweidimensionaler Grafiken. Welche Vorteile und Probleme solche Dateien bergen, erfahren Sie in unserem heutigen Beitrag.

Was zeichnet eine SVG-Bilddatei aus?

Das Besondere an SVG ist, dass es sich hierbei um ein XML-basiertes Dateiformat handelt. Das bedeutet, dass Grafiken, z.B. Logos, dieses Dateityps nicht aus Pixeln, sondern aus Code bestehen. So lassen sich diese Grafiken in Texteditoren öffnen und bearbeiten. Unser Elbnetz-Logo sieht in Wirklichkeit eigentlich so aus:

Eine SVG Datei im Texteditor

Das diese Dateien aus Code bestehen bedeutet allerdings nicht, dass sie von Hand programmiert werden müssen. Hergestellt werden SVG Dateien in Programmen wie Adobe Illustrator, Graphic (Mac), CorelDRAW (Windows) oder Inkscape (freie Software), indem hier das Logo erstellt und anschließend lediglich in dem Dateiformat SVG abgespeichert wird. Dabei werden die Bestandteile der Grafik in Code umgewandelt, den der Browser später (nach Einbinden der Datei in die Website) als Bild wieder ausgeben kann.

Warum SVG für Logos nutzen?

Bei Dateiformaten wie PNG/JPEG besteht eine Datei immer aus Pixeln. Das ist in erster Linie nicht negatives, allerdings sorgen diese Pixel dafür, dass, je weiter das Bild vergrößert wird, dieses an Schärfe verliert. 
Für Logos, die im PNG-Format gespeichert wurden, bedeutet das also, dass sie auf z.B. hochauflösenden oder besonders großen Bildschirmen unscharf wirken. Aber auch auf Smartphone-Ansichten einer Website wird das Logo oft verkleinert und nicht immer perfekt scharf dargestellt. Für ein repräsentatives Element wie das eigene Firmen-Logo ist das nicht wirklich vorteilhaft.

SVG-Dateien hingegen, können beliebig skaliert werden und stellen ein Logo immer gestochen scharf dar. Der Code, aus dem sie bestehen, lässt demnach sowohl Logos als auch Icons in jeder Größe gleich scharf aussehen.

Links: SVG Rechts: PNG

Auch Animationen werden mit SVG immer häufiger erstellt. Sie sind CSS-Animationen recht ähnlich. Allerdings lassen sich durch SVG-Animationen die unterschiedlichsten Ideen realisieren, beispielsweise ein Schriftzug, der Buchstabe für Buchstabe geschrieben wird. Auch können Elemente erstellt werden, die erst beim Anklicken beginnen, sich zu bewegen oder zu verformen. Wenn Sie mehr zu diesem komplexen Thema erfahren wollen, empfehlen wir Ihnen den Beitrag „A Guide to SVG Animations“.

Welche Probleme können mit SVG entstehen?

Dass SVG-Dateien aus Code bestehen ist nicht zwangsläufig nur positiv, es bedeutet auch, dass sich in ihnen schadhafter Code befinden kann. Deshalb sollte man des Ursprungs seines Codes sicher sein, ob man die Datei selber erstellt hat, oder ob der Urheber der Datei vertrauenswürdig ist.

Standardmäßig sind SVG-Dateien in WordPress deswegen aus Sicherheitsgründen nicht über die Mediathek hochladbar. Wer also vorhat, das Logo seiner Website durch ein SVG zu ersetzen, sollte sich zuvor das Plug-in Scalable Vector Graphics (SVG) installieren. Dadurch können auch SVG-Dateien ganz leicht per Drag-and-drop in die Mediathek gezogen werden. Nach Upload des Logos kann das nicht mehr benötigte Plug-in einfach wieder deinstalliert werden, die SVG-Datei bleibt weiterhin in der Mediathek zugänglich.

Solange ein SVG nicht als Logo genutzt wird, haben sie keine festgelegte Größe und nehmen 100 % des Bildschirms ein. Logos werden in der Regel schon passend dimensioniert. Daher müssen Icons oder andere Grafiken, die als SVG eingebunden wurden, immer eine Breiten- oder Höhenangabe erhalten, an der sie sich orientieren können. Das gehört bei Bilddateien aber sowieso zum guten Ton.

Die letzte Herausforderung liegt in der Kompatibilität von SVGs und älteren Browser-Versionen. Zwar unterstützen laut caniuse.com alle aktuellen Browserversionen SVG, ältere Versionen wie Internet Explorer 8 oder Android 4.3 unterstützen dieses Dateiformat dafür nur bedingt, oder gar nicht.

Übersicht: SVG-Kompatibilität in aktuellen Browser-Versionen

Fazit

Trotz kleinerer Herausforderungen empfehlen wir Ihnen, SVG-Grafiken auf Ihrer Website zu verwenden, vor allem, wenn es um Ihr Logo geht. Bei all den unterschiedlichen Bildschirmgrößen bietet dieses Dateiformat auch auf der stetig wachsenden Zahl hochauflösender Bildschirme eine knackscharfe Darstellung.

Quelle Bilder: Eigene Screenshots und/oder Grafiken