SVG

SVG ist ein Akronym für Scalable Vector Graphics und ist eine Sprache zur Beschreibung zweidimensionaler Grafiken in XML. W3C empfiehlt SVG als Standard für zweidimensionale Vektorgrafiken. Die Datei beinhaltet die Erweiterung .svg.

Die Inhalte von SVG-Dateien sind aufgrund des xml-basierten Formats leicht zugänglich und können einfach von Webbrowsern übersetzt werden. SVG erlaubt drei Arten von grafischen Objekten: Vektorgrafikformen (z.B. bestehend aus Geraden und Kurven), Bilder und Text. Grafische Objekte können gruppiert, transformiert und in zuvor gerenderte Objekte zusammengeführt werden.

Das Feature-Set umfasst verschachtelte Transformationen, Beschneidungspfade, Alpha-Masken, Filter-Effekt und Template-Objekte.

600x400-svg-01.png

Implementierung in HTML

SVG-Dateien können in HTML-Seiten mit Hilfe folgender Tags implementiert werden: <embed>, <object>, <iframe>. SVG-Code kann entweder direkt in eine HTML-Seite implementiert werden oder aus dem HTML-Code zu einer SVG-Datei verlinken.

Implementierung mit <embed>

Vorteil: unterstützt von allen gängigen Browsern

Nachteil: gilt als veraltet in HTML4 und XHTML (aber geeignet für HTML5)

Syntax:

<embed src="bild.svg" type="image/svg+xml" />

Implementierung mit <object>

Vorteile: unterstützt von allen gängigen Browsern. Gilt als Standard in HTML4, XHTML und HTML5

Nachteil: Scripting ist nicht erlaubt

Syntax:

 <object data="circle1.svg" type="image/svg+xml"></object>

Implementierung mit <iframe>

Vorteil: unterstützt von allen gängigen Browsern

Nachteile: erzeugt einen Rand ohne einen spezifischen Style. Nicht unterstützt in HTML4/XHTML.

Syntax:

 <iframe src="circle1.svg"></iframe>

Implementierung direkt in HTML

In den Browsern Firefox, Internet Explorer 9, Google Chrome, Opera und Safari kann man den SVG-Code direkt in das HTML-Code implementieren.

Beispiel

 <html>
 <body>
 <svg xmlns="http://www.ryte.com/5000/svg" version="1.1">
 <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="white"/>
 </svg>
 </body>
 </html>

SVG-Datei verlinken

Man kann den <a>-Tag für das Verlinken einer SVG-Datei ebenfalls verwenden.

<a href="bild.svg">Zeig die SVG-Datei an</a>

Weblinks

Kategorie

Verwandte Artikel