Beitrag

 
SVG-Immer-scharf

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.


Wodurch 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:

Elbnetzlogo als Code

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.

Der Unterschied zwischen png und svg

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?

Das 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 vor hat, das Logo seiner Website durch ein SVG zu ersetzen, sollte sich zuvor das Plugin 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.

Browserkompatibilität

Ü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

Autor:

Seit August 2015 bei Elbnetz und ein großer WordPress-Fan. Ich habe eine Ausbildung zur Assistentin für Screen Design und programmiere/zeichne in meiner Freizeit rund um die Uhr.

  • Lars

    Super – ich habe es direkt umgesetzt. Doch die Dateien sind rießig für ein Bild. Das schreckt meinen Miniserver ab.

    Antworten
    • Kim Salewski

      Hallo Lars,

      für gewöhnlich sind SVG-Dateien nicht all zu groß. Unsere sind meistens zwischen 20 und 70 kB groß, was bei dir passiert sein kann ist, dass (sofern die SVG mit Illustrator erstellt wurde), dass „Preserve Illustrator capabilities“ beim Speichern angehagt war. Durch diese Option werden SVGs gerne um die 300 kB größer. Hier hast du einen Link, bei dem du über die Optionen in Adobe Illustrator nachlesen kannst: http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

      Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?