SVG-Grafiken

Die Abkürzung SVG steht für Scalable Vector Graphics (skalierbare Vektorgrafiken). Eingebunden in eine HTML-Seite, können sich Grafiken im SVG-Format responsiv verhalten. Ob Smartphone, Tablet oder Browser, die SVG-Grafik passt sich an die Größe des Bildschirms an und nutzt den zur Verfügung stehenden Platz bestmöglich – und zwar ohne Qualitätsverlust. Außerdem lassen sich SVG-Grafiken animieren und sogar interaktiv gestalten.

Diese Eigenschaften machen den Einsatz von SVG-Grafiken in mobiler Dokumentation so vorteilhaft:

  • SVG-Grafiken sind ideal geeignet für die Darstellung auf mobilen Endgeräten, weil sie sich in ihren Abmessungen an jede Displaygröße anpassen. Selbst beim Zoomen auf hochauflösenden Bildschirmen bleibt alles scharf.
  • Aufgrund ihrer Vektoreigenschaften benötigen SVG-Grafiken wesentlich weniger Speicherplatz als Pixelgrafiken. Dadurch sind die Ladezeiten kurz, auf die Inhalte der mobilen Dokumentation kann also rasch zugegriffen werden.
  • Texte lassen sich in die SVG-Grafik einbetten, wobei Schriftgröße und Schriftart definiert werden können. Weil der Text nicht in Pixel oder Pfade umgewandelt wird, kann bei einer Suche sogar Text in der Grafik gefunden werden.
  • Eine SVG-Grafik kann Animationen beinhalten. Diese Animationen können entweder automatisch ablaufen. Oder sie werden interaktiv durch ein bestimmtes Ereignis gestartet, zum Beispiel durch Antippen eines Bereichs (siehe das Beispiel unten).
  • Sprachabhängige Texte in der SVG-Grafik können in nur einer einzigen Datei erstellt und verwaltet werden. Für jede Sprache ist eine eigene Ebene vorgesehen. Nach der Auswahl, in welcher Sprache die mobile Dokumentation angezeigt werden soll, wird automatisch die entsprechend Ebene der SVG-Grafik aufgerufen.

 

Beispiel einer SVG-Grafik aus der Sennheiser Documentation App

In diesem Beispiel hat die Grafik keine Legende. Nach einem Klick in die Grafik – zum Beispiel auf ein Kabel – wird die Beschriftung angezeigt. Nach fünf Sekunden blendet sich die Beschriftung wieder aus. Auf diese Weise lassen sich beliebige Informationen in die Grafik einbinden. Der Text ist zunächst nicht sichtbar, wodurch die Übersicht erhalten bleibt, dennoch ist der Text jederzeit verfügbar – nur einen Fingertipp entfernt.

< Zurück zu den Wissensseiten der ZINDEL AG