Grundlagen in SVG

Grundlagen in SVG SVG ist der neue Standard für Webgrafiken. In dieser kleinen
Einführung bekommen Sie einen Einblick in die Möglichkeiten,
und in die Arbeit mit SVG.

Bei der Entwicklung von Grafiken, speziell für das Web kommt
es oft zu Problemen, da die Grafiken nicht zu groß sein sollten.
Dadurch soll erreicht werden, das die Ladezeit einer Website nicht
zu lang wird. Dies ist doch für viele Designer ein Problem,
da Sie stark in ihrer Kunst begrenzt werden.
Die aufwendigen Grafiken werden in *.gif, *.jpg oder *.png Formate
"gepresst", was oftmals zu inaktzeptablen Grafikfehlern,
aufgrund der Kompression, führt.

Abhilfe bieten Scalable Vector Graphics, kurz SVG. SVG wurde im
September 2001 offizieller Standard des W3Cs, und sind bereits heute
stark auf dem Vormarsch.
SVG basiert auf der Datenformatsprache XML. SVG Grafiken
bestehen deshalb nur aus einem XML oder HTML ähnlichen Quellcode,
dessen Übertragung vom Server auf den Client sehr schnell von
Statten geht. Die Umsetzung vom Quellcode in eine SVG Grafik wird
dann von einem Interpreter getan, welcher als Plug-In vom Browser
geladen wird. Von Adobe (www.adobe.com/svg/viewer/install/) gibt
es einen solchen SVG Viewer.

Mit SVG lassen sich folglich Grafiken entwickeln, die um einiges
aufwendiger sind, als "normale" Grafiken, und dennoch
weniger Ladezeit benötigen.

Erste Schritte mit SVG

Nun wollen wir unsere ersten Schritte mit Scalable Vector Graphics
machen. Da SVG von dem XML Standard abgeleitet ist, ist dieses auch
in jedem SVG Dokument vorhanden.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">

<svg width="100px" height="100px">
<rect x="10" y="10" width="10"
height="10" fill="#ff0000" />
</svg>

So könnte ein einfaches SVG Dokument aussehen. Speichern Sie
dieses einfach als seite_1.svg ab, und schauen Sie sich das ganze
einfach in ihrem Browser an. Hierzu müssen Sie jedoch wie gesagt,
das SVG Plugin von Adobe installiert haben.

Haben Sie dies getan, dann müssten Sie folgendes in ihrem
Browser sehen:

Erstes SVG Dokument im Browser angeschaut

Ihr erstes SVG Dokument

Nun, der Quellcode der SVG Grafik ist eigentlich recht einfach.
In der ersten Zeile wird definiert, das es sich bei dem Dokument
um ein XML Dokument handelt, es also auf dem XML Standard basiert.
Die zweite Angabe ist der Verweis auf die DTD. In der DTD (Document
Type Definition) sind alle Elemente definiert, die innerhalb einer
SVG Grafik verwendbar sind.

Zwischen dem Element <svg></svg> befinden sich die Definitionen
für die Grafik. Das Element <svg> hat zudem noch die
Attribute width="", und height="". Mit ihnen
wird die Größe der Grafik angegeben.
Mit dem <rect /> Element wird ein Rechteck definiert, wie
Sie es sehen.

SVG Syntax

Der SVG Standard ist von XML abgeleitet, deshalb unterliegt die
Syntax von SVG sehr strengen Regeln. Diese sollten Sie auf
jeden Fall beachten, da ihre SVG Grafik sonst nicht im Browser anzuschauen
wäre.

Jedes Element muss geschlossen werden.
Wichtig bei SVG ist vor allem, das jedes verwendete Element geschlossen
wird. Hierbei gibt es zwei Möglichkeiten. Hat das Element die
Form einer Klammer um den Inhalt, dann wird es wie ein normaler
HTML Tag geschlossen. (z.B. <svg>…</svg>). Gibt es
zu dem Element jedoch kein schließendes Element, wie z.B.
der <img> Tag in HTML, dann muss er mit einem / vor der schließenden
Klammer geschlossen werden (z.B. <img src="img.svg"
/>).

Groß und Kleinschreibung
Jedes Element wird klein geschrieben, zudem müssen die Attribute
in doppelten Hochkommas " " stehen.

Grundformen in SVG

Rechtecke

Im ersten SVG Beispiel haben Sie bereits die erste Grundform von
SVG kennen gelernt, ein Rechteck. Es wird mit folgendem Code definiert:

<rect x="10" y="10" width="50"
height="50" fill="#ff0000" />

Dabei geben "x" und "y" die Position des Rechtecks
in der SVG Grafik an. x=10 bedeutet, dass das Rechteck genau 10
Pixel vom linken Rand entfernt ist. y=10 bedeutet folglich, das
das Rechteck 10 Pixel vom oberen Rand entfernt ist.
Mit den Angaben width="", und height="" wird
wiederum die Größe angegeben. Das Attribut fill=""
definiert die Farbe, mit welcher das Element gefüllt werden
soll.

Kreise

Eine weitere einfache SVG Grundform sind Kreise. Ein einfacher Kreis
kann über folgenden Code definiert werden:

<circle cx="50" cy="50" r="30"
fill="#0000ff" />

Dabei wird mit cx="", und cy="" die Lage des
Kreismittelpunktes angegeben. Wird cx, und cy jeweils auf 0 gesetzt,
dann befindet sich der Mittelpunkt des Kreises auf der rechten,
oberen Ecke der SVG Grafik.

Ein Kreis mit SVG

Ein Kreis mit SVG

Ellipse

Bei einer Ellipse müssen zwei Radien angegeben werden, der
eine Radius (wird mit rx="" angegeben) für die Rundung
von Links nach Rechts, der andere für den Rundung von Oben
nach Unten (wird mit ry="" angegeben).

<ellipse cx="50" cy="50" rx="45"
ry="20" fill="#00ff00" />

Ein Ellipse in SVG

Sie können jedoch auch Rechtecke definieren, mit abgerundeten
Ecken. Da tut man sich in so manch einem Grafikprogramm schon schwer.
In SVG muss lediglich der Radius der Abrundung angegben werden.

<rect x="10" y="10" width="50"
height="50" fill="#0000ff" rx="10"
ry="10" />

Dreiecke

Es gibt in SVG ein Befehl, mit dem man Vielecke erstellen kann.
Bei diesem Befehl werden einfach mehrere Koordinaten für Eckpunkte
angegeben. Diese Eckpunkte werden dann automatisch mit Linien verbunden.
Hier die Angabe für ein Dreieck:

<polygon points="30,30 30,60 60,60" fill="#336699"
/>

Im Browser sieht das wie folgt aus:

Ein Dreieck mit SVG

Ein Dreieck mit SVG

Die Angabe der einzelnen Punkte erfolgt immer nach dem gleichen
Schema, zuerst die x-Koordinate, dann die y-Koordinate. Auf diese
Weise könnte man beliebig viele Ecken erstellen. Das folgende
Schema soll nochmals die Koordinatengebung aus dem Beispiel deutlich
machen.

SVG - Angabe von Koordinaten für Bildpunkte
Angabe von Koordinaten für Bildpunkte


Linien

Linien gehören natürlich auch zu SVG Elementen, auch wenn
diese als letztes in dem ersten Teil des SVG Workshops behandelt
werden. Linien werden ebenfalls durch zwei Koordinatenangaben definiert.

<polyline points="30,30 60,60" stroke="#ff0000"
/>

Es werden, wie Sie sehen, zwei Koordinaten angegeben, die den Anfang,
und das Ende der Linie definieren. Würden Sie die Dritte Koordinate
aus dem Beispiel für das Dreieck angeben, hätten Sie als
Ergebnis wiederum ein Dreieck. Mit stroke="" wird die
Farbe der Linie angegeben.

Sie haben gesehen, das SVG sehr viele Möglichkeiten bereit
hält. SVG wird auch in Zukunft von sich hören lassen.

Adobe
SVG Viewer

W3C Spezifikation von SVG

This entry was posted in SVG. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *