SVG-Dateien sind aus dem heutigen World Wide Web kaum mehr wegzudenken. Obwohl viele Webmaster diese Dateien nutzen, verstehen viele dennoch nicht deren Aufbau und Funktion. Wir möchten Dir zeigen, was eine SVG-Datei ist, wo diese eingesetzt wird und welche Vorteile mit dem Format einhergehen. Zudem zeigen wir Dir, wie Du eine SVG-Datei erstellst und worauf Du dabei unbedingt achten solltest.
Was ist das SVG Dateiformat überhaupt?
Bereits im Jahr 2001 wurde durch das World Wide Web Consortium (W3C) das SVG-Format als das Format empfohlen, mit welchem zweidimensionale Vektorgrafiken im Web angezeigt werden sollten. Allerdings war die Empfehlung für das Scalable Vector Graphics - Format deutlich verfrüht, da die meisten Webbrowser nicht in der Lage waren, dieses Format auszulesen. Man benötigte spezielle Plugins, sogenannte Parser, um eine SVG-Datei im Web verwenden zu können.
Eine SVG-Datei ist zwar eine Grafik, welche allerdings nicht auf Pixeln, sondern auf Pfaden basiert. Das bedeutet, dass SVG-Bilder animiert, per HTML oder CSS manipuliert und problemlos skaliert werden können. Die unscharfen Ränder und Klötzchen, wie Du sie von Größenveränderungen bei Bilddateien kennst, gehören bei einer SVG-Datei der Vergangenheit an. Dennoch bietet das Format sowohl Vorteile als auch Nachteile, welche wir im folgenden Beitrag näher beleuchten möchten.
Seinen vollständigen Durchbruch erfuhr das SVG-Format erst im Jahr 2017, als die Vorteile der Nutzung von SVG-Dateien mit modernen Browsern sichtbar wurden. Ab diesem Zeitpunkt gewann das Format immer stärker an Bedeutung und ist aus dem heutigen Webdesign kaum mehr wegzudenken.
Das sind die wichtigsten SVG-Elemente im Web
Wenn Du verstehen möchtest, wie vielseitig einsetzbar eine SVG-Datei ist, ist es wichtig diese im Einsatz zu betrachten. Das Umfeld zeigt häufig deutlich, warum die SVG-Datei einer Pixelgrafik überlegen ist.
Logos und Icons auf Webseiten
Webdesigner setzen vermehrt auf SVG-Dateien in Logos oder für die Darstellung von Icons auf den Seiten selbst. Viele dieser Grafiken kommen mehrfach auf der Seite in unterschiedlichen Größen vor. Durch das SVG-Format und somit die Vektoren lässt sich die Größe bequem und ohne Qualitätsverlust verändern. Es müssen nicht unterschiedliche Bilddateien bearbeitet und vorgehalten werden.
Animationen im Web
Wer seinen Nutzern Content bieten möchte, muss manche Inhalte bildlich darstellen. Zudem können Animationen die Orientierung auf einer Webseite verbessern oder diese zugänglicher machen. SVG-Dateien lassen sich sehr einfach animieren, sodass vor allem technische Elemente besser ins Bild gebracht werden können.
Für Suchmaschinen zugängliche Infografiken und Illustrationen
Pixelgrafiken sind für Web-Crawler nur dann zugänglich, wenn diese mit einem umfangreichen ALT-Text hinterlegt sind. Werden Grafiken und Illustrationen allerdings als SVG-Datei erstellt, können die Crawler die Datei problemlos lesen. Darunter zählen auch die darin enthaltenen Schlüsselwörter. Somit gewinnt nicht nur die Datei an Bedeutung, sondern auch die Gewichtung der Bewertung einer Seite kann sich verschieben. Gut platzierte und sinnvoll integrierte SVG-Bilder können das Ranking einer Seite erheblich beeinflussen.
Vektorgrafiken vs. Pixelgrafiken
Bei jeder SVG-Datei handelt es sich um eine sogenannte Vektorgrafik. Wir haben Dir in unserem Artikel zu Vektorgrafiken den genauen Unterschied ausführlich erklärt. Kurz zusammengefasst handelt es sich bei einer Vektorgrafik um eine aus mathematischen Formeln bestehende Grafik. Somit kann diese beliebig skaliert werden, da die Formeln die Position, Form und Farbe jedes Elements im Zusammenhang mit allen anderen definieren. Bei Pixelgrafiken sind die einzelnen Pixel mit bestimmten Farbwerten festgelegt. Hier kann es bei Skalierungen zu Verschiebungen und ähnlichen Phänomenen kommen.
Die Kompatibilität von SVG-Dateien im Web
Während es zu den Anfangszeiten des Formats noch notwendig war, für die Browser einzelne Parser bereitzustellen, damit SVG-Dateien überhaupt verarbeitet werden können, sieht dies in der heutigen Zeit anders aus. Mit dem HTML5-Standard sind alle gängigen Browser in der Lage und fähig, eine SVG-Datei korrekt zu implementieren und zu interpretieren. Das muss allerdings noch immer nicht bedeuten, dass es hier keine Probleme geben kann. Zum einen wird die Interpretation der Datei vom Browser übernommen. Ist dieser Browser auf einem sehr alten Gerät - egal ob Smartphone oder Computer installiert, kann eine zu komplexe oder zu informative SVG-Datei zu einer starken Verlangsamung der Ladegeschwindigkeit führen.
Der passende SVG-Editor und seine Funktionen
Um SVG-Dateien zu erstellen oder um diese zu bearbeiten, benötigt man ein Programm, welches in der Lage ist, Vektorgrafiken zu erstellen. Diese erleichtern die Erstellung solcher Grafiken, da die Formeln nicht händisch programmiert werden müssen. Allerdings erzeugen viele der Editoren einen zu aufgeblähten Code. Je komplexer die Datei, umso größer wird auch der Code-Überhang. Daher ist eine Optimierung der Dateien wichtig. Doch schauen wir zunächst, welche Editoren in der Lage sind, eine SVG-Datei zu erstellen oder zu bearbeiten:
- Adobe Illustrator
- Affinity Designer
- Inkscape
- CorelDRAW
- LibreOffice
- Microsoft Visio
- Und viele mehr
Die Editoren funktionieren dabei häufig wie ein normales Grafikprogramm. Die Vektorgrafiken werden über Pfade, Knotenpunkte, Masken, Schattierungen und Füllungen erstellt. Erst bei der Ausgabe im SVG-Format wird die Datei dann in XML erstellt und ausgegeben. Alternativ können Grafiken auf Raster- beziehungsweise Pixelbasis mittels Vektorisierung umgewandelt werden. Hier ist allerdings häufig händische Nacharbeitung nötig.
Die Optimierung von SVG-Dateien und deren Notwendigkeit
Bei einer SVG-Datei handelt es sich um eine Sammlung von Formeln. Diese müssen vom Browser ausgelesen, verstanden und anschließend in eine Grafik umgesetzt werden. Je nach Größe und Komplexität der Datei kann es den Computer stark belasten. Um schnelle Ladezeiten zu gewährleisten, ist es wichtig, die Dateigröße zu reduzieren und die SVG-Dateien in dieser Hinsicht zu optimieren. Dabei kannst Du nach verschiedenen Methoden vorgehen.
Die effektivste Methode ist es, die gesamte SVG-Datei durchzugehen und nicht notwendige Kommentare und Dopplungen zu entfernen. Mit diesem Vorgehen ist es häufig möglich, die Dateigröße einer Datei um mehr als die Hälfte zu reduzieren. Einfacher geht es allerdings auch automatisiert. Mit dem kostenfreien Online-Tool kannst Du diese Arbeit automatisieren. Es gelingt dem Werkzeug dabei zuverlässig, die Dateigröße vieler SVG-Dateien spürbar zu verkleinern. Ein hilfreiches Werkzeug, wenn komplexe SVG-Dateien einfach minimiert werden sollen.
Die Verwendung von SVG-Dateien im Alltag
SVG-Dateien werden in den unterschiedlichsten Bereichen eingesetzt. Auch dort, wo wir es auf den ersten Blick kaum vermuten würden. Schauen wir uns einige Beispiele an, in denen das SVG-Format häufig eingesetzt wird:
Logos und Grafiken im Netz
In der heutigen Zeit sind SVG-Dateien vor allem für Logos oder wiederkehrende Grafiken wichtig, welche in unterschiedlichen Größen im Netz gebraucht werden. Dank der einfachen Skalierbarkeit sind die entstehenden Bilder immer in bester Qualität verfügbar.
Schriftarten
Die meisten modernen Schriftarten werden in der heutigen Zeit als SVG-Datei erstellt. Denn in diesem Format lassen sie sich nicht nur sehr einfach erstellen, sondern auch bei Bedarf ohne Schwierigkeiten anpassen.
Architekten und Ingenieure
Technische Zeichnungen müssen äußerst akkurat sein. Das bedeutet allerdings auch, dass die Dateien nach Möglichkeit vollständig skalierbar sein müssen. Daher sind hier SVG-Dateien das Mittel der Wahl, wenn Architekten oder auch Ingenieure miteinander auf Basis von Bildinhalten kommunizieren.
Druckereien
In vielen Druckmedien werden SVG-Dateien immer dort verwendet, wo eine Skalierbarkeit des Ausgangsmaterials notwendig ist. Unter anderem spielen die Dateien beim Druck von Plakaten, Zeitschriften, Bannern oder auch Büchern eine wichtige Rolle. Die einfache Skalierbarkeit sorgt hierbei für eine gleichbleibend hohe Qualität über alle Formate hinweg.
Kreatives Arbeiten
Egal ob beim Plotten, dem 3D-Druck oder auch bei einer Lasermaschine, überall dort kommen ebenfalls SVG-Dateien zum Einsatz, da sich die Dateien somit auf die unterschiedlichen Größen der Werkstücke anpassen lassen. So gibt es von den erstellten Designs in allen Größen die gleiche Ausführung ohne irgendwelche Probleme. Ob beim Plotten eines Designs für ein T-Shirt oder beim Arbeiten mit Mr Beam, wenn du einen Schneidjob ausführen willst, ohne die passende SVG-Datei lässt das Ergebnis häufig zu wünschen übrig. Falls du den Mr Beam nur für Gravuren nutzt, kannst Du auch ganz normale JPEG-Dateien verwenden.
Spiele und Animationen für Webseiten und mehr
Auch für Animationen und einfache Spiele kannst Du SVG-Dateien einsetzen. Die Limitierungen liegen meist in der Größe der Dateien, da für komplexe Spiele und Inhalte sehr viel Speicherplatz benötigt wird. Daher gibt es hier natürliche Grenzen der verwendbaren Ressourcen.
