Vektorgrafiken gibt es seit den Anfängen der digitalen Computer. SVG ist eine 2D-XML-Sprache, die grafische Darstellungen in XML beschreibt. Seit etwa 2011 gibt es für SVG eine umfassendere SVG-Browser-Unterstützung . SVG wird vermehrt im Internet eingesetzt.
Vektorgrafiken sind skalierbar. Vektorgrafiken verwenden geometrische Grundformen (z.B. Punkte, Linien, Polygone, Formen ), die auf Vektoren basieren. Vektorgrafiken sind skalierbar. Beispiel sind: Abbildungen wie Kurven, Diagramme und Karten. Ortsbezogene Beschriftungen, Organigramme, technische Zeichnungen, Konstruktionszeichnungen, Baupläne, Landkarten, biologische Diagramme, interaktive Aktienwebsites, Sitzpläne für Fluggesellschaften/Konzerthallen, Computerspiele.
Es gibt zahlreiche Gründe für ein "entweder-oder" und auch für ein "sowhl-als-auch".
Das HTML5-Canvas-Modell rendert die grafische-Vorschriften unmittelbar auf dem Bildschirm ( Bitmap-Buffer ). Das gerenderte Bild vergißt die ausgeführten Render-Schritte und bewahrt keine topologischen Grafik-Daten auf. Eine ( partielle ) Bild-Änderungen bewirkt ein erneutes Rendern des gesamten Bildes.
Beim SVG-Render-Modell sind die Daten auch nach dem Rendern in den SVG-Elementen ( Nativ-Objekte, SVG-DOM ) vorhanden. Jedes SVG-Tag kann als ein browser-internes nativ-Objekt mit Attribut-Value-Paaren angesehen weden und jede Schachtelung von SVG-Tags entspricht einem SVG-DOM-Objekt-Baum. Mit Hilfe von ECMAScript und CSS können SVG-nativ-Elemente dynamisch geändert werden. Werden viele SVG-Elementen verwendet, so ist die SVG-Renderzeit ( gegenüber Canvas ) länger.
Alle "gängigen" Browsern ( bis auf Animationen ) unterstützen ( mehr oder weniger ) SVG. Siehe z.B. caniuse.com SVG - Browserunterstützung und w3.org SVG - Browserunterstützung
SVG-Code kann als externe *.svg-Datei vorliegen und/oder als SVG-Inline-Code intern im XHTML-Dokuments stehen.
Wie wird externe my.svg - Datei eingebunden? Das Einfügen der externen my.svg - Datei in den Body der XHTML-Datei kann mit dem embed - Tag, object - Tag, iframe - Tag erfolgen, grob etwa
<embed src="my.svg" type="image/svg+xml" /> veraltet, <object data="my.svg" type="image/svg+xml"></object>, <iframe src="my.svg"></iframe>
Beispiel:
<object id="my_svg" data="my.svg" type="image/svg+xml" width="300" height="300" style="border:1px solid #000"> </object>
W3C (Anhang O) beschreibt die ECMAScript Language Binding . Zu dem SVGSVGElement (mozilla.org) , SVGSVGElement (msdn) gehören Events, Methods, Properties. Ein ECMAScript-Zugriff auf das includierte Dokument kann erfolgen mit Hilfe von
window.onload = function(){
var obj = document.getElementById('my_svg');
var svg_doc = obj.contentDocument || obj.getSVGDocument();;
var svg_win = svg_doc.defaultView;
};
img-Tag mit svg
<img src="bild.svg" alt="Bild-Beschreibung" />
img-Tag mit src mit fallback
<img src="bild.svg" onerror="this.src='bild.png';this.onerror=null;">
img-Tag mit base64 (keine URL's ...)
<img src="data:image/svg+xml;base64,[data]" alt="Bildbeschreibung" />
img-Tag mit src mit fallback
<img src="bild.svg" onerror="this.onerror=null;this.src='bild.png />
Wird image-Tag unterstützt?
document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1");
<svg width="96" height="96">
<image xlink:href="bild.svg" src="bild.png" width="96" height="96" />
</svg>
svg-Code mit PHP
<?php include_once("pfad/bild.svg"); ?>
<?php echo file_get_contents("bild.svg"); ?>
Verarbeitungsanweisung <?xml version="1.0" encoding="UTF-8"?> ...
ggf css extern <?xml-stylesheet type="text/css" href="svg.css" ?>
a-Tag mit SVG
a.svg_bild {display:inline-block;width:8em;height:5em;
text-indent:-999em;
background: url(bild.svg);background-size:8em 5em;
}
<a class="svg_bild" href="/"> Weblink </a>
SVG als klickbare Icons
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="shape-codepen"> <use xlink:href="#shape-codepen"></use> </svg>
body-Tag und SVG
body {background: url(bild.png);
background: url(bild.svg),linear-gradient(transparent, transparent);
}
object-Tag und data
.bild {background: url("data:image/svg+xml;base64,[data]");}
.fallback { width: 10em;height:8em;background-image:url(bld.png);
}
<object type="image/svg+xml" data="bild.svg" class="fallback">
Bild fallback image in CSS
</object>
Wird image-Tag unterstützt?
document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1');
function has_svg() { var div = document.createElement('div');
div.innerHTML = '<svg/>';
return /www\.w3\.org/.test(div.firstChild && div.firstChild.namespaceURI);
};
SVG-Inline-Code darf auch innerhalb eines HTML-Dokuments stehen.
Mit Namespace etwa:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg" xml:lang="de">
...
<svg:svg width="100" height="100" version="1.1">
<svg:circle cx="50" cy="50" r="50" />
</svg:svg>
...
Bei HTML5 erhalten die seiteninternen SVG- und MathML-Quelltext-Elemente keine Namensraumpräfixe und der Namensraumpräfix für XLink lautet "xlink".
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<svg xmlns="http://www.w3.org/2000/svg"
width="100" height="100" version="1.1">
<circle cx="50" cy="50" r="50" />
</svg>
SVG kann globale CSS-Styles und SVG-interne CSS-Styles verwenden.
- SVG kann globale CSS-Styles includieren:
Die CSS-Style einer externen .css-Datei werden ( unmittelbar ) nach der XML-Verarbeitungsanweisung includiert, etwa<?xml-stylesheet type="text/css" href="my.css" ?>
- SVG-interne CSS-Styles verwenden:
Die SVG-internen ( globalen ) CSS-Style's ( und ggf. Symbole ) werden am Anfang ( nach dem svg-Tag ) definiert, etwa<defs> <style> rect { fill: #ff0; stroke: #000; stroke-width: 1px;} .blau { fill: #00f; opacity: 0.4; stroke: #0f0; stroke-width: 5px;} </style> </defs> - Inline-SVG-Befehle in CSS-Styles verwenden:
Z.B. kann in einem HTML-Style ein background-image mit SVG-Tags aufgebaut werden, etwabackground-image:url("data:image/svg+xml;utf8,<svg ...")
ECMAScript kann SVG-DOM-Elemente erzeugen/löschen/manipulieren. Für den ECMAScript-Zugriff auf SVG-DOM-Elemente können NS-Funktionen verwendet werden, wie z.B. createAttributeNS(), createElementNS(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagNameNS(), getNamedItemNS(), hasAttributeNS(), removeAttributeNS(), removeNamedItemNS(), setAttributeNS(), setAttributeNodeNS(), setNamedItemNS()
Prinzip etwa: <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"> </svg> <script> var svgNS = "http://www.w3.org/2000/svg"; var xlinkNS = "http://www.w3.org/1999/xlink"; var image = document.createElementNS(svgNS, "image"); image.setAttributeNS(null, "width", "100"); image.setAttributeNS(null, "height", "100"); image.setAttributeNS(xlinkNS, "xlink:href", "image.png"); </script>
Hier sind weitere
SVG-Beispiele
zum Experimentieren
| Filter | Wirkung |
| feBlend | erzeugt aus zwei durch Attribute übergebenen Bildern eins |
| feColorMatrix | transformiert über eine Matrix die Rot-, Grün, Blau- und Alpha-Werte eines Bildes |
| feComponentTransfer | verändert Helligkeit, Kontrast oder Farben |
| feComposite | führt Operationen auf zwei über Attribute übergebenen Bildern aus |
| feConvolveMatrix | verzerrt die Eingabe (beispielsweise Embossing) durch Kombination benachbarter Pixelwerte |
| feDiffuseLighting | erzeugt den Effekt einer weit entfernten Lichtquelle |
| feDisplacementMap | entfernt ein Bild von einem zweiten |
| feFlood | erzeugt den Effekt eines auf ein Objekt fallenden Lichts |
| feGaussianBlur | lässt ein Bild verschwimmen |
| feImage | referenziert ein externes Bild (auch Bitmap) für die Erzeugung von Filtern |
| feMerge | erzeugt die Ausgabe aus mehreren Schichten (layers), Ergebnisse von Filtern |
| feMorphology | verdickt oder verdünnt die Eingabe |
| feOffset | verschiebt die Eingabe |
| feSpecularLighting | beleuchtet ein Bild über dessen Alpha-Kanal |
| feTile | füllt eine Fläche mit Kacheln |
| feTurbulence | erzeugt einen Wolken- oder Marmoreffekt |
Die Animation-Möglichkeiten werden 2012 noch nicht vollkommen von den gängigen Browsern ( mehr oder minder )unterstützt. Siehe z.B. die tabellarische Übersicht zur SVG-Browser-Unterstützung , SVG SMIL animation und de.wikipedia: Probleme mit SVGs . In solchen Fällen kann der Browser mit ECMAScript abgefragt werden, etwa
var is_explorer = navigator.userAgent.indexOf('MSIE') > -1;
var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
var is_Opera = navigator.userAgent.indexOf("Presto") > -1;
var is_chrome = navigator.userAgent.indexOf('Chrome') > -1;
var is_safari = (navigator.userAgent.indexOf("Safari") > -1) && !is_chrome;
- Zu SVG gehören Animinationsmöglichkeiten mit Hilfe von animate-Tags, set-Tags, animateMotion-Tags, animateColor-Tags, animateTransform-Tags. siehe z.B. de.wikipedia: w3.org: Animate ( SVG 1.1 Kapitel 19 ). Animiert werden können die Laufzeit-Objekte, wie svg-Tags, g-Tags, defs-Tags, use-Tags, image-Tags, switch-Tags, path-Tags, rect-Tags, circle-Tags, ellipse-Tags, line-Tags, polyline-Tags, polygon-Tags, text-Tags, clipPath-Tags, mask-Tags, a-Tags, foreignObject-Tags.
- SMIL (SMIL 3.0 2008; Synchronized Multimedia Integration Language ) ist eine XML-Auszeichnungssprache für zeitsynchronisierte, multimediale Inhalte ( siehe z.B. w3.org: Synchronized Multimedia ( 2012 ) ). SMIL für Multimedia braucht einen installierten SMIL-player, wie z.B. Adobe Media Player, QuickTime Player, RealPlayer, Windows Media Player mit der Unterstützung von Playlist Files, siehe z.B. SMIL-Animation ( 2001 ). SMIL Kann ( bei 2012 bedingt hinreichende Browserunterstützung von SMIL 3.0 aus 2006 ) Multimedia-Elementen wie Audio, Video, Text, VGA-Grafik in Webseiten unterstützen. SMIL-Dateien ( .smil, .smi ) können mit Sever-Skripten verknüpft werden und (falls erforderlich ) auf eine Datenbank zugreifen. siehe z.B. de.wikipedia: SMIL ( Synchronized_Multimedia_Integration_Language )
Bei SVG kann die XLink Sprache ( XML Markup ) von W3C verwendet werden. Einfache XLink-Verweise können z.B. in einem SVG-Dokument stehen und werden durch folgende Attribute beschrieben:
- xlink:href="URI"
Lokalisierung der anderen Ressource (die geladen werden soll) - xlink:title="Zeichenkette"
eine frei wählbare Zeichenfolge zur Betitelung des Hyperlinks - xlink:show="new|replace"
legt fest, ob die andere Ressource in einem neuen Browserfenster (new) oder im aktuellen Browserfenster (replace) geladen werden soll. - target="Framebezeichnung"
Legt das Zielfenster (Zielframe) fest, in der die andere Ressource geladen werden soll.
Beipiel:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" width="500px" height="200px"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title> SVG mit XLink </title>
<a
xlink:href="../../esa/tutorial/svg-einfuehrung.htm"
xlink:title="Externe svg-einfuehrung">
<ellipse cx="250" cy="100" rx="200" ry="30" fill="#a00" stroke="#0a0" />
<text x="160" y="100" fill="#ff0"> Weblink zu SVG-Schnellstart</text>
<circle cx="250" cy="115" r="10" fill="#0a0" stroke="#009" />
</a>
</svg>
Pfade repräsentieren die Konturen von Geometrien. Pfade können Fülleigenschaften, Kontureigenschaften, Transparenz haben. Siehe z.B. w3.org: Paths (SVG Kapitel 8 und w3schools: SVG-Path .
Der Wert des d-Attributes ist ein Befehlsstring. Der leere String d="" ist erlazbt und verbietet das Rendern des Pfades. Der d-Befehlsstring enthält Direktiven, wie M, L, H, V, C, S, Q, T, A, Z.
Großbuchstaben weisen auf nachfolgende absolute Koordinaten und
Kleinbuchstaben weisen auf nachfolgende relative Koordinaten hin.
Beispiel:
<path d="M 750,100 L 250,900 z"/> <path d="M750 100 L250 900 z"/>
Welche Bedeutung haben diese Direktiven? Siehe z.B. w3.org: Backus-Naur-Notation of grammar for path data . wsp bedeutet (#x20 | #x9 | #xD | #xA)
( "M" | "m" ) wsp* moveto-argument-sequence ( "Z" | "z" ) ( "L" | "l" ) wsp* lineto-argument-sequence ( "H" | "h" ) wsp* horizontal-lineto-argument-sequence ( "V" | "v" ) wsp* vertical-lineto-argument-sequence ( "C" | "c" ) wsp* curveto-argument-sequence ( "S" | "s" ) wsp* smooth-curveto-argument-sequence ( "Q" | "q" ) wsp* quadratic-bezier-curveto-argument-sequence ( "T" | "t" ) wsp* smooth-quadratic-bezier-curveto-argument-sequence ( "A" | "a" ) wsp* elliptical-arc-argument-sequence
Ein String kann in einen base64-String oder escape-String gewandelt werden und dann als inline-Code bei CSS verwendet werden, etwa bei CSS als background-image:url(data:image/svg+xml;base64,...). Prinzip für SVG-Bilder etwa:
data:image/svg+xml;base64,...
... meint den SVG-Code als base64
img.src = "data:image/svg+xml;base64,...
data:image/svg+xml;charset=US-ASCII,...
... meint den SVG-Code als %-escape-Sequenz
img.src = "data:image/svg+xml;charset=US-ASCII,...
Mit PHP sieht das Prinzip etwa so aus:
<?php
$str = <<<EOS
<?xml version="1.0" ?>
<svg width="100" height="100" preserveAspectRatio="none">
<rect x="0" y="0" width="100" height="100"" />
</svg>
EOS;
$b64 = base64_encode($str);
?>
.element {background:url(data:image/svg+xml;base64,<?php echo $b64 ?>);}
Vektorgrafiken verwenden geometrische Grundformen (z.B. Punkte, Linien, Polygone, Formen ), die auf Vektoren basieren. Vektorgrafiken sind skalierbar. Dem Rendern von Vektorgrafik entspricht mit gewisser Ähnlichkeit das Rendern von Meta-Grafik-Datei-Formaten. Dem Rendern von Vektorgrafik entspricht mit gewisser Ähnlichkeit das Rendern von Meta-Grafik-Datei-Formaten. SVG ( Scalable Vector Graphics ) ist eine Markup-Sprache, die grafische 2D-Darstellungen in XML beschreibt. Seit etwa 2011 gibt es für SVG eine umfassendere SVG-Browser-Unterstützung . SVG wird vermehrt im Internet eingesetzt.
Referenzen: selfhtml.org: Referenzen HTML-, CSS-, JavaScript-, SVG-Referenz, MIME-Typen w3schools: SVG Reference SVG-Logo de.wikipedia: SVG-Buch-logo.svg , en.wikipedia: SVG-logo.svg , w3.org: Scalable Vector Graphics (SVG) w3.org: Element Index ( SVG 1.1 Appendix L ) w3.org: Attribute Index ( SVG 1.1 Appendix M ) w3.org: Property Index ( SVG 1.1 Appendix N ) w3.org-wiki: HTML Elements w3.org: SVG - Coordinate Systems, Transformations and Units ( Kap 7 ) w3.org: SVG - Animation ( Kap 19 ) w3.org: svg11-flat.dtd w3schools: SVG-Reference aptico.de: SVG Tutorial .pdf mozilla.org: SVG Tutorial mozilla.org: SVG Element Reference mozilla.org: SVG Attribute reference msdn: Scalable Vector Graphics msdn: SVG Reference Element , Object , Method , Property , SVG CSS-Attributes msdn: SVG-Animation für Anfänger , Fortgeschrittene , Erweiterte SVG-Animation
todo: http://www.w3schools.com/svg/svg_reference.asp http://upload.wikimedia.org/wikipedia/de/2/2b/HTML5_Canvas_referenz.png http://www.w3.org/TR/2001/REC-smil-animation-20010904/ http://apike.ca/prog_svg_smil.html http://www.selfsvg.info/?section=10.5 http://apike.ca/prog_svg_transform.html http://apike.ca/prog_svg_paths.html todo: SVG-Grafiken erstellen: http://inkscape.org/ http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html todo: http://www.w3.org/TR/SVG/coords.html 7 Coordinate Systems, Transformations and Units http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG http://www.w3schools.com/svg/svg_intro.asp http://edutechwiki.unige.ch/en/Static_SVG_tutorial http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial http://edutechwiki.unige.ch/en/Static_SVG_tutorial#SVG_file_structure http://www.codestyle.org/css/font-family/sampler-Monospace.shtml