03.12.2022
Das SVG-Format hat sich nach vielen Ankündigungen in den letzten Jahren zu einem lebendigen Standard entwickelt. Heute kann jeder moderne Browser eine SVG-Datei anzeigen. Mit JavaScript können SVG-Dateien interaktiv gemacht 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
Das SVG-Format existiert schon seit den 90er Jahren. Es war aber nicht möglich, diese Dateien in einem Browser anzuzeigen, geschweige denn mit JavaScript zu verändern.
Wie beim HTML-Standard sind auch bei SVG heute auch JavaScript-Programmierungen möglich. SVG-Dateien eignen sich dadurch hervorragend auch für die Erzeugung von interaktiven Diagrammen aller Art.
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 zunächst 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 gängigen Browsern korrekt dargestellt.
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.
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 gegebenenfalls durch die Aufsplittung einer Grafik in mehrere Teilgrafiken lösen.
SVG ist ein Format, das sich hervorragend für Diagramme eignet. Bei weitergehenden Multimedia-Anwendungen wird SVG aufgrund seines vektorbasierten Ansatzes an Performance-Grenzen stoßen. Das wäre allerdings ein anderes Thema.
Quelle der interaktiven Legende:
https://www.kennzeichenking.de/kfz-kennzeichen-liste
Quelle der ursprünglichen SVG-Datei:
https://de.m.wikipedia.org/wiki/Datei:Kfz-Kennzeichen_Deutschlands.svg
