SVG-Anwendungen und Beispiele

Auf dieser Seite möchte ich SVG-Anwendungen betrachten, welche auf ein sinnvolles Zusammenspiel mit CSS, JavaScript und PHP aufbauen, und generell interessante Einsatzgebiete erwähnen:

SVG-DOM-Methoden:

Ausgehend vom W3C-DOM des SVG-Dokuments lassen sich Elemente, Attribute und Text-Inhalte ansprechen und verändern. Es lassen sich sogar neue Elemente erzeugen.
Die "document"-JavaScript-Methoden (wie getElementByID, addEventListener,... siehe "JavaScript") lassen sich grundsätzlich auch auf SVG-Elemente anwenden. Es gibt allerdings SVG-Besonderheiten. So wird bei einem Event-Funktionsaufruf "evt" als Parameter übermittelt. Weitere Unterschiede:

Wichtige SVG-DOM-Methoden:

  • evt.target: Ausgangspunkt des Ereignisses (das Event auslösende Element)
  • evt.target.ownerDocument: Der Dokumentknoten (<svg>)
  • createElementNS("http://www.w3.org/2000/svg","Elementname"): Neues SVG-Element erzeugen.
  • getAttribute("Attribut"): Attribut auslesen.
  • setAttribute("Attribut","Wert"): Neuen Wert für Attribut setzen.
  • SVG-spezifische Ereignisse: onresize, onscroll, onzoom bezogen auf das ganze SVG-Dokument.
    onbegin, onend, onrepeat bei Animationen.
Beispiele: (Code)
Bei Klick auf eine Form oder den orangen Text werden die Attribute des angeklickten Elements angezeigt:
SVG-DOM Beispiele zum dynamischen Zugriff auf SVG-Inhalte Das ist der Testtext Mausposition im SVG-Fenster (an/aus): Neues Rechteck zeichnen (createElement) Neues Rechteck wieder entfernen (removeChild) Kreis-Farbe verändern (setAttribute("fill")) Kreis-Radius verändern (setAttribute("r")) Folgenden Text ändern:
Datenvisualisierung on the fly:

Hier kommt PHP ins Spiel. PHP liest Daten ein und erzeugt SVG-Codezeilen (inline oder als neue SVG-Datei) mit der gewünschten visuellen Darstellung der Daten.
Im folgenden Beispiel geschieht das folgendermassen:
  • Parameterübermittlung der Benutzereingaben über Formular und POST an ein PHP-Skript
  • Dieses PHP-Skript erzeugt SVG-Codezeilen on the fly, also erstellt darin ein Kreis- oder Balkendiagramm mit den eingegebenen Werten
  • Diese neuen Codezeilen werden dann mit echo() direkt ins HTML-PHP-Dokument eingebunden
Beispiel: (Code)
- Titel des Diagramms:
- Art des Diagramms:
Kreisdiagramm
Balkendiagramm
AnzahlLandFarbe


Interaktive thematische Landkarten:

SVG eignet sich auch Bestens zur Darstellung von Landkarten, für die man je nach Bedarf verschiedene thematische Layer ein- und ausblenden, und verlustfrei hinein- und herauszoomen kann. Beim Darüberfahren mit Maus oder Finger kann man zusätzliche Informationen anzeigen lassen. Hier ein kleines einfaches Beispiel: (Code)

Legende: (Ankreuzen zum Sichtbarmachen) Wälder Flüsse Strassen Orte Gemeinde- flächen dyn. Text Entenhausen Quark City Muppetswil Jakubsheim Nixis Beim Ueberfahren von Orten und Gemeindeflächen mit der Maus erscheint der entsprechende Ortsname.
Bei SELFHTML gibt es vertiefende Informationen und weitere Beispiele zu SVG-Landkarten mit einer guten Linksammlung zu frei verfügbaren SVG-Karten: SELFHTML/SVG/interaktive_Landkarten.
Laufende analoge Uhr:

Hier wird die aktuelle Zeit auf dem eigenen Rechner mit der Zeit auf dem Webserver verglichen. Zum Ablesen der Serverzeit wird PHP benutzt, für die lokale Zeit JavaScript, und beides wird in SVG-Uhren dargestellt: (Code)

1 2 3 4 5 6 7 8 9 10 11 12 Aktuelle Zeit auf dem Server (Mitteleuropäische Zeit) 1 2 3 4 5 6 7 8 9 10 11 12 Aktuelle Zeit auf Ihrem Rechner

Darstellung von komplexeren Bewegungen:

Komplexere Bewegungen (mit Beschleunigungen und Abbremsphasen) lassen sich durch mathematisch berechnete SVG-Animationen ziemlich exakt simulieren und darstellen. So wie hier vereinfacht Bewegungen der Sonne und der 4 sonnennächsten Planeten Merkur, Venus, Erde und Mars mit Zufallsgenerator (Berechnungen über PHP): (Code)

Animation unseres Sonnensystems SVG Beispiel: Beschleunigte Bewegung. Stark vereinfachte Darstellung unseres Sonnensystems mit Sonne und neun Planeten in der Naeherung des Zentralpotentials (keine Wechselwirkung zwischen den Planeten). Als get-Parameter koennen angegeben werden: jahr - die Animationszeit fuer ein Jahr halb - die grosse Halbachse der Erdumlaufbahn Weitere Naeherungen: Die Bahnen sind in einer Ebene und die Durchmesser von Sonne und Planeten sind viel zu gross dargestellt. Die Sonne ist gut einen Faktor 40 zu gross dargestellt, der groesste Planet Jupiter gut einen Faktor 200 zu gross, damit man sie ueberhaupt sehen kann (nur bei der Voreinstellung jahr=10 und halb=10, ab etwa halb=430 stimmt der Sonnendurchmesser etwa relativ zur Umlaufbahn des Merkur). Die Anfangspositionen der Planeten sind im Minimum ihrer Bahn, die Richtungen der Hauptachsen sind zufaellig gewaehlt und ebenso die Blickposition des Betrachters entweder so, dass die Planeten links herum drehen oder rechts herum. Hintergrund Koordinatensytem richtig hinschieben und Spiegeln. Ein Kreis als Zentrum oder Sonne. Stuetzpunkte der Trajektorie malen Animation des Teilchens oder Planeten Merkur. Animation des Teilchens oder Planeten Venus. Animation des Teilchens oder Planeten Erde. Animation des Teilchens oder Planeten Mars.


Spiele:

Mit SVG lassen sich auch Spiele generieren. Hier als Beispiel ein Tetris-Spiel. Die richtig zu platzierenden Formen werden über Javascript per Zufallsgenerator ausgewählt und dynamisch als neue SVG-Elemente erzeugt. Die Form wird jeweils zuerst im Vorschaufenster rechts angezeigt, und danach ins Hauptspielfenster fallen gelassen: (Code)

Neues Spiel starten Pause Hilfe dyn. Text dyn. Text Es gibt viele weitere Anwendungsmöglichkeiten für SVG. Darunter ist die Darstellung von mathematischen Funktionen (z.B. Sinus- oder Cosinuskurven). Dazu gibt es ein Tutorial auf SELFHTML/SVG/Funktionsplotter.