SVG Tutorial

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" style="fill:red;" />
  <svg x="10" y="10" width="100" height="100">
    <rect x="0" y="0" width="100" height="100" style="fill:blue;" />
  </svg>
</svg>
      

Das svg-Element kann weitere svg-Elemente beinhalten, d.h. Sie können innerhalb einer Grafik weitere Grafiken definieren.
Um diese "internen" Grafiken korrekt zu platzieren, können sie, zusätzlich zu den Attributen width und height, die Attribute x und y verwenden. Diese legen die x,y-Koordinate der linken, oberen Ecke der inneren Grafik fest.

Im obigen Beispiel wird eine Grafik der Größe 200 x 200 Pixel definiert.

In dieser Grafik ist ein rotes Rechteck derselben Größe definiert, d.h. es füllt die gesamte Grafik aus.
Weiterhin beinhaltet die Grafik eine zweite, innere Grafik der Größe 100 x 100 Pixel. Der linke obere Eckpunkt dieser zweiten Grafik ist im Koordinatenpunkt 10,10 der äußeren Grafik definiert, d.h. sie wird jeweils 10 Pixel vom oberen und vom rechten Rand der ursprünglichen Grafik dargestellt.

Diese innere Grafik wird durch ein blaues Rechteck ausgefüllt.
Beachten Sie, dass der linke obere Eckpunkt des blauen Rechtecks, mit den Koordinaten 0,0 bestimmt ist. Dieser Koordinatenpunkt wird relativ zur inneren Grafik interpretiert. Das blaue Rechteck wird also am Punkt 0,0 der inneren Grafik, gleichbedeutend mit dem Punkt 10,10 der äußeren Grafik, dargestellt.

Rechtecke sind Thema im Kapitel Grundformen.