Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Denis Potschien 5. Dezember 2015

SVG: So erstellst du interaktive Grafiken für deine Website

SVG: So erstellst du interaktive Grafiken für deine Website

Dass das SVG-Format weit mehr ist als ein vektorbasiertes Grafikformat, dürfte inzwischen bekannt sein. Animationen und Interaktionen gehören ebenfalls zum Repertoire des Vektorformats. Da auch JavaScript innerhalb einer SVG-Datei eingesetzt werden kann, ergeben sich zahlreiche Anwendungsmöglichkeiten. Die JavaScript-Lösung svidget.js stellt hierfür ein umfangreiches Framework zur Verfügung, welches das Erstellen und Einbinden von SVG-Grafiken in Form von Widgets ermöglicht.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

SVG: So erstellst du interaktive Grafiken für deine Website

Anzeige

SVG-Widgets erstellen und einbinden

SVG-Widgets sind zunächst einmal klassische SVG-Dateien, die dank des Frameworks von svidget.js um zusätzliche Elemente erweitert werden, mit denen sich das Aussehen einer Grafik beeinflussen lässt. Zusätzlich erlaubt das Framework, Aktionen und Ereignisse zu definieren. Die SVG-Widgets werden über das „<object>“-Element in ein HTML-Dokument eingebunden und können dann per „<parameter>“-Element konfiguriert werden. Wie sich die per „<parameter>“ gemachten Angaben auf die SVG-Datei auswirken, wird innerhalb der SVG-Datei festgelegt.

Damit das Framework funktioniert, musst du die JavaScript-Datei „svidget.js“ sowohl in dein HTML-Dokument als auch in die jeweilige SVG-Datei einbinden.

Parameter in SVG-Datei festlegen

Mit svidget.js ist es beispielsweise möglich, ein und dieselbe SVG-Datei mit unterschiedlichem Aussehen in ein und dasselbe HTML-Dokument einzubinden. Dabei wird innerhalb der SVG-Datei festgelegt, welche Parameter berücksichtigt werden sollen.

<svidget:params>
  <svidget:param name="backgroundColor" type="string" subtype="color" binding="#elementA@fill" />
  <svidget:param name="borderColor" type="string" subtype="color" binding="#elementB@stroke" />
  <svidget:param name="borderWidth" type="number" binding="#elementA@stroke-width, #elementB@stroke-width" />
</svidget:params>

Innerhalb des Elementes „<svidget:params>“ legst du einzelne Parameter per „<svidget:param>“ fest. Diese interpretieren später die Angaben, die du in den „<parameter>“-Elementen des einbindenden HTML-Dokumentes gemacht hast. Neben der Angabe eines Namens wird mit „type“ und „subtype“ vorgegeben, was für ein Wert erwartet wird. Die ersten beiden Angaben im Beispiel erwarten eine Zeichenkette, die eine Farbe beschreiben muss, die dritte Angabe eine Zahl.

svidgetjs

Über „binding“ legst du fest, was mit dem Wert geschehen soll. Die Zeichenkette vor dem @-Zeichen beschreibt die ID der SVG-Form und die Zeichenkette danach das Attribut der Form, die den Wert erhalten soll. Der Wert „#elementA@fill“ weist somit der „fill“-Eigenschaft der Form mit der ID „elementA“ die Farbe zu, die per „backgroundColor“ definiert wurde.

Zu guter Letzt musst du noch die JavaScript-Datei einbinden.

<script type="application/javascript" xlink:href="svidget.js"></script>

SVG-Widget in HTML-Dokument einbinden

Im nächsten Schritt baust du die SVG-Datei in ein HTML-Dokument ein. Hierzu verwendest du das „<object>“-Element.

<object data="star.svg" role="svidget" id="star" type="image/svg+xml" width="200" height="200">
  <param name="borderColor" value="red" />
  <param name="backgroundColor" value="green" />
  <param name="borderWidth" value="3" />
</object>

Über die Eigenschaft „data“ wird die SVG-Datei referenziert. Wichtig ist, dass per „role“ der Wert „svidget“ angegeben wird. Nur so weiß das Framework, dass die SVG-Datei auch als SVG-Widget behandelt werden soll. Über die „<param>“-Elemente kannst du nun die Hintergrundfarbe sowie Rahmenfarbe und -stärke angeben. Die Namen für die einzelnen „<param>“-Elemente müssen den Namen der jeweiligen „<svidget:param>“-Namen in der SVG-Datei entsprechen.

svidgetjs_stern1
Aussehen des Sterns per „<param>“-Elemente geändert

Aktionen festlegen

Für Interaktivität sorgen die Aktionen, die du mit den Elementen „<svidget:actions>“ und „<svidget:action>“ definieren kannst.

<svidget:actions>
  <svidget:action name="backgroundColorChange" binding="changeBackgroundColor">
    <svidget:actionparam name="newBackgroundColor" type="string" subtype="color" />
  </svidget:action>
</svidget:actions>

Im Beispiel wird die Aktion „backgroundColorChange“ definiert. Über „binding“ habe ich den Namen einer Funktion angegeben, die ausgeführt werden soll, sobald über das HTML-Dokument diese Aktion aufgerufen wird. Über „<svidget:actionparam>“ definiert man Parameter, die per JavaScript im HTML-Dokument an das SVG-Widget übergeben werden.

function changeBackgroundColor(newBackgroundColor) {
  svidget.current().param("backgroundColor").value(newBackgroundColor);
}

Die Funktion „changeBackgroundColor()“ innerhalb der SVG-Datei ändert die Hintergrundfarbe des SVG-Widgets mit dem über „newBackgroundColor“ übergebenen Wert.

Innerhalb des HTML-Dokumentes legst du einen Event-Listener an, der per Klick auf ein Element die Aktion im SVG-Widget aufruft.

document.getElementById("button").addEventListener("click", function() {
 svidget.widget("star").action("backgroundColorChange").invoke("red");
}, false);

Im Beispiel wird per Klick auf das Element mit der ID „button“ innerhalb des SVG-Widgets mit der ID „star“ die Aktion „backgroundColorChange“ aufgerufen. Per „invoke()“ wird ein Wert – in diesem Fall die Farbangabe „red“ – übergeben. Die Funktion „changeBackgroundColor()“ innerhalb der SVG-Datei sorgt nun dafür, dass der Parameter „backgroundColor“ über den Buttonklick auf den Wert „red“ geändert wird.

svidgetjs_stern2
Aussehen des Sterns nach der Aktion „backgroundColorChange“

Ereignisse festlegen

Eine weitere Funktionalität von svidget.js ist es, Ereignisse zu definieren. Damit ist es möglich, über das HTML-Dokument auf ein Ereignis in der SVG-Datei zu reagieren. Dazu muss, ähnlich wie bei den Aktionen innerhalb der SVG-Datei, ein Ereignis per „<svidget:events>“ und „<svidget:event>“ angelegt werden.

<svidget:events>
  <svidget:event name="changeComplete" />
</svidget:events>

Anschließend muss innerhalb der SVG-Datei noch irgendwo festgelegt werden, wann dem HTML-Dokument mitgeteilt werden soll, dass das Ereignis eingetroffen ist. Das kann beispielsweise innerhalb der Funktion „changeBackgroundColor()“ erfolgen.

function changeBackgroundColor(newBackgroundColor) {
  svidget.current().param("backgroundColor").value(newBackgroundColor);
  svidget.current().event("changeComplete").trigger();
}

Die zusätzliche Zeile sorgt dafür, dass per „trigger()“ das Ereignis „changeComplete“ ausgelöst wird. Innerhalb der HTML-Datei musst du nun noch festlegen, was dort passieren soll, wenn das Ereignis vom SVG-Widget ausgelöst wurde.

svidget.loaded(function (e) {
  svidget.widget("star").event("changeComplete").on(function() {
    console.log("Fertig!");
  });
});

Im Beispiel wird beim Ereignis einfach eine Funktion aufgerufen, die etwas in die Konsole des Browsers schreibt. Sobald also in der SVG-Datei die Funktion „changeBackgroundColor()“ ausgeführt wird, schreibt das HTML-Dokument per „console.log()“ etwas in die Konsole.

Anwendungsmöglichkeiten und Link zum Beitrag

Die hier vorgestellten Möglichkeiten stellen nur einen kleinen Ausschnitt des weit größeren Funktionsumfangs von svidget.js dar. Das Framework eignet sich prima, um zum Beispiel Diagramme per SVG darzustellen. Innerhalb der SVG-Datei können die Formen für ein Torten- oder Balkendiagramm festgelegt werden. Über die Parameter lassen sich dann die Werte und Bezeichnungen übergeben. Dieselbe SVG-Datei kann somit verschieden dargestellt werden.

svidgetjs_beispiele

Es gibt eine umfangreiche Dokumentation, sowie zahlreiche Beispiele, die auch die unterschiedlichen Anwendungsmöglichkeiten von svidget.js widerspiegeln. Das Framework steht unter der gängigen MIT-Lizenz zur kostenlosen Verwendung, auch zu kommerziellen Zwecken, zur Verfügung und kommt ohne zusätzliche JavaScript-Bibliotheken aus.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

7 Kommentare

  1. Danke für das Tutorial :). Für meine Website erstelle ich interaktive Bilder momentan mit dem Bildeditor von Imagemarker. Geht einfach und schnell.

  2. Ein sehr schöner Artikel , auch wenn etwas länger her nach so einer Anleitung habe ich schon etwas länger gesucht

  3. Sehr informativer Artikel zum Einsatz von SVGs.

    Mir ist jedoch der Aufwand, solche Grafiken zu erstellen und einzubinden, zu hoch. Da müsste irgendwas leichtgewichtiges her :)

    Viele Grüße
    Christian

  4. Danke schön,
    das war ein wirklich informativer Artikel, was mir SVG-Grafiken alles möglich ist. Ich werde mir den Artikel speichern und das demnächst mal ausprobieren.
    Herzliche Grüße aus Calau

    Jörg Rothhardt

  5. Endlich mal eine gute Anleitung, ich habe mich schon immer schwer mit dem Thema Grafiken gemacht und fing eher immer an mit dem Programm Paint rumzubasteln, was eher schlecht als recht war. Probiere das gleich mal aus.

    Danke und beste Grüße sagt Daniel

  6. Wobei es – wiedermal – schön gewesen wäre gleich alles hier live sehen zu können,
    z.B. bezüglich

    function changeBackgroundColor(newBackgroundColor) {
    svidget.current().param(„backgroundColor“).value(newBackgroundColor);
    svidget.current().event(„changeComplete“).trigger();
    }

    und co.

    Aber schön das das svg Format mal wieder Erwähnung findet. Sieht man leider noch zu selten
    im web :)

  7. Eine weltklasse Anleitung die in den nächsten Tagen mal testen werde. Vielen lieben Dank dafür

Schreibe einen Kommentar zu Karl Marx Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.