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.
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. </iframe></object>
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></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></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
SVG-Datei verlinken
Man kann den
<a href="bild.svg">Zeig die SVG-Datei an</a>
Weblinks