SVG の例

簡単なSVGの例

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

これがSVGファイル(SVGファイルの保存とSVG拡張子)です:

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

standalone="no" は、SVG ドキュメントが外部ファイル (この場合は DTD ファイル) を参照することを意味します。

2 行目と 3 行目は、この外部 SVG DTD を参照しています。 DTD は「http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd」にあります。この DTD は W3C にあり、許可されているすべての SVG 要素が含まれています。

SVG コードは、開始タグ <svg> と終了タグ </svg> を含む <svg> 要素で始まります。これがルート要素です。幅と高さのプロパティは、この SVG ドキュメントの幅と高さを設定します。 version 属性は使用される SVG バージョンを定義し、xmlns 属性は SVG 名前空間を定義します。

SVGの<circle>を使用して円を作成します。 cx プロパティと cy プロパティは、円の中心の x 座標と y 座標を定義します。これら 2 つのプロパティを省略した場合、ドットは (0, 0) に設定されます。 r 属性は円の半径を定義します。

ストローク プロパティとストローク幅プロパティは、図形のアウトラインをどのように表示するかを制御します。円の輪郭を幅 2 ピクセルに設定し、黒い境界線を付けます。

fill プロパティは、形状内の色を設定します。塗りつぶしの色を赤に設定します。

終了タグは SVG 要素とドキュメント自体を閉じます。

すべての開始タグには終了タグが必要です。