SVG-Grundlagen Einführendes

SVG ( Scalable Vector Graphics ) ist eine Markup-Sprache, die grafische 2D-Darstellungen in XML beschreibt. SVG Version 1.1 ist eine modularisierte 2D-Sprache für und kann Vector- und Raster-Grafiken mischen. Siehe z.B. w3.org: SVG 1.1 ( 16.8.2011 ), SVG - Document Structure , SVG - Roadmap

SVG ist eine Markup-Sprache, die grafische 2D-Darstellungen in XML beschreibt. Hier sind SVG-Beispiele zum Experimentieren.

Grundlagen der Vektorgrafik Einführendes

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.

SVG oder/und HTML5-Canvas? Was ist "besser"?

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.

SVG-Browserunterstützung Animationen?

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

Einbindung von SVG externe .svg - Datei

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;
};
SVG-Beispiele Beispiele

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

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 und CSS Wie wird CSS verwendet?

SVG kann globale CSS-Styles und SVG-interne CSS-Styles verwenden.

SVG und DOM Zugriff aus SVG-Elemente

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

SVG und Viewport Bild Dank an Fizz, Stackoverflow
Siehe W3C SVG ViewportSpace
svg-viewport
SVG und FilterElemente Welche gibt es?
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
SVG und Animation Wie geht das?

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; 
Verwenden von XLink Weblinks, interne Links

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:

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>
Beispiel: SVG-path-Tag M, L, H, V, C, S, Q, T, A, Z

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
Beispiel: SVG-Bilder mit base64 data:image/svg+xml;base64

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 ?>);}
SVG-Weblinks Externe Weblinks

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