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
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>
