Ein SVG-Beispiel

SVG wird in XML geschrieben.

SVG-Beispiel

Das folgende Beispiel ist ein einfaches Beispiel für ein SVG-Dokument. SVG-Dateien müssen mit der .svg-Endung gespeichert werden:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

Beispiel anzeigen (nur für Browser, die SVG unterstützen)

(Wenn Sie den SVG-Quellcode betrachten möchten, öffnen Sie diesen Beispiel, klicken Sie dann mit der rechten Maustaste im Fenster und wählen Sie "Quellcode anzeigen".)

Code-Explainierung:

Die erste Zeile enthält die XML-Deklaration. Beachten Sie das Attribut standalone! Dieses Attribut legt fest, ob diese SVG-Datei "independent" ist oder eine Referenz auf eine externe Datei enthält.

standalone="no" bedeutet, dass das SVG-Dokument eine externe Datei referenziert - hier ist es die DTD-Datei.

Die zweiten und dritten Zeilen verweisen auf diese externe SVG DTD. Diese DTD befindet sich unter "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". Diese DTD befindet sich beim W3C und enthält alle erlaubten SVG-Elemente.

Das SVG-Code beginnt mit dem <svg>-Element, einschließlich des Öffnungstags <svg> und des Schließtags </svg>. Dies ist das Wurzelelement. Die width- und height-Attribute können die Breite und Höhe dieses SVG-Dokuments einstellen. Das version-Attribut kann die verwendete SVG-Version definieren, das xmlns-Attribut die SVG-Namespace.

Das SVG <circle> wird verwendet, um einen Kreis zu erstellen. Die cx- und cy-Attribute definieren die x- und y-Koordinaten des Mittelpunkts des Kreises. Wird ein dieser Attribute ignoriert, wird der Kreispunkt auf (0, 0) gesetzt. Das r-Attribut definiert den Radius des Kreises.

Die stroke- und stroke-width-Eigenschaften bestimmen, wie der Umrandungsbereich der Form dargestellt wird. Wir setzen den Umrandungsbereich des Kreises auf 2px breit und eine schwarze Kante.

Die fill-Eigenschaft legt die Farbe innerhalb der Form fest. Wir setzen die Füllfarbe auf Rot.

Der Schließtag schließt SVG-Elemente und das Dokument selbst ab.

Anmerkung:Alle geöffneten Tags müssen mit Schließtags versehen sein!