Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » JavaScript & jQuery » SVG und JavaScript: Was ist möglich, was muss beachtet werden?

SVG und JavaScript: Was ist möglich, was muss beachtet werden?

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 3 Minuten
  • von Denis Potschien
  • 21. Januar 2014
Bookmarke mich
Share on pocket

Das SVG: Alles was Du über Scalable Vector Graphics wissen musst gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache sind Programmierungen innerhalb des Formates möglich.

svg_javascript

Per JavaScript auf SVG-Elemente zugreifen

Im Grunde unterscheidet sich der Einsatz von JavaScript in einer SVG-Datei gar nicht vom Einsatz in einer HTML-Datei. Da es in der SVG-Syntax aber weder das HEAD- noch das BODY-Element gibt, wird ein JavaScript-Bereich einfach innerhalb des SVG-Elementes ausgezeichnet. Hierbei gilt wie bei HTML auch, dass auf Elemente nur dann zugegriffen werden kann, wenn diese bereits geladen wurden. Also muss der JavaScript-Bereich entweder ans Dokumentende gesetzt oder über eine Funktion per Event-Listener „load“ aufgerufen werden. Zwingend erforderlich ist jedoch, dass der JavaScript-Quelltext innerhalb eines CDATA-Abschnittes aufgeführt wird.

<svg>
  <script>
    <![CDATA[
      window.addEventListener("load", function() { … }, false);
    ]]>
  </script>
  <rect x="50" y=50" width="0" height="25" fill="red" />
</svg>

Da man SVG-Elemente wie HTML-Elemente mit Klassen und IDs ausstatten kann, lassen sich diese mit den bekannten Methoden „getElementsByTagName()“, „getElementById()“. sowie den neueren Methoden „querySelector()“ und „querySelectorAll()“ ansprechen. Attribute werden mit „getAttribute()“ ausgelesen beziehungsweise mit „setAttribute()“ zugewiesen – also alles bekannte Methoden.

window.addEventListener("load", function() {
  document.getElementsByTagName("rect")[0].setAttribute("width", "100");
}, false);

Im Beispiel wird auf das erste RECT-Element zugegriffen, welchem das „width“-Attribut mit dem Wert „200“ zugewiesen wird. Um per JavaScript Animationen zu erstellen, die SVG-Elemente in Bewegung bringen, bietet sich die Methode „requestAnimationFrame()“ an. Diese Methode ist speziell für Animationen geeignet und sorgt – anders als als beispielsweise „setTimeout()“ – dafür, dass eine Funktion immer nur dann ausgeführt wird, wenn dies für das Fortlaufen einer Animation notwendig ist.

window.addEventListener("load", function() {
  var breite = document.getElementsByTagName("rect")[0].getAttribute("width");
  function animation() {
    if (breite < 200) {
      breite++;
      document.getElementsByTagName("rect")[0].setAttribute("width", breite);
      window.requestAnimationFrame(animation);
    }
  }
  window.requestAnimationFrame(animation);
}, false);

Im Beispiel wird über „requestAnimationFrame()“ die Funktion „animation()“ solange aufgerufen, bis der „width“-Wert für das Rechteck „200“ ist. Dabei wird der „width“-Wert bei jedem Funktionsaufruf um 1 erhöht, was zu einer Animation des Rechteckes führt, bei dem die Breite auf 200 verändert wird. Auf diese Art und Weise lassen sich beispielsweise Diagramme über eine Animation aufbauen. Die einzelnen Diagrammwerte können per GET-Parameter an die SVG-Datei übergeben und per JavaScript ausgelesen werden.

Vorteil gegenüber Canvas

Zwar gibt es mit dem CANVAS-Element und den entsprechenden Zeichenfunktionen von JavaScript auch die Möglichkeit, ohne SVG-Format Formen zu zeichnen und auf ähnliche Weise zu animieren. Allerdings stellt das Canvas-Element nur eine pixelbasierte Zeichenfläche zur Verfügung. Wird das Browserfenster vergrößert dargestellt, wird die gerasterte Darstellung erkennbar.

Daher setzt zum Beispiel die Google-Charts-API für seine Diagramme ebenfalls auf das vektorbasierte SVG-Format anstatt auf Canvas.

Einbindung von SVG-Grafik in HTML-Dokument

Damit JavaScript innerhalb einer SVG-Grafik auch ausgeführt werden kann, ist es notwendig, die SVG-Grafik per EMBED- oder IFRAME-Element in ein HTML-Dokument einzubinden. Wird es per IMG-Element eingebunden, wird die SVG-Grafik zwar angezeigt, das JavaScript wird jedoch nicht ausgeführt.

Alternativ ist es möglich, eine SVG-Grafik komplett in ein HTML-Dokument einzubetten, indem der Quelltext einschließlich SVG-Element (aber ohne Doctype) an gewünschter Stelle innerhalb des HTML-Dokumentes platziert wird.

Dank JavaScript und den Animationsmöglichkeiten des SVG-Formates kann es sich zu einem adäquaten Ersatz zu Flash entwickeln, welches gänzlich ohne Plug-in auskommt und somit auch auf mobilen Geräten läuft.

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

netkin digital Marketing

Köln

design andrea becker

Frankfurt am Main

WPSteinheisser Photography

Ludwigsburg

Wee Media | Webdesign Agentur

Dernbach

Alle Agenturpartner

Jobs

Junior Media Manager

München

Copywriter – Vollzeit

Remote

Online Marketing Manager

München

Teamleiter Online Marketing

München

SEO Junior für Suchmaschinen­optimierung

Salzburg

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Grav CMS: Blitzschnell, einfach und modern

Grav CMS ist eines der interessantesten neuen Content Management Systeme am Markt. Es geht einen völlig anderen Weg als bisher bekannte Ansätze und kommt sehr

 →   

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung

 →   

Atomic Design: So gestaltest du deine Website modular

Begrifflichkeiten im Webdesign sind häufig nicht viel mehr als Worthülsen. Der Begriff „Atomic Design” darf zu diesen Hülsen gezählt werden. Denn er dient nur seinem

 →   

2 Antworten zu „SVG und JavaScript: Was ist möglich, was muss beachtet werden?“
— was ist Deine Meinung?

  1. Frank N. Stein sagt:
    21. Januar 2014 um 18:21 Uhr

    SVG ist ein spannendes Thema, zumal es in responvisven ebooks denke ich eine größre Rolle spielen wird. Rastergrafiken lassen sich partout nicht vernünftig an unterschiedliche Anforderungen anpassen, ohne einen Rattenschwanz an Größen und Qualitäten mitzudenken.

    Antworten
  2. iar sagt:
    21. Januar 2014 um 13:27 Uhr

    Hallo,

    interessanter Beitrag!
    Gibt es Tutorials / praktische Beispiele, wie das Endergebnis einer animierten SVG aussieht?

    Viele Grüße,
    iar

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.