Universitätsrechenzentrum
Inkscape
Universitätsrechenzentrum 

Web und Animation

  • SVG hervorragend geeignet für Einsatz im Web
    • kompakte Files, schneller Download
    • verlustfrei skalierbar
    • unterstützt Hypertext Links
    • skript- und animierbar
  • Webbrowser, welche SVG direkt unterstützen:
    • Firefox (ab 1.5)
    • Opera (ab 8.5)
    • Safari (3.0)
    • Konqueror (in Arbeit)

Einbetten von SVG

Object-Tag

  • einfachste Variante zum Einbetten von SVG-Grafiken in HTML-Dokumente
  • Alternative für nicht unterstützte Browser, ggf. Grafik im PNG-Format 

<object type="image/svg+xml" data="quadrat.svg">
  Browser unterstützt keine SVG-Files!
</object>

Name Spaces

  • Einbettung in HTML5 oder XHTML-Code
  • Beachte:
    • XHTML Name Space - Deklaration (identisch zwischen HTML5, XHTML)
    • Entfernen zusätzlicher Inkscape, Sodipodi, usw. Name Space - Deklaration

Tipp: Verifiziere das Dokument mit dem W3 Validator http://validator.w3.org/ 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8"/>
 <title>SVG Beispiel</title>
</head>
<body>
<h1>SVG via Namespaces in XHTML</h1>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="150"
   height="150">
 <rect
    width="50"
    height="50"
    x="50"
    y="50"
    id="rect2385"
    style="fill:#0000ff;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
</body>
</html>

Hypertext Links

  • ToDo?

Style Sheets

  • ToDo?

Einfache Animation

  • SVG-Standard unterstützt die Animation von Zeichnungen, Zeichnungselementen auf Basis interner und externer Scripts
  • Animation wird in der aktueller Inkscape-Version (0.46) nicht unterstützt, Implementierung durch Bearbeiten des SVG-Files mit Texteditor m?glich

ECMAscript

  • standardisierte, objektorientierte Skriptsprache (häufig für den Einsatz in Webbrowsern verwendet)
  • Javascript - ein Dialekt davon
  • Einbettung in SVG-Dokument

Implementierung

  • Erstellen einer SVG-Grafik mit Inkscape, speichern als Normales SVG
  • Startfunktion, onload="start(evt)"
  • Identifizieren der zu animierenden Objekte
  • Funktion zum Berechnen von Positionen und Setzen von Attributen der zu animierenden Objekte
  • zeitgesteuerte Funktionen z.B. setTimeout("funktion()", Wiederholrate);
  • Test z.B. im Webbrowser Firefox, Javascript Konsole (Extras -> Fehlerkonsole) zur Fehlersuche 


  Browser unterstützt keine SVG-Files!

Hinweis: SVG-Dokumente mit Scripts nicht im Inkscape editieren! 

<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.0"
   width="700"
   height="400"
   onload="start(evt)"
   id="svg2">
  <defs
     id="defs4" />
   
  <script type="text/ecmascript"><![CDATA[

    var time = 0;
    var delta = 50;          // alle 50 ms
    var max_time = 10000;    // 10 sek
    var length = 500;        // 500 px
    var dir = 1;

    var stern;

    function start(evt) {
      stern = evt.target.ownerDocument.getElementById("path3164");
      run();
    }

    function run() {
      time = time + delta;
      if (time > max_time) time=0;

      // calculate pos
      x_pos = time * (length/max_time);
      y_pos = -Math.sqrt(x_pos*80);
      stern.setAttribute("transform", "translate(" + x_pos + "," + y_pos + " )");

      //repeat
      setTimeout("run()", delta);
    }

  ]]></script>
  
  <rect
     width="700"
     height="40"
     x="0"
     y="360"
     id="rect2384"
     style="fill:#000080;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  <path
     d="M 150,250 L 120.22542,264.69463 L 115.45085,297.55283 L 92.274575,273.77641 L 59.54915,279.38926 L 75,250 L 59.54915,220.61074 L 92.274575,226.22359 L 115.45085,202.44717 L 120.22542,235.30537 L 150,250 z"
     id="path3164"
     style="fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>

weiterführende Informationen

TUCaktuell