Scalable Vector Graphics
right|thumb|250px|Biischpil vun ere SVG-Grafik: Zwey iberlagerti Rechteck, eis devu semitransparent
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"
"[URL]>
<!-- Inhalt der SVG-Datei -->
(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...
isch identisch mit em relative
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.
Ellipse D Ellipse wird durich di zwe Halbachseradie definiert (rx un ry). Alli ondre Attribut sin d gliche wie bim Kreis.
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).
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.
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.
Polygon E Polygon (Viileck) wird durich sini Eckpinkt bschribe. Wie bi de Polyline werre au do alli Koordinatepaar eifach hinterenonder gschribe.
Text Zeiche un Text kinne mit Hilf vum Element <text> definiert werre.
Hallo Welt!
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:
Quellcod vum Play-Button:
Grafischi Effekt un Filter
thumb|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:
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" "[URL]>
<![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);
}
}
]]>
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
thumb|200px|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"
"[URL]>
<!-- Anschlüsse links und rechts -->
<!-- Das Widerstandsrechteck -->
<!-- Der Schleifer -->
<!-- Die Pfeilspitze wird gedreht -->
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
BetribssystemBrowser PluginGrundformeAnimationeAnimatione mit absoluter Zytongab (Wallclock)Scripting Windows Internet Explorer 6nativ keiAdobe SVG-Viewer 3 vollständig vollständig kei vollständig Mozilla 1.7.x/Firefox 1.0.xnativ keiAdobe SVG-Viewer 3 instabil instabil kei instabilFirefox 1.5nativ vollständig kei kei vollständigOpera 8nativ teilwies vollständig kei vollständig LinuxKonquerorKSVG-KPart vollständig teilwies kei vollständig Mozilla 1.7.x/Firefox 1.0.xnativ keiAdobe SVG-Viewer 3 keiFirefox 1.5nativ vollständig kei kei vollständigOpera 8nativ 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
Weblink
Scalable Vector Graphics (SVG) bim World Wide Web Consortium (uff Englisch)
Literatur un Ressourcen zue SVG (PDF-Datei)
Kategorie:Dateiformat