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)

Denis Potschien

Seit 2005 ist er 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.

• Web
|
• Facebook
|
• Google+
|
• More Posts (158)