SVG und jQuery. Interaktive Grafiken erstellen mit Inkscape

von Henry Zeitler

SVG oder Scalable Vector Graphics sind bereits im Jahr 2001 veröffentlicht worden. Die vom W3C empfohlene Spezifikation erhält aber erst jüngst die ihm zustehende Aufmerksamkeit (zumindest von mir), nicht zuletzt durch die vollständige Unterstützung in modernen Browsern. Dabei bietet das XML-Format hervorragende Möglichkeiten der Interaktion und Animation durch die Einbindung in HTML. Hier ein Beispiel zur Erstellung einer interaktiven Grafik mit Inkscape und deren Bearbeitung…

Beginnen wir mit der Erstellung, bzw. der Weitervearbeitung einer Vektorgrafik. Ich verwende hierfür Inkscape, ein kostenloses aber sehr mächtiges Grafikprogramm, das sich vor seinem bekannterem und vor allem viel zu teurem Bruder Illustrator nicht verstecken braucht. Am Beispiel einer interaktiven Weltkarte werde ich die einzelnen Schritte erläutern, setze dafür jedoch allgemeine Grundkenntnisse in Vektorprogrammen voraus.

So ähnlich könnte die interaktive Weltkarte dann später aussehen. Fährt der User mit der Maus über die Länder gibt es einen Hover-Effekt und es erscheint ein Tool-Tip mit dem Ländernamen. Durch klicken erscheint eine Info-Box mit der Einwohnerzahl. Das Beispiel liegt auf jsFiddle.

Demo: SVG und jQuery | Interaktive Grafiken erstellen mit Inkscape

In Inkscape…

…würde der Enthusiast eine Weltkarte komplett neu erstellen. Ich verwende an dieser Stelle lieber eine vorgefertigte Grafik, wie sie z. B. unter www.weltkarte.com zu finden ist. Die Karte ist eine Public Domain Datei.

Wir laden uns also die Vorlage herunter und öffnen sie in Inkscape. Die voreingestellte Größe ist sehr großzügig und wir rechnen sie erst einmal auf 790px Breite herunter. Das sollte für die Verwendung auf einer Internetseite reichen. Über die Option Seite in Auswahl einpassen unter Datei -> Dokumenteneinstellungen/Ändern der Seitengröße auf Inhalt… wird die Seitengröße des Dokuments an die Grafik angepasst. Um die Datenmenge noch etwas zu reduzieren, vereinfachen wir die Grafik über Pfad -> Vereinfachen (oder STRG + L). Der Schwellenwert für die Option Vereinfachen lässt sich übrigens unter Datei -> Inkscape-Einstellungen -> Sonstiges regulieren.

Nachdem die Grafik jetzt die richtigen Dimensionen für das Internet bekommen hat kommen wir zum interessanten Teil. Über den Pfadanfasser können die einzelnen Konturen der Länder ausgewählt werden. Konturen von Ländern, die aus mehreren Teilen bestehen (z. B. USA) können mit Shift + Klick ergänzt und dann über Pfad -> Vereinigung kombiniert werden. Die Länder werden dann ausgeschnitten und auf einer neuen Ebene eingefügt, denn auf diesem Wege bekommen sie eine eigenen Titel und ID, über die wir später die Interaktionen steuern werden. Den Titel (Label) können wir über die Objekteigenschaften selbst benennen. Rechtsklick auf das entsprechende Element (Land) und dann im Dialog Objekteigenschaften auswählen.
Im Grunde können die Länder jetzt nach Herzenslust gestylt werden. Ich habe im Beispiel Hintergrundfarben und Konturen eingestellt, sowie einen Schlagschatten (zu finden unter Filter) eingesetzt. Am Ende wird die gesamte Grafik als .svg-Datei abgespeichert.

 

SVG-Dateien…

…lassen sich problemlos in eine HTML-Datei einbetten. Also öffnen wir sie im Editor und kopieren das gesamte Markup in den Body einer HTML-Vorlage. Am besten in einen eigenen Div-Container (hier im Beispiel svg_container).
Wie anfangs erwähnt werden wir die Interaktionen über jQuery steuern. Also binden wir die Library im Header ein. Für die Tool-Tips habe ich ein Plugin verwendet, welches unter EZPZ Way zu finden ist, dieses also im Footer einbinden.
So weit, so gut. Das SVG-Format wird über eine XML-Datei erzeugt. Es besteht aus den entsprechenden XML-Tags und den kryptisch anmutenden Pfad-Koordinaten. Uns interessieren in erster Linie die XML-Elemente für die einzelnen Länder. Diese lassen sich in dem ganzen Wust über unsere Titel (Label) glücklicherweise sehr leicht finden. Den Inhalt – die Koordinaten – des d-Tags habe ich unten nicht aufgeführt.


 <g 
    inkscape:groupmode="layer" 
    inkscape:label="usa" 
    style="display:inline" 
    transform="translate(135.71428,-578.07648)" 
    class="tooltip-target" 
    id="example-target-1"> 

        <path 
            inkscape:connector-curvature="0" 
            id="usa" 
            style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1;stroke-opacity:1;filter:url(#filter14187)" 
            d="<!-- Hier stehen die Pfadangaben. Habe ich zur besseren Ansicht heraus genommen -->" 
            inkscape:label="#path8581" /> 
            
</g>

 

Interaktionen mit der Grafik…

…lassen sich über die IDs im path realisieren. In diesem Beispiel mit jQuery-Effekten und dem oben erwähnten Plugin EZPZ Tooltip. Daher rühren auch die class="tooltip-target" id="example-target-1" im umschließenden g-Tag wie oben im Code ersichtlich. Beginnen wir mit den Hover-Effekten:


$('#usa, #deutschland, #indien, #southkorea, #japan').mouseover(function() {
    $(this).animate({ strokeWidth: 1.5, fillOpacity: 0.8 }, 300); 
    $(this).css({'cursor' : 'pointer'}); 
});  

$('#usa, #deutschland, #indien, #southkorea, #japan').mouseout(function() { 
    $(this).animate({ strokeWidth: 1, fillOpacity: 1 }, 100); 
    $(this).css({'cursor' : 'default'}); 
});

Interessant sind hier besonders die Styles stroke-width und fill-opacity, die speziell die SVG-Grafiken formatieren, aber über jQuery (natürlich im CamelCase-Format) angesprochen werden können. Im Beispiel erhöhe ich die Dicke der Konturlinien (strokeWidth) und setze die Deckkraft der Flächenfüllung herab (fillOpacity).


$('#usa').click(function() { $('#info_usa').fadeIn(400); }); 
$('#deutschland').click(function() { $('#info_deutschland').fadeIn(400); }); 
$('#southkorea').click(function() { $('#info_southkorea').fadeIn(400); }); 
$('#indien').click(function() {  $('#info_indien').fadeIn(400); }); 
$('#japan').click(function() {  $('#info_japan').fadeIn(400); });
  
$('#info_usa .close').click(function() { $('#info_usa').fadeOut(400); }); 
$('#info_deutschland .close').click(function() { $('#info_deutschland').fadeOut(400); }); 
$('#info_southkorea .close').click(function() {  $('#info_southkorea').fadeOut(400); }); 
$('#info_indien .close').click(function() { $('#info_indien').fadeOut(400); }); 
$('#info_japan .close').click(function() { $('#info_japan').fadeOut(400); });

Hier werden die einzelnen Info-Boxen beim klicken auf die entsprechenden Länder ein- und ausgeblendet. Auch hier läuft alles über die IDs der path-Tags.
Ansonsten entspricht der Aufbau und das Handling der Tool-Tips und Info-Boxen lediglich der Beschreibung des Plugins EZPZ Tooltip. Kurz gesagt sind die Info-Boxen und Tool-Tips Div-Container, die bei der Interaktion manipuliert werden. In diesem Fall mit fadeIn und fadeOut.

Die Interaktive Weltkarte könnt ihr euch [download id="19" format="2"] herunter laden. Weitere Einzelheiten könnt ihr dem Quellcode entnehmen.

 

Fazit

Die Verwendung von .svg-Dateien wird bald zum Standard im Internet gehören. Die modernen Browser unterstützen das Format bereits, der Internet Explorer in der Version 8 mit Plugin, ab Version 9 vollständig.
Das Beispiel soll aufzeigen, wie einzelne Elemente einer .svg-Grafik angesprochen und manipuliert werden können. Das bildet den Grundstein zu interaktiven Grafiken, wobei die Möglichkeiten der Interaktion vielfältig sind und der Fantasie bzw. den Ansprüchen des Einzelnen überlassen werden. Ich hoffe hiermit einen guten Einstieg geschaffen zu haben.

 

Weiterführende Links

Raphaël—JavaScript Library
Eine Javascript Library, die sich auf die Bearbeitung von Vektorgrafiken für das Internet spezialisiert hat. Sehr intuitiv und einfach zu benutzen. Hat übrigens eine tolle Icon-Sammlung im .svg-Format als Beispiel.

jVectorMap
Ein jQuery-Plugin zur Erstellung von interaktiven Landkarten. Allerdings ist das Plugin so flexibel, dass es auch zur Erstellung aller anderen interaktiven Grafiken (z. B. Balkendiagramme) taugt. Ein Tutorial zum Plugin gibt es auf matthiasschuetz.com.
comments powered by Disqus