% weist auf die URL hin, unter
% der die DTD zu finden ist
<svg>...
...</svg>
% eigentlicher Coder der SVG-
% Datei zwischen den Tags
|
Das einer SVG-Grafik zugrunde liegende Koordinatensystem ist nicht
kartesisch. Das heißt, der Ursprung O liegt in der linken oberen
Bildschirmecke.8
Außerdem ist darauf zu achten, dass die Reihenfolge der einzelnen Objekte im Code
auch der Reihenfolge bei der Bildschirmausgabe entspricht. Das heißt, dass ein Kreis von
einem Rechteck übermalt wird, sobald dieses im Quellcode hinter dem Kreis
steht.
Typische Tags sind z. B.:
- <line> (Linie)
- <rect> (Rechteck)
- <circle> (Kreis)
- <ellipse> (Ellipse)
- <text> (Text)
- <path> (Kurve)
- <image> (Bild)
- <a:audio> (Audio)
Als Beispiel sei hier ein Rechteck beschrieben. Die linke obere Ecke des Rechtecks hat die
Position 10cm/8cm, seine Breite beträgt 2.5cm und seine Höhe 3cm. Ferner sind seine
Ecken abgerundet, die Farbe Blau wird als RGB-Wert definiert sowie eine schwarze
Umrandung mit einer Dicke von 6pt festgelegt:
<rect x="10cm" y="8cm" width="2.5cm" height="3cm"
rx="3px" ry="3px"
style="fill:rgb(0,0,255); stroke:black;
stroke-width:6pt"/>
|
Auch Animationen lassen sich genauso einfach als Text eingeben. Die Animation wird als
erste Animation deklariert, soll in 5 Sekunden anfangen und 10 Sekunden dauern. Dabei
soll sich das Rechteck entlang des vorgegebenen Pfades bewegen. Schließlich wird der
Zustand angehalten bzw. »eingefroren«:
<animateMotion id="first_anim" begin="5s" dur="10s"
path="m0,0160,150" fill="freeze"/>
|
Typische Animations-Tags sind <animate>, <set>, <animateMotion>, <motionpath>,
<animateColour> oder <animateTransform>. Des Weiteren lassen sich auch Bilder als
*.png, *.jpg oder *.svg importieren. Der Tag <image> beschreibt die Position, Breite und
Höhe sowie den Dateinamen:
|