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

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Keine weiterführenden Beiträge.