Scalable Vector Graphics

Scalable Vector Graphics
Dateiändig	`.svg, .svgz`
MIME-Type	`image/svg+xml^[1]`
Entwicklet vo	World Wide Web Consortium
Art	vector image format
Erwiiteret vo	XML
Standard(s):	SVG 1.1 SVG Mobile

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 "<svg>". D SVG-Datei wird durich s abschliessend End-Tag "</svg>" 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">	 

 <!-- Inhalt der SVG-Datei -->

</svg>

(Mit de Attribute "width" (ängl.: Breiti) un "height" (ängl.: Höhi) vum SVG-Starttag "<svg>" 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 <text> 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">
 <!-- Anschlüsse links und rechts -->
 <polyline points="0 25  100 25" fill="none" stroke="black" 
      stroke-width="2.5"/>
 <!-- Das Widerstandsrechteck -->
 <rect x="10" y="15" width="80" height="20" fill="white" stroke="black" 
      stroke-width="2.5" />
 <!-- Der Schleifer -->
 <polyline points="65 5  40 40  40 50" fill="none" stroke="black"
      stroke-width="2.5"/>
 <!-- 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

Betribssystem	Browser	Plugin	Grundforme	Animatione	Animatione mit absoluter Zytongab (Wallclock)	Scripting
Windows	Internet Explorer 6	nativ	kei
	Internet Explorer 6	Adobe SVG-Viewer 3	vollständig	vollständig	kei	vollständig
	Mozilla 1.7.x/Firefox 1.0.x	nativ	kei
	Mozilla 1.7.x/Firefox 1.0.x	Adobe SVG-Viewer 3	instabil	instabil	kei	instabil
	Firefox 1.5	nativ	vollständig	kei	kei	vollständig
	Opera 8	nativ	teilwies	vollständig	kei	vollständig
Linux	Konqueror	KSVG-KPart	vollständig	teilwies	kei	vollständig
	Mozilla 1.7.x/Firefox 1.0.x	nativ	kei
	Mozilla 1.7.x/Firefox 1.0.x	Adobe SVG-Viewer 3	kei
	Firefox 1.5	nativ	vollständig	kei	kei	vollständig
	Opera 8	nativ	vollständig	vollständig	kei	vollständig

(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

↑ M Media Type registration for image/svg+xml

Weblink

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

Dä Artikel basiert uff ere fräie Übersetzig vum Artikel „Scalable_Vector_Graphics“ vu de dütsche Wikipedia. E Liste vu de Autore un Versione isch do z finde.

[1] M Media Type registration for image/svg+xml

[1]