SVG Beispiele

Einfache SVG Beispiele

Eine einfache SVG-Grafik Beispiel:

Hier ist die SVG-Datei (mit der Erweiterung SVG SVG-Datei gespeichert):

SVG - Code-Analyse:

Die erste Zeile enthält die XML-Deklaration. Beachten Sie, dass die Standalone-Eigenschaft! Dieses Attribut gibt an, ob die SVG-Datei "steht für sich allein", oder enthält einen Verweis auf eine externe Datei.

Standalone = "no" bedeutet, dass SVG Dokument einen Verweis auf eine externe Datei hat - in diesem Fall der DTD.

Die zweite und dritte Zeile verweist auf die externen SVG-DTD. Die DTD ist in "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" befindet. Die DTD ist W3C befinden, alle zulässigen SVG-Elemente enthält.

SVG-Code <svg> Element Start, einschließlich Dreh <svg> -Tag und das schließende Tag </ svg>. Dies ist das Stammelement. Höhe und Breite an die Breite und die Höhe dieser SVG-Dokument gesetzt. Version Attribut definiert die SVG-Version verwendet, xmlns Attribut der SVG-Namensraum definiert.

Der SVG <Kreis> wird verwendet, um einen Kreis zu erstellen. cx und cy Attribute definieren den Mittelpunkt des Kreises x und y-Koordinaten. Wenn Sie diese beiden Eigenschaften zu ignorieren, dann wird der Punkt auf (0, 0). r Attribut definiert den Radius des Kreises.

Schlaganfall und Schlaganfall-Breite Attribut steuert, wie die Kontur der Form. Wir Umriss des Kreises gesetzt ist breit, schwarze Ränder 2px.

Füllfarbe Eigenschaft wird in der Form festgelegt. Wir setzen die Füllfarbe auf Rot.

Closing-Tag schließt das Stamm SVG Element und das Dokument selbst.

Hinweis: Alle Öffnungs Tags müssen schließenden Tags haben!