SVG/ Start mit SVG

Aus Wikibooks

Hello World

SVG
1.1	1.5	0.8	?	1.x	?	?

Einer alten Tradition folgend wollen wir auch hier mit dem Hello World Beispiel anfangen.

Unser Hello World Beispiel

Da jedes SVG-Dokument auch ein XML-Dokument ist, beginnen wir wie üblich mit der Einleitung "Ich bin xml" in Zeile (1.).

Dann – endlich – beginnt unser SVG-Dokument mit dem <svg>-Tag (gesprochen: Täg). Dies ist immer das erste Tag unserer Vektorgrafik. Wir teilen hier auch noch mit, dass unsere Grafik 300 Pixel breit und 400 Pixel hoch ist. Das Pixel wird hier unterstellt, da wir keine konkreten Angaben hinter den Werten 300 und 400 vorgenommen haben.

Damit wir auch etwas sehen können, wollen wir als nächstes unser Hello World ausgeben. Wir werden dies als normalen Text machen und geben dies entsprechend mit dem Tag <text> an. Der x- und y-Wert gibt schließlich an, wo unser Hello World stehen soll. Der Ursprung befindet sich oben links. Von dort geht der Interpreter 50 Pixel nach rechts und 80 Pixel nach unten um dann mit dem Zeichnen des Textes zu beginnen.

Rechts neben diesem Text sehen Sie Ihr Ergebnis.

Das Standard Koordinatensystem von SVG

[Bearbeiten] Was erfahren wir dadurch?

1. Jedes SVG-Bild befindet sich zwischen <svg> und </svg>
2. In dem SVG wird ein Namespace angegeben xmlns="http://www.w3.org/2000/svg" dies ist notwendig damit man verschiedene XML-Formate mischen kann bei SVG sind es üblicherweise XHTML, RDF und MathML es ist aber auch jedes andere XML-Format möglich solange es Sinnvoll und/oder von dem Anzeigeprogramm unterstützt wird.
3. Unsere Tags besitzen Attribute (hier dargestellt in Blau) denen Werte (Rot) zugewiesen werden.
4. Das Standard Koordinatensystem von SVG arbeitet mit der Einheit Pixel, der Nullpunkt befindet sich links oben, davon wird die X-Achse nach rechts gezählt und die Y-Achse nach unten.

[Bearbeiten] Längeneinheiten

Da wir hier mit einer Grafik arbeiten ist es durchaus nützlich zu wissen wie lang, breit oder hoch etwas ist. In einer SVG-Grafik werden diese Dimensionen standardmäßig als Pixel angegeben, so wie im oberen Beispiel width="300" zu dem selben Ergebnis kommen wir mit width="300px" wollen wir allerdings keine 300 Pixel sondern 300cm kommen wir mit width="300cm" ans Ziel.

Bedeutet das ein Zentimeter immer genau ein Zentimeter lang ist? im prinzip ja vorausgesetzt Einstellungen von Monitor und Drucker usw. sind richtig kalibriert, und es wurde im SVG das Koordinatensystem nicht verändert.

[Bearbeiten] viewBox

Ein alternatives Koordinatensystem wird mit dem Attribut viewBox festgelegt.

<?xml version="1.0"?>
<svg width="300" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,100,100">
         <text x="50" y="80">Hello World</text>
</svg>

Unser Hello World Beispiel jetzt mit viewBox

Wie können wir damit z.B. unsere verwendeten Einheiten verändern? Zum Beispiel so:

<?xml version="1.0" standalone="no"?>
<svg width="15cm" height="15cm" xmlns="http://www.w3.org/2000/svg" viewBox="0,0,15,15">
     <rect x="5" y="5" width="5" height="5"/>    
</svg>

Wir haben hier die Größe der Anzeigefläche auf 15cm x 15cm festgelegt und definieren die viewBox so dass es innerhalb des SVG so wirkt als ob die gesamte Anzeigefläche nur 15 x 15 Pixel groß ist, dadurch hat das Rechteck jetzt einen Abstand 5cm von oben, 5cm von der Seite mit einer Kantenlänge von 5cm.

Wenn alles mit rechten Dingen zugeht und Drucker oder Bildschirm korrekt mit unserem Rechteck und allem fehlerhaften Dingen dazwischen zusammen arbeiten, könnten sie die Angaben jetzt mit einem Lineal überprüfen.

[Bearbeiten] preserveAspectRatio

Die Schweiz ganz normal

Hier der Quellcode der Schweizer Flagge:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" >
<rect fill="#d81e05" height="300" width="300"/>
<rect fill="#fff" height="60" width="200" x="50" y="120"/>
<rect fill="#fff" height="200" width="60" x="120" y="50"/>
</svg>

Mittig:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">
<rect fill="#d81e05" height="300" width="300"/>
<rect fill="#fff" height="60" width="200" x="50" y="120"/>
<rect fill="#fff" height="200" width="60" x="120" y="50"/>
</svg>

Maximal an den Rand gedrängt:

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 300 300" preserveAspectRatio="xMaxYMax meet">
<rect fill="#d81e05" height="300" width="300"/>
<rect fill="#fff" height="60" width="200" x="50" y="120"/>
<rect fill="#fff" height="200" width="60" x="120" y="50"/>
</svg>

Minimal

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="300" viewBox="0 0 300 300" preserveAspectRatio="xMinYMin slice">
<rect fill="#d81e05" height="300" width="300"/>
<rect fill="#fff" height="60" width="200" x="50" y="120"/>
<rect fill="#fff" height="200" width="60" x="120" y="50"/>
</svg>

um ein neues Koordinatensystem in einem SVG zu etablieren kann man ganz einfach ein svg-Element in einem SVG-Element schachteln.

<svg viewBox="0 0 300 300" preserveAspectRatio="xMinYMin slice">
 <svg viewBox="0 0 60 200">
 </svg>
 <svg viewBox="0 0 30 30" preserveAspectRatio="xMaxYMax meet">
 </svg>
</svg>