Scalable Vector Graphics

Us der alemannische Wikipedia, der freie Dialäkt-Enzyklopedy

Beispiel vun 'ra SVG-Grafik: Zwey yberlagerndi Rechteck, eins dävu semitransparent

Scalable Vector Graphics (SVG) isch ä Schtandard zuer Beschreibung vun zweydimensionale Vektorgrafikeim XML-Syntax.

SVG isch im Septembar 2001 vum W3C als Empfehlung ygschtuft worre un wierd vun de aktuelli gröschtenteils unterstytzt.

SVG unterschtytzt mit SMIL Animatione. Manipulatione vum SVG-DOM sin mit Hilf vun eingebettete Funktione mit Skriptschprôche mögli.

Wil SVG ä XML-Ôwendung isch, konn die mitm Texteditor göffnet un barbeitet werre un wie jedes ondre Dateiformat vun geignete Programme göffnet werre, z. B. mit freye Vektorgrafik-Programme Sodipodi un Inkscape, wue des als ihr eignes Datenformat ysetze. Ä SVG-Datei bsitzt d Dateiendung .svg bzw. .svgz, wenn s mit gzip komprimiert worre isch.

Inhaltsverzeichnis

1 Gschicht
2 Struktur
3 Element
4 Status
- 4.1 Programm, wue d SVG-Ônzeig unterstytze
- 4.2 SVG-Unterstytzung vun Browser
5 Konferenze
6 Variante
7 Literatur
8 Luege au
9 Ekschterni Syte

[ändere] Gschicht

Siter August 1998 arbeitet s World Wide Web Consortium (W3C) on de Schpezifikation vun de Vektorgrafikschprôch SVG, vun der im Septembar 2001 d ärscht Empfehlung (engl. recommendation) unterm Nômen Scalable Vector Graphics (SVG) 1.0 Specification veröffentlicht worre isch.

Aktuell isch het d Spezifikation d Version 1.1, siterm Septembar 2003 vum W3C empfohle. D SVG-Version 1.2 isch zuer Zyt in Arbeit (Stond 2005) un steht aktuell als Entwurf zuer Vofygung.

[ändere] Struktur

SVG nutzt d Syntax vun de Extensible Markup Language (ängl. fyr „erwieterbari Usszeichnungs-Sproch“), XML. Die definiert Grafik isch somit in 'ra Boumschtruktur us voschiedene Elemente un de zuegwiesene Attribute ufbout.

Jedi SVG-Datei beginnt, wie bi XML-basierte Schprôchen üblich, mit de XML-Deklaration un de Dokumenttypdeklaration, wue de bnutzte Nômensroum bschriebe. Dazu wird bi Letzterem ä Verweis uf d entsprechend DTD-Datei igfygt. Dorouf folgt s Start-Tag "<svg>". D SVG-Datei wird durch 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 Gröss vum Usgabebildschirm bschtimmt.)

[ändere] Element

[ändere] Graphischi Primitive

Alli graphische Objekte in SVG boue uf eifachi graphischi Grundelemente uf. Komplexeri Objekte sin dobei us mehreri eifache Objekte zommegsetzt.

Pfad

De Pfad isch s eigentlichi Grundelement in SVG. Us dem kinne alli ôndri Objekte (Kreis, Rechteck, Polygon etc.) ufbout werre. Wil s abr teilwies do umständlich isch, het ma d hyfigschte Forme extra mit eigeni Bschrybunge vosehne, wue im Ônschluss ufgfyhrt werre.

De Pfad wird im Attribut (d) entwedr duerch Koordinatepaar (absolut) oder duerch Vektore (relativ) bschriebe. Grossbuechschtabe werdn vun Koordinate gfolgt, Kleibuechschtabe vun Vektore. D Koordinate un Vektore gebe d Ônweisung wie de Pfad geziechnet werre soll.

M/m - moveto = Stift dertno bwege
L/l - lineto = mit Stift dertno zeichne
Q/q - quadratisch Bézierkurve (zwey Wertepaar: ä Stytzpunkt, ei Zielpunkt)
C/c - kubischi Bézierkurve (drey Wertepaar: zwey Stytzpunkte, ei Zielpunkt)

Beispiel:

De absolut bschriebene 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 m relative

<path d="M 10 10 l 10 10 -2  2 c  6  6 -4  3 -8 18 q 10  5  5.33 20" />

Fyr horizontali un vertikali Linie exischtiert ä entsprechendi vereifacht Notation, fyr Ellipse un Kreis isch ä spezielli Notation mit siebe Werte noetig.

H/h - horizontal line = horizontal Linie zeichne (X-Wert)
V/v - vertical line = vertikal Linie zeichne (Y-Wert)
A - elliptical arc = Bogekurv

Kreis: De Kreis wird mindeschtens duerch de Radius (r) definiert. Optional konn d Position vum Mittelpunkt duerch d Atribut cx un cy feschtglegt werre. Füllung, Art vun de Umrisslinie odr Transparenz werre duerch s Attribut style definiert.

<circle cx="100" cy="100" r="50" />

Ellipse: D Ellipse wird duerch d zwey Halbachseradie definiert (rx un ry). Alli ôndrie Attribute sin d glieche wie biem Kreis.

<ellipse cx="100" cy="100" rx="50" ry="20" />

Rechteck: Ä Rechteck kônn uf nuer ei konformi Art definiert werre. Die Möglichkeit isch d Bschreibung duerch d oberi link Eck mit de Koordinate (x un y) un d Breiti (width) un Höhi (height).

<rect x="100" y="100" width="100" height="200" />

Möchte ma d Ecke vum Rechteck abrunde, konn mas mit Hilf vun de Attribute (rx un ry) bwerkstellige.

Linie: Ä eifachi gradi Linie wird duerch d beidi Endpunkt in SVG bschriebe.

<line x1="100" y1="100" x2="200" y2="200" />

Polyline: Um ä Linie yber mehreri Styzpunkt zue definiere, bnutzt ma d Bschreibung als Polylinie. Dobie werre d einzelni Koordinatenpaar vun de Stytzpunkt eifach fortloufend hinteränonder gschriebe. D Linie wird vum ärschte Punkt us zuem zweyte gzoge un vun dert witr zuem dritt Stytzpunkt un so witr.

<polyline points="100 100 200 200 300 40" />

Polygon: Ä Polygon (Vieleck) wird duerch sini Eckpunkt bschriebe. Wie bi de Polyline werre au do alli Koordinatepaar eifach hinteränonder gschriebe.

<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>

[ändere] Animatione

Beispiel einer Pfadanimation

D Tags, wue fyr d Uszeichnung vun Animatione gnumme werre, stômme usm XML-Multimediastandard SMIL (Synchronized Multimedia Integration Language). Zueschtänd, wue animiert werre kinne sin Transformation, Position, Sichtbarkeit, Farb un Gröss. Wichtig fyrs Voständnis vun Animatione sind d Begriff „Darsteller“, s zue animierende Objekt, un s „Drehbuch“, d Zytschpônne vun de Animation.

Zytongabe kinne vun Millisekunde bies Stunde ogegebe werre un kinne voschiede uszeichnet werre. Fyr d meischt Animationstags wierd ä Pflichtattribut bnötigt, wwu d Art vun de Animation feschtlege tuet. Witeri grundlegendi Komponenten sind de Zytrahme, Zueschtänd während de Animation (optional), de Zueschtônd noch de Animation un ob ä Wiederholung gstartet werre soll odr nit.

Fyr d Eigenschafte vum Darsteller sind in SVG folgendi Attribute feschtghalte.

attributeName (was wierd animiert)
attributeType (XML odr CSS)

Fyr die Zytongabe werre logischi Bgriff wiä begin (ängl.: Start, Beginn) end (ängl.: End) un dur (ängl. „duration“: Daur) vowendet. Start, Wiederholunge etc. kinne au vun Ereignisse wiä Mausbrührung odr -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>

[ändere] Grafischi Effekt un Filter

Beispiel vun nem Turbulence-Filter

Bkônnti Grafikfilter sin us DTP-Programme ybernomme worre un schaffe nochm Matrize-Prinzip, bie dem Operatore un Funktione d Form vun 'ra Matrix usdrücke. S wird grob gsait jedes einzeln Pixel mitm definierte Filtereffekt brechnet un uff s nächschte ybertrage. Uff diä Wies losse sich Bilder un Grafike uff voschiedenschti Art un Weise bearbeite.

Ä paar vun de mögliche Filter:

feTurbulence
feDisplacement
feGaussianBlur

Quellcod vum Filter fyr 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"/>

[ändere] Skripting

Beispiel vun 'ra interaktive SVG-Grafik

Interaktivi Graike z mache isch mit SVG ziemli eifach. Ma sott abr Kenntnis in JavaScript. Perl, PHP, JSP und so ho. Ma konn diä DOM-Schtruktur vun re SVG-Grafik manipulier odr neije Element mitm Mausklick mache. SVG-Frafike losse sich serversytig generiere un kinne au mir Databônke kommuniziere. Um Skripts in nm SVG-Dokument zue plaziere, het my zwey Möglichkeite. Entwedr ma definierts Skript im SVG-Dokument selbr odr legt s Skript referenziert extern wu no. Fyr ufwändigi un hiffig vorkommendi Skripts ischs guet, die Skripts extern zue lagre, sunsch voliert ma schnell de Yberblick, wenn alles ins Dokumnet noeklatscht werre tuet. Um a Beispiel zue gäbe, wiä Event, Programmcode un SVG zomme hänge tuen, ä Rechteck wue mit jedm Klick wachse tuet. (Nuer 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>

Hier wierd ä Funktion definiert, wue d DOM-Schtruktur hierarisch duerchlaufe tuet. Als erschts wierd s Dokument ufgruefe.D Funktion getElementById() rueft jetztert s Rechteck uff, wue de Nôme "jack" het. Sobal d Funktion s Element jack gfunde het, wierd doruf zuegriefe un d Attribute kinne gändert werre. In derre Funktion wierd s Attribut width mit de Funktion getAttribute() ogschtyrt un im witre mir 're relativ eidittig Formel gändert. Nochm Definitionsbreich steht s Rechteckt mit de ID jack un im slebe Tag wierd de Eventhandler onclick mit de Funktion wachsen(evt) ufs Rechteck definiert.

[ändere] Beispiel

Variable Resistor.svg

Ä kleins Beispiel illuschtriert d Vowendung vun de einzelni Element guet. S rechts dargschtellte Bild Variable Resistor.svg het de folgende durchkommentiert 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>

[ändere] Status

[ändere] Programm, wue d SVG-Ônzeig unterstytze

CATIA sitr Version 5
CorelDRAW sitr Version 10
OpenOffice.org, (nuer Export, ab Version 2.0 Import ybers SVG-Import-Plugin)
The GIMP sitr Version 2 (SVG wierd biem Öffne in ä Bitmap konvertiert)
Inkscape
Sodipodi
Adobe Illustrator
IsoDraw

[ändere] SVG-Unterstytzung vun Browser

Betriebssystem	Browser	Plugin	Grundforme	Animatione	Animatione mit absolutr Zytôngab (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 Schtônd Dezembar 2005)

[ändere] Konferenze

Die SVG Open ist eine internationale Konferenz, die sich mit allem rund um das Thema SVG beschäftigt. Mittlerweile hat sie bereits vier mal stattgefunden.

Zürich, Schweiz, 15.-17. Juli 2002
Vancouver, Kanada, 13.-18. Juli 2003
Tokio, Japan, 7.-10. September 2004
Niederlande, Enschede, 15.-18. August 2005

Nächste SVG Open ist 2006 in Victoria (Kanada).

[ändere] Variante

Eine Variante von SVG ist das NEVA-Dateiformat (.nva), welches vor allem bei Sharp-Handys eingesetzt wird. Dieses Format ist platzsparender als unkomprimiertes SVG.

[ändere] Literatur

Marcel Salathé, SVG Scalable Vector Graphics, ...für professionelle Einsteiger, Verlag Markt+Technik, ISBN 3827261880

[ändere] Luege au

Rich Internet Application

[ändere] Ekschterni Syte

Scalable Vector Graphics (SVG) biem World Wide Web Consortium (uff Englisch)
Literatur un Ressourcen zue SVG (PDF-Datei)
Kategorie „SVG-Datenformat“ im Open Directory Project

Der Artikel basiert uf ´ra freie Ibersetzung vum Artikel „Scalable Vector Graphics“ us dr dytsche Wikipedia.

Vun "http://als.wikipedia.org../../../s/c/a/Scalable_Vector_Graphics_5aea.html"

Kategori: Computer