Ausarbeitung zu Thema SVG von Stefan Gelke

Proseminar XML basierte Technologien





Entstehung

SVG ein vom W3C am 4. September 2001 verabschiedeter Standard welcher von einer Arbeitsgruppe des W3C entwickelt wurde. Darin vertreten waren unter anderem Firmen wie Macromedia und Microsoft welche vorher bereits VML zusammen entwickelten, Adobe und Sun Microsystems welche ebenfalls mit PGML vorher zusammen eine XML-Sprache zu Beschreibung von Vektorgraphiken entwickelten, Agfa, Apple, Canon, Corel, Ericsson, HP, IBM, ILOG, Kodak, Macromedia, Microsoft, Nokia, Sharp und Sun Microsystems. Noch im selben Jahr wurde SVG als Basisstandard von MobilPhoneHerstellern gewählt. Zudem existiert seit dem 14.1.03 SVG1.1.



Was ist SVG

SVG ist eine in XML formulierte Sprache zur Erstellung von zweidimensionalen Vektorgrafiken welche zudem Scriptsprachen wie JavaScript oder ECMAScript und Stylesprachen wie CSS unterstützt. Wie alle Vektorformate ist auch SVG verlustfrei Scalierbar und zudem meist kleiner als Rasterformate.



Was kann SVG?

Neben grundlegenden geometrischen Objekten kann SVG zudem Pfade und Texte erzeugen, graphische Symbole für den mehrmaligen Gebrauch definieren und Farbverläufe, Farben und Muster als Füllung festlegen. Es ermöglicht die Verwendung von Masken und Filtereffekten, das einbinden von Rastergraphiken und Sounddateien und die Animation der Objekte. Ausserdem ist es möglich auf Objekte interaktiv zuzugreifen oder diese als Hyperlinks zu definieren.



SVG und SWF (Small Web Format) im Vergleich

svgswf
  • besteht aus ASCII-CODE
  • open source und W3C-Standard
  • ermöglicht durch hierarchische Baumstruktur Zugriff und Modifikation aller Elemente
  • plugins sind kaum verbreitet
  • sehr viel einfacher durch Scripte zu erstellen
  • kann nach Text durchsucht werden
  • nicht in der Lage "im Hintergrund" mit einem Webserver Daten auszutauschen ohne die Komplette HTML-Seite neu aufzurufen (wird vom Adobe-plugin unterstützt)
  • unterstützt mit DOM-2-Standard keine Tastatureingaben
    (wird ebenfalls vom Adobe-plugin unterstützt
  • binäres Format
  • halbproprietär und unter strikter Macromedia-kontrolle
  • erfordert durch bessere Editoren weniger Programmierkenntnisse vom Nutzer
  • plugins sind auf 98% aller webclients installiert (60% - Version 6)
  • lässt sich nur sehr schwer von Serverseitigen Scripten erstellen (Ming-Bibliothek)




SVG - Rahmen

SVG-Grafiken werden mit einer Deklaration eingeleitet, die sie als XML-Dokument ausweisen. Darauffolgend wird die SVG-DTD angegeben und schliesslich das <SVG> Element. Es ist der Wurzelknoten des XML-Baumes und beinhaltet die Attribute der Höhe und Breite und legt den Namensraum fest.

<?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="760" height="400" xmlns="http://www.w3.org/2000/svg">
   <title>Beispiel: desc und title</title>
   <desc>Beschreibung der Graphik</desc>
   ...
   ...
</svg>
Die Verwendung der Elemente 'title' und 'desc' ist vom W3C empfohlen.


Verschachtelungen

Da das Wurzelelement in einem XML Dokument alle anderen Elemente umschliessen soll ist es nicht möglich eine zweite Wurzel zu deklarieren. Es ist jedoch möglich weitere SVG Elemente in das Wurzelelement einzubetten. Um diese zweite Graphik in der ersten korrekt zu platzieren werden die zwei zusätzlichen Attribute X und Y verwendet, welche die Koordinaten der linken oberen Ecke der eingebetteten Graphik festlegen. Alle in dieser eingebetteten Graphik angegebenen Koordinaten beziehen sich auf diesen Punkt. Folglich liegt das im Beispiel deklarierte Rechteck, in bezug auf die äussere Grafik nicht an der Stelle (0;0) sondern an der Stelle (10;10), da dort der Ursprung der inneren Grafik liegt.


<?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="200" height="200" xmlns="http://www.w3.org/2000/svg">
   <rect x="0" y="0" width="200" height="200" style="fill:red;" />
   <svg x="10" y="10" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" style="fill:blue;" />
   </svg>
</svg>



Der <defs> - Tag

Der <defs>-Tag fungiert als eine Art 'Container' für Scriptanweisungen, Definitionen von Filtern, Gradienten (Farbverläufe), Symbolen und Stylevorschriften. Seine Einzige Funktion ist es, einen Bereich für diese Definitionen Abzugrenzen. Die in diesem Bereich beschriebenen Elemente werden nicht sofort in der Grafik dargestellt sondern müssen dazu vorher in der Grafik instanziert werden. Es wird empfohlen Referenzelemente im -Tag zu platzieren.
Instanziert werden diese im <defs>-Tag beschriebenen Objekte mit dem <use> - Tag.

<use x="10" y="10" xlink:href="#Referenz" />


Grundformen

SVG bietet 6 verschiedene Grundformen zur Gestaltung der Grafiken. Ihnen werden Attribute zur Platzierung und Ausdehnung der Form zugeordnet.

Rechteck

Das Rechteck wird mit dem Element erzeugt. Da dieses keinen eigentlichen Inhalt hat sondern nur über Attribute verfügt wird auf das schliessende Tag verzichtet und anstelle dessen der Schrägstrich vor der schliessenden Klammer eingefügt. Um ein Rechteck zu definieren sind mindestens zwei Attributangaben nötig: die Höhe (height) und die Breite (width). Zusätzlich dazu können noch die XY-Koordinaten angegeben werden, die Farbe der Umrandung (stroke), die Breite der Umrandung (stroke-width) und Abrundungen der Ecken (ry und rx). Ist entweder nur rx oder nur ry angegeben wird der jeweils andere Wert gleichgesetzt.

<rect x="10" y="10" width="90" height="40" />

<rect x="10" y="60" width="90" height="40" fill="#ff0000" />

<rect x="110" y="10" width="90" height="40" fill="none" />

<rect x="110" y="60" width="90" height="40" ry="5"
      fill="blue" stroke="black" />

<rect x="210" y="10" width="90" height="40" rx="5" ry="10"
      fill="none" stroke="black" />

<rect x="210" y="60" width="90" height="40"
      fill="red" stroke="blue" stroke-width="4" />

<rect x="310" y="10" width="90" height="40" rx="5"
      fill="none" stroke="black" />

<rect x="310" y="60" width="90" height="40"
      style="fill:#33cc33; stroke:rgb(0,0,0);" />

http://svg.tutorial.aptico.de/grafik_svg/kap3_1.svg

Weitere Grundformen

Alle weiteren Grundformen werden weitestgehend analog zum beschriebenen und unterscheiden sich nur in der Art der Attribute. So fordert der Kreis die angabe eines Mittelpunktes und eines Radius. Die Ellipse erfordert zwei Radien - einen in X und einen in Y Richtung. Die normale Linie zwei zu verbindende Punkte. Und die Objekte Polyline und Polygone erfordern das Points-Attribut welches eine Reihe von Punkten angibt, die zu verbinden sind. Der Unterschied beider Objekte liegt einzig darin, dass das Polygon automatisch den ersten mit dem letzten Punkt verbindet.

<circle cx="180" cy="67" r="14" fill="white" stroke="black" />

<ellipse cx="200" cy="50" rx="20" ry="40" style="fill:green;opacity:.4;" />

<line x1="80" y1="160" x2="320" y2="160" style="stroke:black; stroke-width:2px;" />

<polyline fill="lightgray" stroke="red" stroke-width="5px"
      points="400 10, 120 10, 200 80" />
 'fill' default ist schwarz - um nur eine Linie zu zeichnen muss fill="none" gesetzt werden

<polygon fill="yellow" stroke="none"
      points="350 75, 379 161, 469 161, 397 215, 423 301" transform="scale(.5)" />



Styledefinitionen

Stylevorschriften werden im defs Element platziert und vom style Element eingeleitet. Mit dem type Attribut muss der MIME Typ der verwendeten Stylesprache angegeben werden. Das vor den Stylevorschriften stehende CDATA wird verwendet um einen Bereich zu definieren, der von der Anwendungssoftware nicht als XML-Code interpretiert wird.

<defs>
      <style type="text/css">
            <![CDATA[
              rect {fill:yellow; stroke:black; stroke-width:.1cm;}
              .blauTransparent {fill:blue; stroke:black; opacity:.4;}
            ]]>
      </style>
</defs>

<rect x="50" y="50" width="125" height="100" />
<rect x="225" y="50" width="125" height="100" />
<circle cx="200" cy="100" r="95" class="blauTransparent" />

 Es kann auch ein externes CSS file eingebunden werden.

<?xml-stylesheet type="text/css" href="kap4_2.css" ?>

Gruppierungen

Mit Hilfe des g Elements können Elemente gruppiert und anschliessend mit Hilfe der vergebenen ID als Gruppe angesprochen und transformiert werden. Es können ebenfalls gemeinsame Eigenschaften innerhalb des g-Tags vereinbart werden, welche dann für alle zu einer Gruppe zusammengefassten Elemente gültig sind.

<g id="auto">
   (Teile des autos)
   <g id="rad_hinten">
      (Beschreibung des Hinterrades)
   <g id="rad_vorn">
       (Beschreibung des Vorderrades)
   (weitere Teile des Autos)
</g>

Animation

SVG bietet verschiedene Elemente mit denen man zeitgesteuerte Abläufe in seine Grafik einbauen kann. Diese Animationen können durch verschiedene Ereignisse ausgelöst werden, wie dem Laden der Graphik, Zeitereignissen und verschiedenen Mausereignissen. Diese Animationselemente ermöglichen es unter anderem Attributwerte von Elementen zu ändern, Transformationen von Elementen oder Objekte an Pfaden entlang zu bewegen. Man unterscheidet zwischen 5 verschiedenen Animationstypen:
Beispiel:

Die Rotationen beider Räder: Die Attribute type und attributName bestimmen die Art der Animation. Zusätzlich wird der Zeitpunkt des Beginns der Animation, die Zeitdauer und die Anzahl der Wiederholungen angegeben. Mit den Attributen from und to wird der Anfangs- und Endwinkel der Rotation sowie das Rotationszentrum angegeben.

<animateTransform xlink:href="#rad_hinten"
      type="rotate" attributeName="transform"
      begin="0s" dur="2s" from="0 85 250" to="360 85 250"
      repeatCount="7" />

<animateTransform xlink:href="#rad_vorn"
      type="rotate" attributeName="transform"
      begin="0s" dur="2s" from="0 205 250" to="360 205 250"
      repeatCount="7" />

 Die Verschiebung der Kompletten Autos: Da die Räder als Teil der Gruppe #auto definiert wurden werden sie mit dem Rest des Autos verschoben. Dazu wird wieder type und name der Animation angegeben, Anfangszeit, Dauer sowie Anfangs und Endwerte der Animation festgelegt.

<animateTransform xlink:href="#auto"
      type="translate" attributeName="transform"
      begin="0s" dur="10s"
      from="-250" to="600" />

<animateTransform xlink:href="#auto"
      type="translate" attributeName="transform"
      begin="10s" dur="4s" from="-250" to="50"
      fill="freeze" />

 http://svg.tutorial.aptico.de/grafik_svg/kap6_1a.svg

Symbole

Symbole ähneln stark den Gruppierungen, werden jedoch im Gegensatz zu Gruppen immer Referenziert um in der Grafik sichtbar zu sein. Das Symbol Element steht immer innerhalb des defs Bereiches und dient als Platz zur Beschreibung graphischer Objekte. Es könnte jedoch genau so gut auch das Gruppenelement innerhalb des defs Bereiches verwendet werden um den selben Effekt zu erzielen.

<defs>
      <symbol id="smilie1">
            <circle cx="20" cy="20" r="15" fill="yellow" stroke="black" />
            <circle cx="15" cy="15" r="2" fill="black" stroke="black" />
            <circle cx="25" cy="15" r="2" fill="black" stroke="black" />
            <line x1="20" y1="18" x2="20" y2="23" stroke="black" stroke-width="2" />
            <path d="M 13 26 A 5 3 0 0 0 27 26"
               stroke="black" fill="none" stroke-width="2" />
      </symbol>
</defs>

 Instanziert werden Symbole mit dem use Element:

<use xlink:href="#smilie1" transform="scale(2)" />


Füllungen

Wie schon erwähnt werden Füllungen im <defs>-Tag festgelegt. Neben einfarbigen Füllungen unterscheidet man drei weitere Füllarten: lineare Farbverläufe, radiale Farbverläufe und Muster

Um einen linearen Farbverlauf zu beschreiben wird das Element linearGradient verwendet. Seine Attribute geben ihm eine ID und einen Richtungsvektor in dessen Richtung sich die Farbe verändert. Zudem werden Kindelemente benötigt, die die Anfangs und Endwerte des Farbverlaufes angeben. Natürlich können auch weitere offsets verwendet werden.

<linearGradient id="fuell" x1="0" y1="0" x2="1" y2="0">
   <stop offset="0" stop-color="limegreen" />
   <stop offset="1" stop-color="yellow" />
</linearGradient>
Der folgende Radiale Farbverlauf verfügt über andere Attribute. cx und cy erwarten einen Prozentwert zwischen 0 und 100 und geben den relativen Mittelpunkt der Füllung an. Der Radius r gibt den Radius des Kreisverlaufes an und die Attribute fx und fy ermöglichen die Verschiebung der höchsten Farbintensität.

<radialGradient id="fuell" spreadMethod="repeat"
  cx=".5" cy="1" r=".9" fx=".3" fy="0">
   <stop offset="0" stop-color="blue" />
   <stop offset="1" stop-color="yellow" />
</radialGradient>
Muster sind Wiederholungen besonderer Symbole die aus beliebigen SVG Objekten wie Grundformen und Animationen bestehen kann. Mit dem pattern Element wird eine einzelne Kachel beschrieben die die Grundlage dieser Muster bilden. Dazu wird mit width und height die Grösse der Kachel angegeben und mit dem Attribut patternUnits angegeben ob sich die Position der Kacheln auf das globale Betrachterkoordinatensystem beziehen soll (userSpaceOnUse) oder ob es sich auf das Koordinatensystem des Objektes beziehen soll, welches das Muster referenziert (objectBoundingBox).

<pattern id="fuell"
  patternUnits="userSpaceOnUse"
  width="10" height="10" x="0" y="0">
   <line x1="5" y1="0" x2="5" y2="10" stroke="lightgray" />
   <line x1="0" y1="5" x2="10" y2="5" stroke="lightgray" />
</pattern>
Referenziert werden die Füllungen durch ihre ID:
<use xlink:href="#rechteck" fill="url(#lgr1)" />

 Scripte in SVG

Man kann in SVG Dokumenten Skriptsprachen wie ECMAScript, JavaScript, JScript oder VBScript verwenden um Dynamik und Interaktivität zu verwirklichen. SVG Dokumente verwenden ECMAScript als Standard um die Funktionalität der Event-Attribute zu gewährleisten. Dies wird durch den voreingestellen Wert text/ecmascript des Attributs contentScriptType bewirkt, das im svg-Wurzel-Element gesetzt ist. SVG unterstützt folgende Event-Attribute:

Beispiel einer Scripteinbindung:

<defs>
   <script type="text/javascript">
       <![CDATA[
         function meldung(){
         alert("Javascript in SVG");
          }
      ]]>
   </script>
</defs>

<use xlink:href="#button" x="15" y="15" onclick="meldung();" />


 Ein kleines Beispiel

http://www.scale-a-vector.de/svg/oase.htm

Quellen

http://www.w3.org/Graphics/SVG/
http://www.scale-a-vector.de
http://svg.tutorial.aptico.de/
http://ventilator.netswarm.net/Linuxtag-DVD/talks/188/paper.html