Toggle menu

Find By Date

#Webdesign

Echt scharf: Grafiken im SVG-Format

Foto: fotolia.de/#126664583/Claudia Balasoiu

Beim Erstellen von Logos sind es Grafiker gewohnt, mit vektorbasierten Zeichenprogrammen, wie zum Beispiel Adobe Illustrator, zu arbeiten. Obwohl Vektorgrafiken auch für Webdesigner äußerst interessant sind, führen sie in diesem Bereich noch ein trauriges Schattendasein. Wir verraten Ihnen, warum Sie sich SVG-Grafiken näher ansehen und in Zukunft öfter einsetzen sollten.

Was sind SVG?

Das SVG (Scaleable Vector Graphics)-Format ist ein XML-basiertes Grafikformat zur Darstellung von zweidimensionalen Vektorgrafiken. Mit seiner Hilfe können Vektorgrafiken in Websites eingebunden werden.

Im Unterschied zu üblichen Bitmaps (Rastergrafiken) im JPG- oder PNG-Format, welche aus einzelnen Pixeln mit unterschiedlichen Farbwerten bestehen, wird bei SVG-Grafiken die aus Linien, Kreisen, Polygonen oder allgemeinen Kurven zusammengesetzte Form der darzustellenden Objekte gespeichert.

SVG-Grafiken wurden von Webdesignern in der Vergangenheit viel zu selten verwendet. Grund dafür war vor allem die fehlende Kompatibilität mit früheren Browsern, allen voran dem Internet Explorer. Zudem sind viele Grafiker bis heute nicht mit den Vorteilen und Möglichkeiten von Vektorgrafiken im Web vertraut.


Einsatzgebiete

In der Webdesign-Praxis bietet sich die Verwendung von SVG vor allem an bei:

  • Logos
  • allen Arten von Buttons
  • Hintergrundgrafiken
  • Animationen
  • Landkarten
  • Werbebanner

Vorteile von SVG

Verlustfreie Skalierung

Der wohl bedeutendste Vorteil liegt darin, dass SVG verlustfrei skaliert werden können.

Professionelles Webdesign berücksichtigt, dass User heutzutage mit vielen Typen von Endgeräten – PCs, Tablets, Smartphones, Spielekonsolen usw. – auf das Internet zugreifen. Durch die Verwendung des SVG-Formats kann sichergestellt werden, dass Grafiken auf Bildschirmen mit verschiedensten Auflösungen qualitativ immer bestmöglich dargestellt werden.

Der Unterschied wird besonders bei Smartphone-Displays mit Retina- oder 4K-Auflösung sichtbar. Ihre enorme Pixeldichte mit über 600 dpi übersteigt den Wert herkömmlicher Büro-Bildschirme mit 72 dpi um ein Vielfaches. Werden statt SVG Rastergrafiken eingesetzt, ist ein deutlicher Qualitätsverlust bzw. ein "Auspixeln" unvermeidbar.


Einfach zu erstellen

Da das SVG-Format auf XML basiert, können geometrische Grundformen wie Kreise, Ellipsen, Rechtecke usw. sogar in einem einfachen Text-Editor erzeugt werden. Die meisten Webdesigner bevorzugen bei der Erstellung von SVGs allerdings eine grafische Oberfläche und greifen aus diesem Grund üblicherweise auf vektorbasierte Zeichenprogramme wie Adobe Illustrator oder Macromedia Freehand zurück.


Einfach zu bearbeiten

Ein weiterer wesentlichen Vorteil gegenüber Bitmaps ist, dass SVG-Grafiken sehr einfach zu bearbeiten sind.

Sollen zum Beispiel die Füll- oder Rahmenfarbe einer SVG oder eines seiner Bestandteile verändert werden, genügt ebenfalls ein simpler Texteditor. Änderungen an Grafiken können auf diese Art wesentlich schneller und kostengünstiger durchgeführt werden, da aufwendigere Techniken, wie das Freistellen in Adobe Photoshop, entfallen.


Animationen möglich

Besonders interessant ist für Webdesigner die Möglichkeit, Eigenschaften von SVG zu ändern oder diese sogar zu animieren. Im einfachsten Fall können unter anderem die Füllfarbe, Rahmenfarbe und -breite, Transparenz oder die Eigenschaften eines Verlaufs per Javascript geändert werden.

Mit SVG lassen sich aber auch aufwendige Animationen in Websites einfach und effektiv umsetzen. Die diesbezüglichen Anwendungen sind äußerst Vielfältig. Einige betrachtenswerte Beispiele finden Sie hier:


Geringe Dateigröße

Aufgrund der Tatsache. dass nicht die Farbwerte einzelner Pixel gespeichert werden müssen, ist die Dateigröße von SVG-Files meist kleiner als jene vergleichbarer Rastergrafiken. Kleinere Dateien benötigen weniger Speicherplatz auf Ihrem Webspace und lassen sich schneller hochladen.


Nachteile von SVG

Browserkompatibilität

SVG-Grafiken werden von älteren Browsern, zum Beispiel von Internet Explorer 8 und früher, nicht unterstützt. Für den Fall, dass Ihre Website für diese Versionen ebenfalls optimiert sein muss, gibt es zwar mehrere Abhilfen, diese erhöhen allerdings den Entwicklungsaufwand des Online-Projekts.

Zu Kompatibilitätsproblemen kann bei modernen Browser kommen: sollen Animationen erstellt werden, muss berücksichtigt werden, dass nicht alle theoretisch verfügbaren Features in allen Browsern verfügbar sind.


Dateigröße bei komplexen Grafiken 

Sind SVG-Dateien mit einer Vielzahl von kleinen Details, Knotenpunkten usw. sehr komplex aufgebaut, steigt die Dateigröße und damit auch die Ladezeit schnell an. Werden aufwendige SVG animiert, können zusätzlich Performance-Probleme auftreten.

 

 

Quellen:
https://liechtenecker.at/svg-die-zukunft-von-grafiken-auf-webseiten/
https://www.appnovation.com/blog/benefits-scalable-vector-graphics-svg
https://www.mediaevent.de/tutorial/svg-animate.html
http://www.todaysoftmag.com/article/1067/the-advantages-of-using-svg-scalable-vector-graphics
https://www.logaster.com/blog/svg/