Zum Inhalt springen

Scalable Vector Graphics

aus Wikipedia, der freien Enzyklopädie
Dies ist eine alte Version dieser Seite, zuletzt bearbeitet am 22. Dezember 2005 um 02:35 Uhr durch Stefan Birkner (Diskussion | Beiträge) (rev Version vom 13:48, 18. Dez 2005 wiederhergestellt (keine Linksammlung)). Sie kann sich erheblich von der aktuellen Version unterscheiden.
Beispiel einer SVG-Grafik: Zwei überlagernde Rechtecke, eines davon semitransparent

Scalable Vector Graphics (SVG) ist eine Sprache zur Beschreibung zweidimensionaler Vektorgrafiken in XML.

SVG wurde im September 2001 vom W3C als Empfehlung eingestuft und wird von der nächsten Generation der gebräuchlichen Webbrowser größtenteils nativ unterstützt. Zur Zeit wird dazu oft ein Plugin wie z. B. der SVG-Viewer von Adobe benötigt.

SVG unterstützt mittels SMIL Animationen. Manipulationen des SVG-DOM sind mit Hilfe eingebetteter Funktionen via Skriptsprachen möglich.

Da SVG eine XML-Anwendung ist, kann diese mit einem Texteditor geöffnet und bearbeitet werden und wie jedes andere Dateiformat von geeigneten Programmen geöffnet werden, z. B. die freien Vektorgrafik-Programme Sodipodi und Inkscape, die es als ihr natives Datenformat einsetzen. Eine SVG-Datei besitzt die Dateiendung .svg bzw. .svgz, wenn diese mit gzip komprimiert ist.

SVG-Grundstrukturen

Grundgerüst

Jede SVG-Datei beginnt, wie bei XML-basierten Sprachen üblich, mit der XML-Deklaration und der Dokumenttypdeklaration, die den benutzten Namensraum beschreibt. Dazu wird bei Letzterem ein Verweis auf die entsprechende DTD-Datei eingefügt. Darauf folgt das Start-Tag "<svg>". Die SVG-Datei wird durch das abschließende End-Tag "</svg>" abgeschlossen. 

<?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 den Attributen "width" (engl.: Breite) und "height" (engl.: Höhe) des SVG-Starttags "<svg>" wird die Größe des Ausgabebildschirms definiert.

Graphische Primitiven

Alle graphischen Objekte in SVG bauen auf einfachen graphischen Grundelementen auf. Komplexere Objekte sind dabei aus mehreren einfachen Objekten zusammengesetzt.

Pfad

Der Pfad ist das eigentliche Grundelement in SVG. Aus ihm können alle anderen Objekte (Kreise, Rechtecke, Polygone etc.) aufgebaut werden. Da das aber teilweise sehr umständlich ist, hat man diese häufigen Formen extra mit eigenen Beschreibungen versehen, die im Anschluss aufgeführt werden.

Der Pfad wird im Attribut (d) entweder durch Koordinatenpaare (absolut) oder durch Vektoren (relativ) beschrieben. Großbuchstaben werden von Koordinaten gefolgt, Kleinbuchstaben von Vektoren. Diese Koordinaten und Vektoren geben die Anweisung wie der Pfad gezeichnet werden soll.

  • M/m - moveto = Stift dorthin bewegen
  • L/l - lineto = mit Stift dorthin zeichnen
  • Q/q - quadratische Bézierkurve (zwei Wertepaare: ein Stützpunkt, ein Zielpunkt)
  • C/c - kubische Bézierkurve (drei Wertepaare: zwei Stützpunkte, ein Zielpunkt)

Beispiel: Der absolut beschriebene Pfad... 

<path d="M 10 10 L 20 20 18 22 C 24 28 14 25 10 40 Q 20 45 15.33 60" />

ist identisch mit dem relativen 

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

Für horizontale und vertikale Linien existiert eine entsprechend vereinfachte Notation, für Ellipsen und Kreise ist eine spezielle Notation mit sieben Werten erforderlich.

  • H/h - horizontal line = horizontale Linie zeichnen (X-Wert)
  • V/v - vertical line = vertikale Linie zeichnen (Y-Wert)
  • A - elliptical arc = Bogenkurve

Kreis

Der Kreis wird mindestens durch den Radius (r) definiert. Optional kann die Position des Mittelpunktes durch die Atribute cx und cy festgelegt werden. Füllung, Art der Umrisslinie oder Transparenz werden durch das Attribut style definiert. 

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

Ellipse

Die Ellipse wird durch die zwei Halbachsenradien definiert (rx und ry). Alle anderen Attribute sind die gleichen wie beim Kreis. 

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

Rechteck

Ein Rechteck kann auf nur eine konforme Art definiert werden. Diese Möglichkeit ist die Beschreibung durch die obere linke Ecke mit den Koordinaten (x und y) und die Breite (width) und Höhe (height). 

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

Möchte man die Ecken des Rechtecks abrunden, kann man das mit Hilfe der Attribute (rx und ry) bewerkstelligen.

Linie

Eine einfache gerade Linie wird durch die beiden Endpunkte in SVG beschrieben. 

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

Polyline

Um eine Linie über mehrere Stützpunkte zu definieren, benutzt man die Beschreibung als Polylinie. Dabei werden die einzelnen Koordinatenpaare der Stützpunkte einfach fortlaufend hintereinander geschrieben. Die Linie wird von ersten Punkt aus zum zweiten gezogen und von dort weiter zum dritten Stützpunkt und so weiter. 

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

Polygon

Ein Polygon (Vieleck) wird durch seine Eckpunkte beschrieben. Wie bei der Polyline werden auch hier alle Koordinatenpaare einfach hintereinander geschrieben. 

<polygon points="100 100 100 200 150 200" />

Text

Zeichen und Text können mit Hilfe des Elements <text> definiert werden. 

<text x="100" y="100" style="font-size:40">Hallo Welt!</text>

Beispiel

Variable Resistor.svg

Ein kleines Beispiel illustriert die Verwendung der einzelnen Elemente gut. Das rechts dargestellte Bild Variable Resistor.svg hat den folgenden kommentierten 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>

Programme, die SVG-Anzeige unterstützen

SVG-Unterstützung in Browsern

Betriebssystem Browser Plugin Grundformen Animationen Animationen mit absoluter Zeitangabe (Wallclock) Scripting
Windows Internet Explorer 6 nativ nein
Adobe SVG-Viewer 3 ja ja nein ja
Mozilla 1.7.8/Firefox 1.0.x nativ nein
Adobe SVG-Viewer 3 instabil instabil nein instabil
Firefox 1.5 nativ ja nein nein ja
Opera 8 nativ teilweise ja nein ja
Linux Konqueror KSVG-KPart ja teilweise nein ja
Mozilla 1.7.8/Firefox 1.0.x nativ nein
Adobe SVG-Viewer 3 nein nein nein nein
Firefox 1.5 nativ ja nein nein ja
Opera 8 nativ ja ja nein ja

Des Weiteren gibt es eine Betaversion des Adobe SVG-Viewers in der Version 6 (Preview 1, mit Datum Juli 2003), die eine verbesserte Standards-Unterstützung und auch Verbesserungen in der Integration in Mozilla Firefox beinhaltet. Das Projekt scheint jedoch seit Sommer 2003 angehalten zu sein.

Grafische Effekte

Beispiel eines Turbulence-Filters

Bekannte Grafikfilter sind aus DTP-Programmen übernommen worden und arbeiten nach dem Matrizen-Prinzip, bei dem Operatoren und Funktionen die Form der Matrix ausdrücken. Es wird grob gesagt jedes einzelne Pixel mit dem definierten Filtereffekt berechnet und auf das nächste übertragen. Auf diese Weise lassen sich Bilder und Grafiken auf verschiedenste Art und Weise bearbeiten.

Einige der möglichen Filter:

  • feTurbulence
  • feDisplacement
  • feGaussianBlur

Quellcode des Filters für den 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"/>

Animationen

Datei:Pfadanimation2.png
Beispiel einer Pfadanimation

Die Tags, die für die Auszeichnung von Animationen benutzt werden, stammen aus dem XML-Multimediastandard SMIL (Synchronized Multimedia Integration Language). Zustände, welche animiert werden können sind Transformation, Position, Sichtbarkeit, Farbe und Größe. Wichtig für das Verständnis von Animationen sind die Begriffe „Darsteller“, das zu animierende Objekt, und „Drehbuch“, die Zeitspanne der Animation.

Zeitangaben können von Millisekunden bis Stunden angegeben werden und können verschieden ausgezeichnet werden. Für die meisten Animationstags wird ein Pflichtattribut benötigt, was die Art der Animation festlegt. Weitere grundlegende Komponenten sind wie schon erwähnt der Zeitrahmen, Zustände während der Animation (optional), der Zustand nach der Animation und ob eine Wiederholung gestartet werden soll oder nicht.

Die Eigenschaften eines Darstellers sind in SVG folgende Attribute festgehalten.

  • attributeName (was wird animiert)
  • attributeType (XML oder CSS)

Für die Zeitangabe werden logische Begriffe wie begin (engl.: Start, Beginn) end (engl.: Ende) und dur (engl. „duration“: Dauer) verwendet. Start, Wiederholungen etc. können auch von Ereignissen wie Mausberührung oder -klick abhängig gemacht werden.

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

Quellcode des Play-Buttons: 

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

Scripting

Datei:Scripting.png
Beispiel einer interaktiven SVG-Grafik

Interaktive Grafiken zu erstellen ist mit SVG relativ einfach umzusetzen. Man benötigt allerdings Kenntnisse in JavaScript, Perl, PHP, JSP etc. Man kann die DOM-Struktur einer SVG-Grafik manipulieren oder neue Elemente per Mausklick erschaffen. SVG-Grafiken lassen sich serverseitig generieren und können auch mit Datenbanken kommunizieren. Um Scripts in einem SVG-Dokument zu platzieren, hat man zwei Möglichkeiten. Entweder man definiert das Skript direkt im SVG-Dokument oder legt das Skript referenziert extern ab. Für aufwendige und häufig vorkommende Skripts ist es ratsam die Programmcodes (Scripts) extern zu lagern, da es sehr schnell zu einem Übersichtsverlust kommen kann, wenn alles in einem Dokument untergebracht wird. Um ein Beispiel zu geben, wie Events, Programmcode und SVG zusammen hängen, ein Rechteck das mit jedem Mausklick weiter wächst (Beispiel als PNG angespeichert).

Der 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 wurde eine Funktion definert, welche die DOM-Struktur der SVG-Datei hierarchisch durchläuft. Als erstes wird das Dokument aufgerufen. Die Funktion getElementById() ruft nun das Rechteckt auf, das den Namen "jack" trägt. Sobald die Funktion das Element "jack" gefunden hat, wird dauf dasselbe zugegriffen und dessen Attribute können verändert werden. In dieser Funktion wird das Attribut width mit der Funktion getAttribute() angesteuert und im weiteren mit einer relativ eindeutigen Formel verändert. Nach dem Definitionsbereich steht dann das Rechteck mit der ID jack und im selben Tag wird der Eventhandler onclick mit der Funktion wachsen(evt) auf das Rechteck definiert.

Konferenzen

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.

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

Varianten

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

Literatur

Siehe auch

Abgerufen von „https://de.wikipedia.org/w/index.php?title=Scalable_Vector_Graphics&oldid=11876071“