SVG verwendet genau wie HTML das DOM (Document Object Model), bei dem Sie mit JavaScript auf jedes SVG-Element einfach zugreifen können.

Bei standalone SVG-Dokumenten können Sie im Definitionsabschnitt einen script-Bereich definieren und so JavaScript einbinden. Allerdings ist genau diese Fähigkeit, Scripte auszuführen, Gift für einen Einsatz von SVG-Grafiken im CMS.

Dieser Kurs soll kein Showcase dafür sein, was mit SVG und JavaScript geht – sondern Beispiele zeigen, wie man SVG in Webseiten sinnvoll durch JavaScript erweitert.

• Vorüberlegungen

  Script in SVG

   
• 

  DOM-Scripting
  • Eventhandling
  • DOM-Methoden
  • externe SVG-Dokumente ansprechen
   
• 

  Animation
  • WAAPI
  • Schrift von Zauberhand
  • Kamerafahrt
   

Inline-SVG ist Teil des DOMs einer Webseite und kann problemlos mit den DOM-Methoden angesprochen werden.

Bei einer Einbindung von SVG-Grafiken mit dem img- oder picture-Element erwarten Benutzer aber nur eine Grafik. Aus diesen Gründen ist das Ausführen von Skripten, das Laden weiterer externer Dateien wie Stylesheets oder Bilder und das Kennzeichnen von visited-Links (History-Stealing) nicht möglich.^[1]

Dies geht nur, wenn Sie eine externe SVG-Datei in einem object- oder iframe-Element einbinden. Allerdings ist das SVG-DOM dann nicht Teil des DOMs der Webseite und muss erst separat angesprochen werden, bevor Sie auf die in der externen Grafik enthaltenen SVG-Elemente zugreifen können.^[2]

Die Inhalte solcher SVGs lassen sich nur mit Einschränkungen manipulieren, wenn ein Skript von der HTML-Seite versucht, auf diese Dateien zuzugreifen. Dies liegt daran, dass die meisten Browser sog. Cross-Site-Scripting unterbinden wollen, selbst wenn sich die HTML-Seite und die SVG-Dokumente auf demselben Server befinden.

→ externe SVG-Dokumente ansprechen

Mit dem Element script können Sie einen oder mehrere Script-Bereiche im Definitionsabschnitt eines SVG-Dokuments definieren. Innerhalb von Script-Bereichen können Sie Anweisungen der verwendeten Script-Sprache notieren.

  <svg viewbox="0 0 880 410">
    <defs>
      <!-- der Script Bereich -->
      <script type="text/javascript">
      <![CDATA[
        function meldung(){
          alert('SVG-Element wurde angeklickt!');
        }
      ]]>
      </script>
    </defs>
  
    <circle cx="100" cy="100" r="25" fill="#c32e04" onclick="meldung()" />
	
  </svg>

Der Kreis erhält ein onclick-Event-Attribut. Durch einen Klick auf ihn wird dann die im Script-Bereich notierte Funktion meldung() aufgerufen, die mit einem alert() bestätigt, dass der Kreis angeklickt wurde.

Viele Beispiele im Netz wollen zeigen, was alles möglich ist und vergessen dabei, dass man von Anfang an Programmierparadigmen wie die Trennung der Zuständigkeiten einhalten sollte.

• 

  Daten­visualisierung
  • Balken- und Kreisdiagramme
  • Liniendiagramme
  • interaktive Landkarten
  • Funktionsplotter
   

…

Mehr im Blog: Ostereier selbst herstellen und mitnehmen

Abgerufen am 9.11.2026
von "https://wiki.selfhtml.org/wiki/SVG_und_JavaScript"

• SVG
• JavaScript