Wie man SVG als Webcontent nutzt
Für viele Webdesigner ist SVG ein wichtiger Begriff im Design und der Entwicklung von Websites. Bietet dieses Datei-Format einige Vorteile gegenüber den bekannten Bildformaten JPG und PNG. Dieser Artikel geht näher auf die Vorteile und die Nutzbarkeit von SVG als verwendetes Dateiformat im Webdesign ein und wie man daraus den größtmöglichen Nutzen auch in Bezug für Suchmaschinenoptimierung und mobile Optimierung schaffen kann.
Was ist SVG und warum braucht man es?
Eine Scalable Vector Graphic (=SVG) ist ein Dateiformat der XML Familie zur Darstellung von zweidimensionalen Vektorgrafiken. XML ist dabei eine erweiterbare Auszeichnungssprache. Somit ist XML (= eXtensible Markup Language) ein definierter Standard, um für Maschinen und Menschen lesbare Dokumente zu erstellen.
Und damit auch wirklich jeder versteht, wie SVG und XML zusammen hängen hier aus dem Kärntner Volksmund aufgedeutscht: Wenn wir alle in Österreich XML sprechen, dann is SVG der Kärntner Dialekt von XML :) (jetzt ist alles klar, oder?)
Das SVG-Format kommt dabei aus dem Grafikbereich und ist ein bekanntes und beliebtes Werkzeug für Verfechter von Adobe Illustrator und Inkscape. Wer über diese Tools ein SVG entwickelt, schreibt den Code im Hintergrund automatisch durch diese Werkzeuge mit. Ansonsten können SVGs mittels Codierung direkt in HTMLs erstellt oder gezeichnet werden.
Wie werden SVG-Dateien im Web verwendet
SVG-Dateien oder -Formate finden im Web vor allem bei
Logos
Buttons
Hintergrundgrafiken
Animationen
Landkarten oder
Werbebanner
Filter
Links
Fonts
Metadaten
seine Anwendung findet. Sie kommen hauptsächlich wegen ihrer Skalierbarkeit zum Einsatz, wo sie sich an die Größe des gegebenen Bildschirms anpassen, um zB Logos genau auf der richtigen Stelle, in der richtigen Qualität richtig zu positionieren.
Vor- und Nachteile von SVG
Bilder wie JPEG werden “gerastert”. Das bedeutet es werden einzelne Pixel verwendet, um Bilder zu beschreiben. Jedes Pixel repräsentiert dabei ein Dataset aus Farbe, Größe etc. Die JPG-Bilder haben dabei eine definierte und vorgegebene Größe zB 24 x 24 Pixel. Das bedeutet 24 Bildpunkte pro Seite.
Der Nachteil bei gerasterten Bildern, ist dabei vor allem im Zoom zu finden. Die Bilder werden mit eckigen Kanten dargestellt, je größer Bilder das Bild gezeigt werden sollen.
Bei einer Vektorgrafik werden die Informationen zu einem Bild berechnet und können daher auf jede Größe und Auflösung skaliert werden. Durch die laufende Neuberechnung, um eine Vektorgrafik richtig darzustellen
Vorteile
Geringe Dateigröße: SVG-Dateien haben eine geringe Dateigröße, die auch bei einer Vergrößerung der Grafik gleich bleibt. Damit hat ein Server keine langen Aufbauzeiten für die Grafiken und die geringe Ladezeit hat wesentlichen Einfluss auf die Suchmaschinenoptimierung
Freier Standard: Als open source kann die Auszeichnungssprache von allen Geräten ohne Einschränkung oder Beschränkung auf ein spezielles Tool genutzt werden
Animationen: Man kann verschiedene SVG-Elemente auch auf verschiedene Art und Weisen animieren. Dabei werden hauptsächlich Events von Javascript genutzt oder eingeschränkt auch CSS-Eigenschaften genutzt.
CSS: man kann SVG auch mit CSS manipulieren und verschönern. Damit kann man nachträglich das Aussehen verändern und anpassen, ohne dass man die gesamte Datei verändern muss
Kompatibilität: SVG Formate sind in allen Browserversionen verfügbar und kompatibel. Jeder Browser stellt eine SV-Grafik gleich dar und ignoriert unbekannte XML-Elemente, die es in seiner Browserversion nicht gibt
Barrierefrei: dadurch, dass SVG textbasiert sind, können sie von Maschinen gelesen und wiedergegeben werden
Quelltext: alle Informationen zur SVG-Datei lassen sich im HTML-Quellcode lesen und interpretieren bzw. mit einem Programmeditor anpassen und verändern
Nachteile
Ressourcenanforderungen: es ist ein Renderprozess auf Browserebene notwendig. Wenn der PC eines Users eine entsprechend schwache Rechenleistung zeigt, kann bei komplexen Vektorgrafiken, die Ladezeit in einer Webpräsenz durchaus beeinflusst werden und negative Auswirkungen haben
begrenzte Anwendungsmöglichkeiten: Je komplexer die Darstellung, desto schwieriger wird es nachträglich etwas zu verändern. Vor allem bei fotorealistischen Grafiken stößt SVG mit seinen begrenzten Detailreichtum an seine Grenzen.
SVG-geeignete Programme: Man kann nicht mit jedem Programm SVG-Dateien erstellen. Man kann zwar mit jedem Editor eine SVG-Datei händisch entwickeln, aber man kann vollständige grafische Elemente nur aus Adobe Illustrator oder Inkscape heraus erstellen.
Komplexität: Je komplexer eine Bildwelt, desto weniger gut ist SVG geeignet. Vor allem alles in Richtung der Dreidimensionalität verlangt Hilfsmittel mit Javascript oder CSS, um gewünschte Tiefen, Farben und Lichteffekte übernehmen zu können.
Wie baut man SVG in HTML ein?
svg-Dateien lassen sich leicht an einem Start-Tag und einem End-Tag erkennen, zwischen dem Attribute zusammengefasst werden.
<svg>
<polygon>
</svg>
Innerhalb eines Elements kann ich mehrere Attribute vergeben. Wobei die Attribute im Grunde beschrieben, wo sich Punkte und Kanten eines Bildes befinden, und wie sie miteinander verbunden sind. Da diese Beschreibung von Punkten, Linien, Polygonen, Rechtecken und Kreisen standardisiert und gleich für alle Browser sind, können sie immer gleich in Qualität und Größe dargestellt werden.
Als IMG-Objekt
Man kann SVG wie ein Bild in eine Website einbauen. Das bedeutet, dass es keinen Hinweis darauf gibt, dass ein SVG eingebunden wurde, außer an der Dateiendung *.svg im Source-Link des Bildes. Die Informationen für die Berechnung des Bildes werden in den Metadaten des Bildes ausgelesen und vom Browser dann verwendet.
Aber Achtung: Wenn Dimensionen vom HTML-Element von den Dimensonen der Grafiken abweichen, so werden diese skaliert. Also kann es zu Verzerrungen und falscher Darstellungsweise kommen.
Link zum Git-Repository für mehr Input: https://github.com/sannyroe/svg/blob/2584433c2aafcfe97c15cf44eb381c22fe870d1f/einbauen-als-img
Als Object-Referenz
Eine Object-Referenz bindet eine SVG als externes Dokument ein. Es gibt also zusätzlich zu einem HTML ein eigenständiges *.xml Dokument, in dem eine SVG-Datei beschrieben wird. Diese Methode verwendet man dann, wenn man ein SVG-Element nicht auf allen Seiten aber auf manchen benötigt zum Beispiel. Link zum Git-Repository: https://github.com/sannyroe/svg/blob/2584433c2aafcfe97c15cf44eb381c22fe870d1f/einbauen-als-object-reference
Als Inline-Referenz
Durch diese Methode wird ein SVG direkt im HTML eingebaut und ausgelesen, was den Vorteil hat, dass es Browserunabhängig gelesen und interpretiert werden kann. Zudem sind SVGs innerhalb des Quellcodes leicht und schnell zu erkennen und können dort auch von Entwicklern bearbeitet werden.
Dies ist auch die gängigste und einfachste Form um Vektorgrafiken im Webdesign zu verwenden und einzubinden.
Als Inline-Referenz ist der Einbau von SVG die gängigste Art und Weise und bietet in Kombination mit CSS oder JS noch zusätzliche Gestaltungsmöglichkeiten bzw. Handlungsspielräume.
Man kann Texte zum Beispiel simpel animieren, sodass diese per Timing zoomen oder sich verändern: https://github.com/sannyroe/svg/blob/2584433c2aafcfe97c15cf44eb381c22fe870d1f/zooming-text Es lassen sich auch Buttons animieren und interaktiv gestaltet, sodass sie auf jedem Endgerät gleich darstellen lassen in ihrer Skalierung: https://github.com/sannyroe/svg/blob/2584433c2aafcfe97c15cf44eb381c22fe870d1f/button-animation-html%2Bcss Für aufwendige Logos kann SVG ebenso verwendet werden, um einzelne Elemente eines Logos zu animieren, oder das gesamte Logo in Bewegung zu versetzen: HTML: https://github.com/sannyroe/svg/blob/2584433c2aafcfe97c15cf44eb381c22fe870d1f/logo-animation-complexe-HTML
Getestet können alle Codes für eine Visuelle Darstellung unter https://codepen.io/pen/ werden, wo man den Code einfügt und gezielt ausgespielt bekommt.
Closing
Gerade in einer Zeit, wo die Suchmaschinenoptimierung und der Mobile-First-Index von Suchmaschinen vorherrschend sind, ist der Einsatz von SVG-Datein unabdingbar für Buttons, Logos und Hintergründe. Websites werden damit in ihrer Dateigröße und somit den Ladezeiten reduziert. Zusätzlich ist immer gewährleistet, dass ein Button, ein Logo oder ein Hintergrund auf jedem Endgerät gleich dargestellt wird in unveränderlicher und scharfer Qualität.
Nichtsdestotrotz hat die Technologie auch ihre Schwierigkeiten mit der Einschränkung von Programmen, mit denen man SVG-Bilddatein anschließend verwenden kann. Auch eine hohe Komplexität in der Codierung bei komplexeren Grafiken kann schnell in einen Nachteil müden.
Persönliches Fazit: Unbedingt einsetzen im Web - aber nur dort wo es notwendig ist und in einer Form, die brauchbar erscheint.
Quellen:
Comments