Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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 vek­tor­ba­sier­tes Grafikformat, dürf­te inzwi­schen bekannt sein. Animationen und Interaktionen gehö­ren eben­falls zum Repertoire des Vektorformats. Da auch JavaScript inner­halb einer SVG-Datei ein­ge­setzt wer­den kann, erge­ben sich zahl­rei­che Anwendungsmöglichkeiten. Die JavaScript-Lösung svidget.js stellt hier­für ein umfang­rei­ches Framework zur Verfügung, wel­ches das Erstellen und Einbinden von SVG-Grafiken in Form von Widgets ermög­licht.

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

SVG-Widgets erstellen und einbinden

SVG-Widgets sind zunächst ein­mal klas­si­sche SVG-Dateien, die dank des Frameworks von svidget.js um zusätz­li­che Elemente erwei­tert wer­den, mit denen sich das Aussehen einer Grafik beein­flus­sen lässt. Zusätzlich erlaubt das Framework, Aktionen und Ereignisse zu defi­nie­ren. Die SVG-Widgets wer­den über das „<object>“-Element in ein HTML-Dokument ein­ge­bun­den und kön­nen dann per „<parameter>“-Element kon­fi­gu­riert wer­den. Wie sich die per „<para­me­ter>“ gemach­ten Angaben auf die SVG-Datei aus­wir­ken, wird inner­halb der SVG-Datei fest­ge­legt.

Damit das Framework funk­tio­niert, musst du die JavaScript-Datei „svidget.js“ sowohl in dein HTML-Dokument als auch in die jewei­li­ge SVG-Datei ein­bin­den.

Parameter in SVG-Datei festlegen

Mit svidget.js ist es bei­spiels­wei­se mög­lich, ein und die­sel­be SVG-Datei mit unter­schied­li­chem Aussehen in ein und das­sel­be HTML-Dokument ein­zu­bin­den. Dabei wird inner­halb der SVG-Datei fest­ge­legt, wel­che Parameter berück­sich­tigt wer­den sol­len.

<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 ein­zel­ne Parameter per „<svidget:param>“ fest. Diese inter­pre­tie­ren spä­ter die Angaben, die du in den „<parameter>“-Elementen des ein­bin­den­den HTML-Dokumentes gemacht hast. Neben der Angabe eines Namens wird mit „type“ und „sub­ty­pe“ vor­ge­ge­ben, was für ein Wert erwar­tet wird. Die ers­ten bei­den Angaben im Beispiel erwar­ten eine Zeichenkette, die eine Farbe beschrei­ben muss, die drit­te Angabe eine Zahl.

svidgetjs

Über „bin­ding“ legst du fest, was mit dem Wert gesche­hen soll. Die Zeichenkette vor dem @-Zeichen beschreibt die ID der SVG-Form und die Zeichenkette danach das Attribut der Form, die den Wert erhal­ten soll. Der Wert „#elementA@fill“ weist somit der „fill“-Eigenschaft der Form mit der ID „elementA“ die Farbe zu, die per „backgroundColor“ defi­niert wur­de.

Zu guter Letzt musst du noch die JavaScript-Datei ein­bin­den.

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

SVG-Widget in HTML-Dokument einbinden

Im nächs­ten Schritt baust du die SVG-Datei in ein HTML-Dokument ein. Hierzu ver­wen­dest 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 refe­ren­ziert. Wichtig ist, dass per „role“ der Wert „svid­get“ ange­ge­ben wird. Nur so weiß das Framework, dass die SVG-Datei auch als SVG-Widget behan­delt wer­den soll. Über die „<param>“-Elemente kannst du nun die Hintergrundfarbe sowie Rahmenfarbe und -stär­ke ange­ben. Die Namen für die ein­zel­nen „<param>“-Elemente müs­sen den Namen der jewei­li­gen „<svidget:param>“-Namen in der SVG-Datei ent­spre­chen.

svidgetjs_stern1
Aussehen des Sterns per „<param>“-Elemente geän­dert

Aktionen festlegen

Für Interaktivität sor­gen die Aktionen, die du mit den Elementen „<svidget:actions>“ und „<svidget:action>“ defi­nie­ren 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“ defi­niert. Über „bin­ding“ habe ich den Namen einer Funktion ange­ge­ben, die aus­ge­führt wer­den soll, sobald über das HTML-Dokument die­se Aktion auf­ge­ru­fen wird. Über „<svidget:actionparam>“ defi­niert man Parameter, die per JavaScript im HTML-Dokument an das SVG-Widget über­ge­ben wer­den.

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

Die Funktion „changeBackgroundColor()“ inner­halb der SVG-Datei ändert die Hintergrundfarbe des SVG-Widgets mit dem über „newBackgroundColor“ über­ge­be­nen Wert.

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

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 „but­ton“ inner­halb des SVG-Widgets mit der ID „star“ die Aktion „backgroundColorChange“ auf­ge­ru­fen. Per „invo­ke()“ wird ein Wert – in die­sem Fall die Farbangabe „red“ – über­ge­ben. Die Funktion „changeBackgroundColor()“ inner­halb der SVG-Datei sorgt nun dafür, dass der Parameter „backgroundColor“ über den Buttonklick auf den Wert „red“ geän­dert wird.

svidgetjs_stern2
Aussehen des Sterns nach der Aktion „backgroundColorChange“

Ereignisse festlegen

Eine wei­te­re Funktionalität von svidget.js ist es, Ereignisse zu defi­nie­ren. Damit ist es mög­lich, über das HTML-Dokument auf ein Ereignis in der SVG-Datei zu reagie­ren. Dazu muss, ähn­lich wie bei den Aktionen inner­halb der SVG-Datei, ein Ereignis per „<svidget:events>“ und „<svidget:event>“ ange­legt wer­den.

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

Anschließend muss inner­halb der SVG-Datei noch irgend­wo fest­ge­legt wer­den, wann dem HTML-Dokument mit­ge­teilt wer­den soll, dass das Ereignis ein­ge­trof­fen ist. Das kann bei­spiels­wei­se inner­halb der Funktion „changeBackgroundColor()“ erfol­gen.

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

Die zusätz­li­che Zeile sorgt dafür, dass per „trig­ger()“ das Ereignis „changeComplete“ aus­ge­löst wird. Innerhalb der HTML-Datei musst du nun noch fest­le­gen, was dort pas­sie­ren soll, wenn das Ereignis vom SVG-Widget aus­ge­löst wur­de.

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

Im Beispiel wird beim Ereignis ein­fach eine Funktion auf­ge­ru­fen, die etwas in die Konsole des Browsers schreibt. Sobald also in der SVG-Datei die Funktion „changeBackgroundColor()“ aus­ge­führt wird, schreibt das HTML-Dokument per „console.log()“ etwas in die Konsole.

Anwendungsmöglichkeiten und Link zum Beitrag

Die hier vor­ge­stell­ten Möglichkeiten stel­len nur einen klei­nen Ausschnitt des weit grö­ße­ren Funktionsumfangs von svidget.js dar. Das Framework eig­net sich pri­ma, um zum Beispiel Diagramme per SVG dar­zu­stel­len. Innerhalb der SVG-Datei kön­nen die Formen für ein Torten- oder Balkendiagramm fest­ge­legt wer­den. Über die Parameter las­sen sich dann die Werte und Bezeichnungen über­ge­ben. Dieselbe SVG-Datei kann somit ver­schie­den dar­ge­stellt wer­den.

svidgetjs_beispiele

Es gibt eine umfang­rei­che Dokumentation, sowie zahl­rei­che Beispiele, die auch die unter­schied­li­chen Anwendungsmöglichkeiten von svidget.js wider­spie­geln. Das Framework steht unter der gän­gi­gen MIT-Lizenz zur kos­ten­lo­sen Verwendung, auch zu kom­mer­zi­el­len Zwecken, zur Verfügung und kommt ohne zusätz­li­che 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 mei­ne Website erstel­le ich inter­ak­ti­ve Bilder momen­tan mit dem Bildeditor von Imagemarker. Geht ein­fach und schnell.

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

  3. Sehr infor­ma­ti­ver Artikel zum Einsatz von SVGs.

    Mir ist jedoch der Aufwand, sol­che Grafiken zu erstel­len und ein­zu­bin­den, zu hoch. Da müss­te irgend­was leicht­ge­wich­ti­ges her :)

    Viele Grüße
    Christian

  4. Danke schön,
    das war ein wirk­lich infor­ma­ti­ver Artikel, was mir SVG-Grafiken alles mög­lich ist. Ich wer­de mir den Artikel spei­chern und das dem­nächst mal aus­pro­bie­ren.
    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 rum­zu­bas­teln, was eher schlecht als recht war. Probiere das gleich mal aus.

    Danke und bes­te Grüße sagt Daniel

  6. Wobei es – wie­der­mal – schön gewe­sen wäre gleich alles hier live sehen zu kön­nen,
    z.B. bezüg­lich

    func­tion changeBackgroundColor(newBackgroundColor) {
    svidget.current().param(“backgroundColor”).value(newBackgroundColor);
    svidget.current().event(“changeComplete”).trigger();
    }

    und co.

    Aber schön das das svg Format mal wie­der Erwähnung fin­det. Sieht man lei­der noch zu sel­ten
    im web :)

  7. Eine welt­klas­se Anleitung die in den nächs­ten Tagen mal tes­ten wer­de. Vielen lie­ben Dank dafür

Schreibe einen Kommentar

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