Scalable Vector Graphics

**Scalable Vector Graphics** (**SVG**) isch e Schtandard fir d Bschriibung vun zwodimensionale Vektorgrafike in de XML-Syntax.

SVG isch im September 2001 vum World Wide Web Consortium (W3C) als Empfehlung ygschtuft worre un wird vun de aktuelle Browser greschteteils unterstitzt. 

SVG unterschtitzt SMIL Animatione. Manipulatione vum SVG-DOM sin mit Hilf vun ybettete Funktione mit Skriptschproche megli.

Wil SVG e XML-Owendung isch, konn si mit em Texteditor ufgmacht un bearbeitet werre un au wie jedes ondre Dateiformat vun geignete Programm ufgmacht werre, z. B. mit dr freye Vektorgrafik-Programm Sodipodi un Inkscape, wu des als ihr eige Datenformat ysetze. E SVG-Datei het d Dateiendung *.svg* bzw. *.svgz*, wenn s mit gzip komprimiert worre isch.

## Gschicht
Siter August 1998 arbeitet s W3C on de Schpezifikation vun de Vektorgrafikschproch SVG, wu im September 2001 di erscht Empfehlung (engl. *recommendation*) unter em Nome *Scalable Vector Graphics (SVG) 1.0 Specification* vereffentligt worre isch.

Aktuell het d Spezifikation d Version 1.1, siter em September 2003 vum W3C empfohle. D SVG-Version 1.2 isch zur Zyt in Arbet (Stond 2009) un steht aktuell als Entwurf zur Verfiegung.

## Struktur
SVG nutzt d Syntax vun de *Extensible Markup Language* (ängl. fir „erwiterbari Usszeichnungs-Sproch“), XML. Die definiert Grafik isch somit in ere Boumschtruktur us verschiedene Elemente un de zuegwiesene Attribut ufbout. 

Jedi SVG-Datei fangt on, wie bi XML-basierte Schproche ieblig, mit de XML-Deklaration un de Dokumenttypdeklaration, wu de brucht Nomensruum bschribe. Dezue wird bi Letschterem e Verwiis uf di entsprechend DTD-Datei iigfiegt. Dodruf folgt s Start-Tag "&lt;svg&gt;". D SVG-Datei wird durich s abschliessend End-Tag "&lt;/svg&gt;" abgschlosse.
`
 <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>  
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="300" height="300">	 
 
  
 
 </svg>	 
`
(Mit de Attribute "width" (ängl.: *Breiti*) un "height" (ängl.: *Höhi*) vum SVG-Starttag "&lt;svg&gt;" wird d Gress vum Usgabebildschirm bschtimmt.)

## Element
### Graphischi Primitive
Alli graphische Objekte in SVG boue uf eifache graphische Grundelement uf. Komplexeri Objekte sin dodebi us mehrere eifache Objekte zommegsetzt. 

; Pfad: De Pfad isch s eigetlig Grundelement in SVG. Us dem kinne alli ondri Objekte (Kreis, Rechteck, Polygon etc.) ufbout werre. Wil s aber teilwiis do umständlig isch, het mer di hyfigschte Forme extra mit eigne Bschrybunge versehne, wu im Onschluss ufgfiehrt werre.
:De Pfad wird im Attribut (d) entweder durich Koordinatepaar (absolut) oder durich Vektore (relativ) bschribe. Grossbuechschtabe werre vun Koordinate gfolgt, Kleibuechschtabe vun Vektore. D Koordinate un Vektore gebe d Onweisung, wie de Pfad zeichnet werre soll. 
:* M/m - moveto = Stift dertno bewege
:* L/l - lineto = mit Stift dertno zeichne
:* Q/q - quadratisch Bézierkurve (zwey Wertepaar: e Stitzpunkt, ei Ziilpunkt)
:* C/c - kubischi Bézierkurve (drey Wertepaar: zwey Stitzpunkte, ei Ziilpunkt)
:*Beispiel:*
:De absolut bschribene Pfad...
`
 <path d="M 10 10 L 20 20 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />
`
:isch identisch mit em relative
`
 <path d="M 10 10 l 10 10 -2  2 c  6  6 -4  3 -8 18 q 10  5  5.33 20" />
`
:Fir horizontali un vertikali Linie exischtiert e entsprechendi vereifachti Notation, fir Ellipse un Kreis isch e spezielli Notation mit sibe Werte netig.
:* H/h - horizontal line = horizontali Linie zeichne (X-Wert)
:* V/v - vertical line = vertikali Linie zeichne (Y-Wert)
:* A - elliptical arc = Bogekurv

; Kreis: De Kreis wird zmindescht durich de Radius (r) definiert. Optional konn d Position vum Mittelpunkt durich d Atribut cx un cy feschtgleit werre. Fillung, Art vun de Umrisslinie oder Transparenz werre durich s Attribut style definiert.
`
 <circle cx="100" cy="100" r="50" />   
`

; Ellipse: D Ellipse wird durich di zwe Halbachseradie definiert (rx un ry). Alli ondre Attribut sin d gliche wie bim Kreis.
`
 <ellipse cx="100" cy="100" rx="50" ry="20" />
`

; Rechteck: E Rechteck konn uf nur ei konformi Art definiert werre. Die Megligkeit isch d Bschribung durich de ober link Eck mit de Koordinate (x un y) un d Breiti (width) un Hechi (height).
`
 <rect x="100" y="100" width="100" height="200" />
`
:Will mer de Ecke vum Rechteck abrunde, konn mer des mit Hilf vun de Attribut (rx un ry) bewerkstellige.

; Linie: E eifachi gradi Linie wird durich di bedi Endpinkt in SVG bschribe.
`
 <line x1="100" y1="100" x2="200" y2="200" />
`

; Polyline: Zum e Linie iber mehreri Stitzpinkt z definiere, brucht mer d Bschribung als Polylinie. Dodebe werre di einzelne Koordinatenpaar vun de Stitzpinkt eifach fortloufend hinterenonder gschribe. D Linie wird vum erschte Punkt us zum zwete zoge un vun dert witer zum dritte Stitzpunkt usw. 
`
 <polyline points="100 100 200 200 300 40" />
`

; Polygon: E Polygon (Viileck) wird durich sini Eckpinkt bschribe. Wie bi de Polyline werre au do alli Koordinatepaar eifach hinterenonder gschribe.
`
 <polygon points="100 100 100 200 150 200" />
`

; Text: Zeiche un Text kinne mit Hilf vum Element &lt;text&gt; definiert werre.
`
 <text x="100" y="100" style="font-size:40">Hallo Welt!</text>
`

### Animatione

D Tags, wu fir d Uszeichnung vun Animatione gnumme werre, stomme us em XML-Multimediastandard SMIL (Synchronized Multimedia Integration Language). Zueschtänd, wu animiert werre kinne, sin Transformation, Position, Sichtbarkeit, Farb un Gress. Wichtig fir s Verständnis vun Animatione sind d Begriff „Darsteller“, s Objekt, wu soll animert werre, un s „Dreibuech“, d Zytschponne vun de Animation.

Zytongabe kinne vun Millisekunde bis Stunde ogegebe werre un kinne verschide uszeichnet werre. Fir di meischte Animationstags wird e Pflichtattribut brucht, wu d Art vun de Animation feschtleit. Witeri grundlegendi Komponente sin de Zytramme, Zueschtänd während de Animation (optional), de Zueschtond noch de Animation un eb e Widerholung gstartet werre soll oder nit. 

Fir d Eigeschafte vum Darsteller sin in SVG folgendi Attribut feschtghalte. 

* attributeName (was wird animiert) 
* attributeType (XML odr CSS) 

Fir die Zytongabe werre logischi Begriff wie *begin* (ängl.: *Start, Beginn*) *end* (ängl.: *End*) un dur (ängl. „duration“: *Duur*) verwendet. Start, Widerholunge etc. kinne au vun Ereigniss wie Muusberiehrung oder -klick abhängig gmacht werre.

Quellcod vun de Pfadanimation:

`
 <path id="Pfad" d="M50,100 C50,50 125,50 125,100 S200,150 200,100" style="fill:orange; stroke:black; 
  stroke-width:3; stroke-linecap: round" />
 <circle cx="-10" y="-2.5" r="5" fill="yellow" stroke="white">
 <animateMotion id="kreis_ani" dur="5s"  repaetCount="indefinite" begin="play.click" end="stop.click" rotate="auto">
 <mpath xlink:href="#Pfad" />
 </animateMotion>
 </circle>
`

Quellcod vum Play-Button:

`
 <polygon id="play" xlink:href="#kreis_ani" points="190,230 190,210 210,220" style="fill: #ff00; opacity:0.5">
  <set attributeName="opacity" attributeType="CSS" to="1.0" begin="mouseover"/>
  <set attributeName="stroke" attributeType="CSS" to="#fff" begin="mouseover"/>
  <set attributeName="opacity" attributeType="CSS" to="0.5" begin="mouseout"/>
  <set attributeName="stroke" attributeType="CSS" to="none" begin="mouseout"/>
 </polygon>
`

### Grafischi Effekt un Filter

Bekonnti Grafikfilter sin us DTP-Programme ibernomme worre un schaffe noch em Matrize-Prinzip, wu Operatore un Funktione debi d Form vun ere Matrix usdrucke. S wird grob gsait jedes einzel Pixel mit em definierte Filtereffekt usgrechnet un uff s negscht ibertrait. Uff die Art len sich Bilder un Grafike uff verschidenschti Art un Wiise bearbeite.

E paar vun de meglige Filter:

* feTurbulence
* feDisplacement
* feGaussianBlur

Quellcod vum Filter fir de Himmel:

`
 <filter id="himmel" filterUnits="userSpaceOnUse" x="20" y="100" width="300" height="300">
 <feTurbulence baseFrequency="0.05" numOctaves="9" seed="8" type="fractalNoise" result="turb1" />
 <feFlood in="turb1" flood-color="#B22222" flood-opacity=".99" result="flood" />
 <feComposite operator="in" in="flood" in2="turb1" />
 </filter>
<rect width="100%" height="100%" filter="url(#himmel)" stroke="black" stroke-width="4"/>
`

### Skripting
Interaktivi Grafike z mache isch mit SVG zimli eifach. Mer sott aber Kenntnis in JavaScript. Perl, PHP, JSP usw. ho.
Mer konn die DOM-Schtruktur vun re SVG-Grafik manipuliere oder neije Element mit em Muusklick mache. 
SVG-Grafike len sich serversytig generiere un kinne au mit Databonke kommuniziere.
Zum Skripts in eme SVG-Dokument z platziere, het mer zwo Megligkeite. Entweder mer definiert s Skript im SVG-Dokument selber oder leit s Skript referenziert extern amenort no. Fir ufwändigi un hyffig vorkommendi Skripts ischs guet, die Skripts extern z lagre, sunsch verliert mer schnell de Iberblick, wenn alles ins Dokument iigfiegt wird. Zum e Biispil z gäbe, wie Event, Programmcode un SVG zomme hänge, e Rechteck wu mit jedem Klick wachst. (Nur als .png gschpeichert)

De Quellcode mit implementiertem JavaScript-Code

`
 <?xml version="1.0" encoding="iso-8859-1" standalone="no"?> 
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
 <svg width="400" height="220"> 
  <defs>
   <script type="text/javascript">
    <![CDATA[

          function '''wachsen(evt)''' {
           var doku = evt.target;
           var owner = doku.ownerDocument;
           var elem = owner.getElementById('jack');
           var breite = elem.getAttribute('width');

           if(breite >= 250) {
           elem.setAttribute('width',10);
            } else {
              elem.setAttribute('width', breite*1+30);
            }
          }
      ]]>
   </script>
  </defs>
     <rect id="jack" x="50" y="90" width="10" height="80" rx="5" ry="5" stroke="#fff"
     fill="#990000" '''onclick="wachsen(evt)"''' cursor="pointer"/>
 </svg> 
`

Hie wird e Funktion definiert, wu d DOM-Schtruktur hierarisch durichlauft. Als erschts wird s Dokument ufgruefe. D Funktion *getElementById()* rueft jetztert s Rechteck uff, wu de Nome "jack" het. Sobal d Funktion s Element **jack** gfunde het, wird dodruf zuegriffe un d Attribute kinne gändert werre.
In derre Funktion wird s Attribut **width** mit de Funktion *getAttribute()* ogschtiirt un im witre mir ere relativ eidittige Formel gändert.
Nochm Definitionsberiich steht s Rechteck mit de ID *jack* un im slebe Tag wird de Eventhandler *onclick* mit de Funktion *wachsen(evt)* uf s Rechteck definiert.

### Biispil
 
E kleins Biispil illuschtriert d Verwendung vun de einzelne Element guet. S rechts dargschtellt Bild Variable Resistor.svg het de folgend durichkommentiert Quelltext:

`
  <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>  
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/TR/2003/REC-SVG11-20030114/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
       viewBox="-2 -5 105 55" version="1.1"
       width="107" height="60">
  &lt;!-- Anschlüsse links und rechts -->
  <polyline points="0 25  100 25" fill="none" stroke="black" 
       stroke-width="2.5"/>
  &lt;!-- Das Widerstandsrechteck -->
  <rect x="10" y="15" width="80" height="20" fill="white" stroke="black" 
       stroke-width="2.5" />
  &lt;!-- Der Schleifer -->
  <polyline points="65 5  40 40  40 50" fill="none" stroke="black"
       stroke-width="2.5"/>
  &lt;!-- Die Pfeilspitze wird gedreht -->
  <polygon points="60 5  70 5  65 -5" stroke="black" stroke-width="2.5"
       transform="rotate(33.7 65 5)" />
  </svg>    
`

## Status
### Programm, wu d SVG-Onzeig unterstitze

* CATIA sitr Version 5
* CorelDRAW sitr Version 10
* OpenOffice.org, (nur Export, ab Version 2.0 Import iber s SVG-Import-Plugin)
* The GIMP sitr Version 2 (SVG wird bim Ufmache in e Bitmap konvertiert)
* Inkscape
* Sodipodi
* Adobe Illustrator
* IsoDraw

### SVG-Unterstitzung vun Browser

(Tabell Schtond Dezembar 2005)

## Konferenze
D SVG Open isch e internationali Konferenz, wu sich mit allem rund um s Thema SVG bschäftigt. 

Mittlerweile hat sie bereits vier mal stattgefunden.
* züri, Schwiiz, 15.-17. Juli 2002
* Vancouver, Kanada, 13.-18. Juli 2003
* Tokio, Japan, 7.-10. September 2004
* Enschede, Niderlande, 15.-18. August 2005
* Minato, Japan, 4. bis 7. September 2007
* Nürnberg, Dytschlond, 26. bis 28. August 2008

Di negscht SVG Open isch vum 2. bis 4. Oktober 2009 z Mountain View, USA

## Variante
* E Variante vun SVG isch s NEVA-Dateiformat (.nva), wu vor allem bi Sharp-Handys iigsetzt wird. Des Format isch platzsparender wie s nit komprimiert SVG.

## Literatur
* Marcel Salathé, *SVG Scalable Vector Graphics, ...für professionelle Einsteiger*, Verlag Markt+Technik, ISBN 3-8272-6188-0
## Nowiis


## Weblink
* Scalable Vector Graphics (SVG) bim World Wide Web Consortium (uff Englisch)
* Literatur un Ressourcen zue SVG (PDF-Datei)