Home Credits Impressum more

Interaktive SVG-Dateien

Das SVG-Format für inteaktive Vektorgrafiken ist nach vielen Ankündigungen heute ein lebendiger Standard. In Kombination mit JavaScript können z.B. auch interaktive Diagramme erstellt werden.

Die folgende interaktive Karte zeigt alle KFZ-Kennzeichnenregionen Deutschlands. Die Karte wurde aus Wikipedia übernommen und modifiziert. Das Besondere ist, dass man die Bedeutung eines Kennzeichens sehen kann. Fahren Sie dazu einfach mit der Maus über eine Abkürzung.

Interaktive Karte mit KFZ-Kennzeichen Deutschlands

Quelle der ursprünglichen Datei:
https://de.m.wikipedia.org/wiki/Datei:Kfz-Kennzeichen_Deutschlands.svg

Quelle der interaktiven Legende:
https://www.kennzeichenking.de/kfz-kennzeichen-liste

Zum Hintergrund

Eine solche Karte suchte ich eine längere Zeit vergeblich im Internet. Was es nicht gibt, kann man vielleicht selbst machen. Es war eine Gelegenheit für mich, den SVG-Standard genauer kennenzulernen. SVG wurde schon früher als Nachfolger für Flash-Animationen gehandelt. Mit dem Projekt wollte ich einmal ausprobieren, ob dies der Fall ist. Um es vorwegzunehmen: SVG kann fast alles, was Flash-Animationen für Diagramme unersetzlich gemacht hat. Es ist aber kein 100%iger Ersatz. Erst durch weitere HTML5-Tags (z.B. Canvas, Video, Audio) wurde Flash auch in anderen Bereichen überflüssig.

Das SVG-Format wird mittlerweile von fast allen Browsern unterstützt. Neben den bestehenden pixelbasierten Formaten GIF, PNG und JPEG gibt es endlich auch ein Vektorformat für das Web. Zwar existiert das SVG-Format schon sehr lange. Aber die Browser-Unterstützung hat viele Jahre gefehlt.

Wie im HTML-Standard sind auch bei SVG JavaScript-Programmierungen möglich. SVG-Dateien eignen sich dadurch hervorragend auch für die Erzeugung von Diagrammen aller Art. Auch Interaktionen sind möglich.

Das Darstellungsmittel "Interaktion" bietet die Möglichkeit, Informationen häppchenweise und bedarfsgerecht zu präsentieren. 1) Häppchen 2) nach Bedarf sind Postulate, die sich man aus der kognitiven Lernforschung ableiten kann. Dadurch werden auch sehr große Informationsmengen handlich. Stellen Sie sich vor, die Bedeutungen der Abkürzungen stünden direkt in der Karte. Dann wäre die Karte total überfrachtet.

SVG-Dateien sind eigentlich XML-Dateien. Die XML-Dateien werden vom Browser in etwas Sichtbares umgesetzt. Bei Webseiten, die mit HTML beschrieben werden, passiert etwas Ähnliches. Javascript bietet die Möglichkeit, auf die Elemente einer SVG/HTML-Datei Einfluss zu nehmen. Dies kann 1) unmittelbar vor Anzeige der Datei oder 2) zur Laufzeit erfolgen. Der zweite Punkt macht die Dateien interaktiv.

Erläuterung zum Code

Die Funktion wurde nachträglich wie folgt implementiert. Eine Liste von Kfz-Kennzeichen (übernommen von https://www.kennzeichenking.de/kfz-kennzeichen-liste) ist als JavaScript-Array in der SVG-Datei enthalten. Über eine Programmierschleife wird bei jeder Übereinstimmung zwischen Array-Eintrag und Abkürzungstext dynamisch die Bedeutung als Text-Element in die SVG-Datei geschrieben. Dieser Text ist unsichtbar.

Über einen Eventlistener, der auf das Überfahren eines Kennzeichen-Elements mit der Maus wartet, wird der Beschreibungstext sichtbar gemacht.

Das Beispiel zeigt, dass JavaScript problemlos auch in SVG-Dateien unterstützt wird. Das Beispiel wird in allen möglichen Browsern korrekt dargestellt (außer Internet Explorer).

Fazit

Es war nie einfacher, dynamische Vektorgrafiken in Webseiten einzufügen. Dies ist alles im Rahmen eines technischen Standards möglich, der breit unterstützt wird. Ein Texteditor genügt für die Bearbeitung.

SVG-Dateien sind manchmal sehr umfangreich. Es wird wirklich jedes noch so kleine Element auf der Grafik als XML-Tag erfasst. Ich finde, dass die Dateien dadurch unübersichtlich werden können. Das Problem könnte man ggf. durch die Aufsplittung einer Grafik in mehrere Teilgrafiken lösen.

SVG ist ein Format, dass sich wirklich nur für Diagramme eignet, aber dafür auch perfekt. Bei weitergehenden Multimedia-Anwendungen sollte man auf HTML5-Standards wie Canvas, Audio und Video ausweichen.