Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

HTML5: SVG-Grafiken einbetten und mit CSS und JavaScript manipulieren

Dank HTML5 müssen SVG-Grafiken nicht mehr über eine eigenständige Datei in ein HTML-Dokument per EMBED- oder OBJECT-Element eingebunden werden. Vielmehr lassen sie sich direkt in das HTML-Dokument einbetten und können mit Stylesheets und JavaScript angepasst und verändert werden.

Das SVG-Element

Grundlage zum Einbetten von SVG-Grafiken ist das SVG-Element. Es ermöglicht die Auszeichnung von SVG-Grafiken direkt im HTML-Dokument:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
  <ellipse cx="200" cy="100" rx="190" ry="90" style="fill: red; stroke: green; stroke-width: 2" />
</svg>

Neben der Angabe des Namensraumes („xmlns“) und der Version wird die Größe der SVG-Grafik angeben. Anschließend können innerhalb des SVG-Elementes beliebige SVG-Formen platziert werden.

Im Beispiel wird eine rote Ellipse mit grünem Rand gezeichnet. Die Attribute „cx“ und „cy“ geben die Position der Ellipse an, „rx“ und „ry“ den Radius. Das Aussehen der Ellipse wird – wie bei anderen HTML-Elementen auch – über ein Style-Attribut definiert. Allerdings unterscheiden sich die verwendeten Eigenschaften von denen, die man von HTML-Elementen kennt.

Neben verschiedenen Elemente zum Erstellen von Flächen, Linien und Texten gibt es auch einige Filter, mit denen sich beispielsweise Schlagschatten erstellen lassen:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
  <filter id="schatten" x="-10%" y="-10%" width="150%" height="150%">
       <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
       <feGaussianBlur result="blurOut" in="offOut" stdDeviation="5" />
       <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
     </filter>
  <ellipse cx="200" cy="100" rx="150" ry="50" style="fill: red; stroke: green; stroke-width: 2" filter="url(#schatten)" />
</svg>

Dem Filter werden Position und Größe sowie eine ID übergeben. Anschließend können Abstand des Schattens („feOffset“), Weichzeichnung („feGausianBlur“) sowie Überblendung („feBlend“) definiert werden. Der Filter kann mittels seiner ID einem Element zugewiesen werden.

SVG-Formen und Stylesheets

Da das Aussehen der gezeichneteten SVG-Formen per Stylesheets definiert wird, kann dies auch über die CSS-Angaben des HTML-Dokumentes passieren:

<style type="text/css">
  ellipse {
    fill: red;
    stroke: green;
    stroke-width: 2
  }
</style>

Auf diese Wiese lassen sich Styles für mehrere eingebettete SVG-Grafiken an einer zentralen Stelle festlegen. Wie bei HTML-Elementen können auch die SVG-Stylesheet-Angaben für Klassen und IDs definiert werden.  Diese würden dann den SVG-Formen zugewiesen werden.

SVG-Formen und JavaScript

Auch per JavaScript ist die Änderung und Anpassung der SVG-Formen möglich. So lassen sich sowohl die Styles als auch andere Attribute der Form-Elemente per JavaScript anpassen:

document.getElementsByTagname("ellipse")[0].setAttribute("cx", 50);
document.getElementsByTagname("ellipse")[0].setAttribute("cy", 75);

So würde neben dem Aussehen auch Position und Größe der einzelnen SVG-Formen mit JavaScript verändert.

Per JavaScript lassen sich auch Dateien in ein SVG-Element importieren. Mit „createElementNS()“ können neue Elemente mit Angabe eines Namensraumes erstellt werden. Analog dazu fügt „setAttributeNS()“ dem Element Attribute mit Namensraum hinzu:

var bild = document.createElementNS("http://www.w3.org/2000/svg", "image");  
bild.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "bild.png");  
bild.setAttribute("x", 0);  
bild.setAttribute("y", 0);  
bild.setAttribute("width", 100);  
bild.setAttribute("height", 100);  
document.getElementsByTagName("svg")[0].appendChild(bild);

Im Beispiel wird ein neues Element erzeugt, welches die Bilddatei „bild.png“ innerhalb der SVG-Grafik anzeigt.

Fazit: Mit Inline-SVGs können SVG-Grafiken nicht nur in ein HTML-Dokument eingebettet, sondern unter Verwendung von Stylesheets und JavaScript auch beliebig angepasst und manipuliert werden.

(dpe)

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

2 Antworten auf „HTML5: SVG-Grafiken einbetten und mit CSS und JavaScript manipulieren“

Das schöne ist nicht nur das SVG von allen Browsern unterstützt wird und in echtzeit gerendert werden, sondern das man die Elemente auch ganz einfach von Illustrator rausexportieren kann.
Das einzige was stört sind bei komplexen Grafiken die ewig langen Zeilen Code, was man aber durch eine externe JS Datei umgehen kann die dann den Code schreibt.

SVG schönes Ding, glaube Wikipedia setzt darauf.
Schönes Wochenende
Gruß
Vincent

Das Problem mit dem ewig langen Code kenne ich auch. Aber man kann es ein Stück weit eindämmen indem man manuell (nicht zu empfehlen) oder mit einem kleinen Script (bei mir PHP) die Nachkommastellen der einzellnen Werte runden lässt, auf diese Art kann man die Größe der Datei teilweiße um die Hälfte reduzieren :)

Schreibe einen Kommentar zu Martin Fieber Antworten abbrechen

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