Graphische Möglichkeiten von SVG

Basisformen
SVG stellt mehrere geometrische "Basisformen" zur Verfügung, mit denen man einfach und schnell Grafiken erzeugen kann:

  • Rechteck (optional mit abgerundeten Ecken)
  • Kreis
  • Ellipse
  • Linie
  • Polylinie
  • Polygon

Für alle Formen gilt, dass man sie mit einer beliebigen Farbe füllen kann, bzw. die Stärke und Farbe der Linien ändern kann.

Beispielcode

<?xml version="1.1" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="350px" height="350px">
<rect x="75px" y="75px" width="150px" height="150px" rx="50" fill="red" stroke="green" stroke-width="10">
</svg >

Erläuterungen zum Code

<rect/> Es wird ein Rechteck erzeugt.
x="75px" Das Rechteck wird 75 Pixel vom rechten Rand entfernt positioniert (Registrierungspunkt ist die obere linke Ecke des Rechtecks).
y="75px" Das Rechteck wird 75 Pixel vom oberen Rand entfernt positioniert (Registrierungspunkt ist die obere linke Ecke des Rechtecks).
width="150px" Das Rechteck hat eine Breite von 150 Pixel.
height="150px" Das Rechteck hat eine Höhe von 150 Pixel.
rx="50" Der Radius für das Abrunden der Ecken ist 50.
fill="red" Die Füllfarbe ist rot .
stroke="green" Die Umrißfarbe ist grün.
stroke-width="10" Die Breite der Umrißlinie ist 10.

Ergebnis

Ergebnis als Bilddatei (*.png) Ergbenis als SVG-Datei (*.svg)
Hinweis: Sie verwenden einen nicht SVG-fähigen Browser bzw. haben das entsprechende Plug-In nicht installiert, daher ist das Ergebnis als SVG-Datei für Sie nicht sichtbar.

Pfadelemente
Das vielseitigste Werkzeug von SVG sind Pfadelemente. Mittels Pfadelementen lassen sich Punkte, Linien, Bézierkurven und elliptische Formen erzeugen. Pfadelemente müssen nicht zusammenhängen, können also "Löcher" enthalten.

Beispielcode

<?xml version="1.1" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="350px" height="350px">
<path d="M 50,50 L 10,20 L 10 80 Z" style="fill: #F49090; stroke: #A90000; stroke-width: 2px"/>
<path d="M 70,140 c +0,+0,+60,+30,-0,+60 Z" style="fill: #6CC06C; stroke: #115011; stroke-width: 2px"/>
<path d="M 160,30 q +30,+0,+0,+30 q -30,+30,+0,30 q 30,+0,+0,+30 q -30,30,+0,+30" style="fill: none; stroke: #F3DF00; stroke-width: 2px"/>
</svg>

Erläuterungen zum Code

<path/> Es wird ein Pfad erzeugt .
d="..." Die Koordinaten des Pfads werden festgelegt.
M 70,140 Springt zu der Position 70/140 (x/y).
L 10,20 Zeichnet eine Linie zu der absoluten Position 10/20 (x/y).
Z Es wird eine Linie zu der Position erzeugt die in der M-Anweisung steht .
c +0,+0,+60,+30,-0,+60 Es wird eine Kurve gezeichnet mit den relativen Startwerten 0/0, dem relativen Mittelpunkt +60/+30 und dem relativen Endpunkt 0/+60.
q +30,+0,+0,+30 Zeichnet eine Bézierkurve, wobei Parameter 1 (+30) und Parameter 2(+0) die relativen Kontrollpunkte darstellen und die letzten beiden Parameter (+0/+30) die relativen Endpunkte der Bézierkurve definieren.

Alle verwendeten Anweisungen (mit Ausnahme von Z) können mit relativen oder absoluten Koordinaten angegeben werden. Für relative Koordinaten verwendet man Kleinbuchstaben für die Befehle (zB c oder q im obigen Beispiel) und für absolute Koordinaten Großbuchstaben (zB M oder L im obigen Beispiel). Bei relativen Koordinaten stellt man die Zeichen + oder - vor die Koordinate um die Richtung zu bestimmen.

Die Angabe der Farbcodes erfolgte in diesem Beispiel nicht über vordefinierte Farben wie im Beispiel unter dem Punkt "Basisformen" sondern über das Hexadezimal-System. Es ist auch möglich keine Füllfarbe zu vergeben. (Code: style="fill: none");

Ergebnis

Ergebnis als Bilddatei (*.png) Ergbenis als SVG-Datei (*.svg)
Hinweis: Sie verwenden einen nicht SVG-fähigen Browser bzw. haben das entsprechende Plug-In nicht installiert, daher ist das Ergebnis als SVG-Datei für Sie nicht sichtbar.

Farbverläufe und Füllmuster
Man unterscheidet zwischen linearen und radialen Farbverläufen. Füllmuster können bei SVG beliebige Objekte ausfüllen. Das Muster muss dabei natürlich "replizierbar" sein, so dass es zum Füllen des Objekts beliebig oft nebeneinander gelegt werden kann.

Beispielcode

<?xml version="1.1" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="350px" height="350px">
<defs>
<linearGradient id="linearVerlauf">
<stop offset="30%" stop-color="#A90000"/>
<stop offset="70%" stop-color="#EA7F00"/>
</linearGradient>
<radialGradient id="kreisVerlauf" cx="0.6" cy="0.7">
<stop offset="0%" style="stop-color: #FFFFFF"/>
<stop offset="30%" style="stop-color: #C0CFEB"/>
<stop offset="60%" style="stop-color: #6889C7"/>
<stop offset="100%" style="stop-color: #324B79"/>
</radialGradient>
<pattern id="muster" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
<rect x="0" y="0" height="10" width="10" style="fill: #6CC06C"/>
<rect x="10" y="0" height="10" width="10" style="fill: #115011"/>
<rect x="0" y="10" height="10" width="10" style="fill: #115011"/>
<rect x="10" y="10" height="10" width="10" style="fill: #6CC06C"/>
</pattern>

</defs>
<rect x="15" y="15" width="100" height="100" fill="url(#linearVerlauf)"/>
<circle cx="185" cy="65" r="50" style="fill: url(#kreisVerlauf)"/>
<rect x="80" y="140" width="100" height="100" fill="url(#muster)"/>

<svg/>

Erläuterungen zum Code

<defs/> Es werden Elemente mit einer id definiert auf die später mittels url(#id) zugegriffen werden kann.
<linearGradient/> Ein linearer Verlauf wird definiert.
<stop offset="30%" stop-color="#A90000"/> offset definiert den Startpunkt des Verlaufs, über stop-color wird die Farbe bestimmt.
<stop offset="0%" style="stop-color: #FFFFFF"/> offset definiert den Startpunkt des Verlaufs, über style wird die Farbe bestimmt.
<radialGradient id="kreisVerlauf" cx="0.6" cy="0.7"> Es wird ein kreisförmiger Verlauf mit der id "kreisVerlauf" erstellt, dessen "Mittelpunkt" sich bei 60% der Breite und 70% der Höhe des Elements auf das dieser Verlauf angewendet wird befindet.
<pattern id="muster" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20"> Es wird ein Muster mit der id "muster" erstellt. Der Wert "userSpaceOnUse" bestimmt, das die x/y-Position und die Höhe und Weite als absolute Werte in dem durch das referenzierende Element aufgespannte Koordinatensystem interpretiert werden.

Ergebnis

Ergebnis als Bilddatei (*.png) Ergbenis als SVG-Datei (*.svg)
Hinweis: Sie verwenden einen nicht SVG-fähigen Browser bzw. haben das entsprechende Plug-In nicht installiert, daher ist das Ergebnis als SVG-Datei für Sie nicht sichtbar.

Text
Text nimmt eine ähnliche Stellung innerhalb von SVG ein wie die Basisformen, dh Text-Elemente können gefüllt und beschnitten werden. Text-Elemente können transformiert und animiert werden. Derzeit ist es jedoch noch nicht möglich mehrzeilige Text-Elemente zu erstellen, dies wird aber in künfigen Spezifikationen unterstützt werden.

Beispielcode

<?xml version="1.1" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="350px" height="350px">
<text x="8" y="140" style="fill: #A90000; font-size: 105px">DMA</text>
<text x="16" y="180" style="fill: #115011; font-size: 22px">Digital Media for Artists</text>
</svg>

Erläuterungen zum Code

<text/> Es wird ein Text-Element erzeugt .
x="8" y="140" Die Koordinaten des Text-Elements werden festgelegt.
style="fill: #A90000; Die Füllfarbe wird festgelegt.
font-size: 105px" Die Schriftgröße wird festgelegt.

Ergebnis

Ergebnis als Bilddatei (*.png) Ergbenis als SVG-Datei (*.svg)
Hinweis: Sie verwenden einen nicht SVG-fähigen Browser bzw. haben das entsprechende Plug-In nicht installiert, daher ist das Ergebnis als SVG-Datei für Sie nicht sichtbar.

Filter
SVG bietet die Möglichkeit auf Objekte folgende Filtereffekte anzuwenden:

  • Lichteffekte
  • Schärfe/Unschärfefilter
  • Überblenden
  • Kombinieren
  • Fluten
  • Zusammenfügen
  • Morphing
  • Turbulenz

Filter können auch kombiniert werden oder nur auf eine Region des graphischen Objektes angewendet werden.

Beispielcode

<?xml version="1.1" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="350px" height="350px">
<defs>
<filter id="my_filters">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="first"/>
<feSpecularLighting in="first" surfaceScale="5" specularConstant="0.75" specularExponent="20" lighting-color="#BBBBBB" result="specOut"/>
</filter>
</defs>
<rect x="55px" y="85px" width="145px" height="85px" rx="10" fill="#C1C1C1" stroke="#747474" stroke-width="3" style="filter: url(#my_filters)"/>
<text x="60" y="140" style="fill: #A90000; font-size: 60px">DMA</text>
<text x="66" y="160" style="fill: #A90000; font-size: 12px">Digital Media for Artists</text>
</svg>

Erläuterungen zum Code

<filter/> Definiert einen Filter mit einer Filter-ID. Innerhalb dieses Filters können beliebig viele Filtertypen verwendet werden.
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="first"/> Es handelt beim "feGaussianBlur" um einen Filter zum weichzeichnen von Elementen. In diesem Fall wird die Quelldatei (in="SourceGraphic") um den Faktor 3 ( stdDeviation="3") weichgezeichnet. Das Ergebnis wird in "first" (result="first") zwischengespeichert.
style="filter: url(#my_filters)" Anwenden des Filters im Rechteck

Im Beispiel wurde ein Filter zum weichzeichnen und ein Farbfilter angewendet.

Es gibt eine große Anzahl von Filtern, die auch unterschiedliche Paramter benötigen. Eine genaue Beschreibung der Filtertypen und ihrer Parameter findet man unter folgenden Link:

Informationen zu Filtertypen und deren Parametern

Ergebnis

Ergebnis als Bilddatei (*.png) Ergbenis als SVG-Datei (*.svg)
Hinweis: Sie verwenden einen nicht SVG-fähigen Browser bzw. haben das entsprechende Plug-In nicht installiert, daher ist das Ergebnis als SVG-Datei für Sie nicht sichtbar.

Animationen
In SVG kann beinahe jedes Element und vor allem dessen Attribute animiert werden hierzu wird die Syntax und die Spezifikation an SMIL (Synchronized Multimedia Language) angepasst. Es können u.a. Farbe, Geometrie, Transformation, Lokalität und das Objekt kann an einem Pfad animiert werden.

Beispielcode

<?xml version="1.1" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C/DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg- 20001102.dtd">
<svg width="350px" height="350px">
<rect x="50" y="220" width="30" height="30" fill="#115011">
<animateTransform attributeName="transform" type="rotate" from="0" to="-50" dur="10s" repeatCount="indefinite"/>
</rect>
<rect x="40" y="40" width="30" height="30" fill="#A90000">
<animate attributeName="x" from="40" to="200" dur="10s" repeatCount="indefinite"/>
<animate attributeName="y" from="40" to="200" dur="10s" repeatCount="indefinite"/>
</rect>
</svg>

Erläuterungen zum Code

<animateTransform attributeName="transform" type="rotate" from="0" to="-50" dur="10s" repeatCount="indefinite"/> Es wird eine Rotationsanimation auf dem Element definiert (Code: attributeName="transform" type="rotate") die bei 0 startet (Code: from="0") und bei -50 endet (Code: to="-50"). Diese Animation dauert 10 Sekunden (Code: dur="10s") und wird immer wiederholt (Code: repeatCount="indefinite").
<animate attributeName="x" from="40" to="200" dur="10s" repeatCount="indefinite"/> Es wird eine Animation auf dem X-Attribute (Code: attributeName="x") des Elements durchgeführt, die bei 40 startet (Code: from="40") und bei 200 endet (Code: to="200"). Diese Animation dauert 10 Sekunden (Code: dur="10s") und wird immer wiederholt (Code: repeatCount="indefinite").

Ergebnis

Ergebnis als Bilddatei (*.png) Ergbenis als SVG-Datei (*.svg)
Hinweis: Sie verwenden einen nicht SVG-fähigen Browser bzw. haben das entsprechende Plug-In nicht installiert, daher ist das Ergebnis als SVG-Datei für Sie nicht sichtbar.

Interaktivität
Der Benutzer kann mittels Eingabegeräte wie z.B. der Maus direkt mit einer SVG-Graphik interagieren. Er kann die Visualisierung der Grafik in Echtzeit beeinflussen (z.B. wenn mit dem Mauszeiger über markante Punkte eines Stadtplans fährt), Animationen starten, Skripte ausführen (z.B. durch drücken eines Knopfs) oder Hyperlinks aktivieren.

Kommunikation mit einem Server, um z.B. Datenbankinformation abrufen zu können, kann mittels der Einbindung von PHP, Perl oder ASP realisiert werden. Mit clientseitige Scriptsprachen wie z.B. JavaScript oder VBScript ist es möglich DOM Elemente anzusprechen und Aktionen auszuführen, falls ein bestimmtes Ereignis ("event") eingetreten ist.

Ein Beispiel für ein interaktives SVG ist die "SVG Draw" Anwendung von Adobe die man unter folgendem Link findet:

SVG Draw als Beispiel für ein interaktives SVG