SVGの例

シンプルなSVGの例

簡単なSVGグラフィックの例：

ここでSVGファイル（拡張子のSVG SVGファイルで保存された）は、次のとおりです。

SVGコード解析：

最初の行はXML宣言が含まれています。 スタンドアロンのプロパティがいることに注意してください！ この属性は、SVGファイルは、「一人で立っている」、または外部ファイルへの参照が含まれているかどうかを指定します。

この場合、DTD - スタンドアロン= "no"をSVG文書が外部ファイルへの参照を有することを意味します。

第二および第三のラインは、外部SVG DTDを参照します。 DTDは「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd」に位置しています。 DTDはすべて許容SVG要素を含む、W3Cに位置しています。

<SVG>タグと終了タグ</ SVG>を回すなど、SVGコード<SVG>要素の開始、。 これは、ルート要素です。 幅と高さは、このSVGドキュメントの幅と高さを設定することができます属性。 バージョン属性属性xmlns SVGの名前空間を定義する属性、使用するSVGのバージョンを定義します。

SVG <円は>円を作成するために使用されます。 CXとCYの属性は、円のx、y座標の中心を定義します。 これら2つのプロパティを無視した場合、ドットが（0、0）に設定されています。 rの属性は、円の半径を定義します。

ストロークとストローク幅の属性が形状のどのようにアウトラインを制御します。 私たちは、円の輪郭が広い、黒い枠を2PXに設定されています。

塗りつぶしの色プロパティは、形状内に設定されています。 私たちは、赤に塗りつぶしの色を設定します。

タグを閉じると、ルートSVG要素と文書自体を閉じます。

注：すべての開くタグは終了タグを持っている必要があります！