Scalable Vector Graphics

Vorlage:Infobox Dateiformat/Wartung/magic fehltVorlage:Infobox Dateiformat/Wartung/website fehlt
Scalable Vector Graphics
Dateiändig.svg, .svgz
MIME-Typeimage/svg+xml[1]
Entwicklet voWorld Wide Web Consortium
Artvector image format
Erwiiteret voXML
Standard(s):SVG 1.1
SVG Mobile

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

Biischpil vun ere SVG-Grafik: Zwey iberlagerti Rechteck, eis devu semitransparent

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

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

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

Graphischi Primitive ändere

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

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

 
Biispil vun eme Turbulence-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 ändere

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

 
Variable Resistor.svg

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

Programm, wu d SVG-Onzeig unterstitze ändere

  • 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 ändere

Betribssystem Browser Plugin Grundforme Animatione Animatione mit absoluter Zytongab (Wallclock) Scripting
Windows Internet Explorer 6 nativ kei
Adobe SVG-Viewer 3 vollständig vollständig kei vollständig
Mozilla 1.7.x/Firefox 1.0.x nativ kei
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
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 ändere

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.

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

Variante ändere

  • 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 ändere

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

Nowiis ändere

  1. M Media Type registration for image/svg+xml

Weblink ändere

  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.