SVG の一例

SVG は XML で書かれています。

SVG インスタンス

以下の例は、簡単な SVG ファイルの例です。SVG ファイルは .svg という拡張子で保存する必要があります：

<?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>

例を確認（SVG をサポートするブラウザのみで使用できます）

（SVG 源コードを確認するには、この例を開き、ウィンドウ内で右クリックして「ソースを表示」を選択してください。）

コードの説明：

最初の行には XML 声明が含まれています。standalone 属性に注意してください。この属性は、SVG ファイルが「独立」であるか、外部ファイルを参照しているかを指定します。

standalone="no" は、SVG 文档が外部ファイルを参照することを意味しており、ここでは DTD ファイルです。

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

SVG コードは <svg> 要素で始まり、開始タグ <svg> と終了タグ </svg> を含みます。これはルート要素です。width と height 属性はこの SVG ドキュメントの幅と高さを設定できます。version 属性は使用される SVG 版本を定義し、xmlns 属性は SVG ナーミングスペースを定義します。

SVG の <circle> は円を作成するために使用されます。cx と cy 属性は円の中心の x と y 座標を定義します。これらの属性を省略すると、円点は (0, 0) に設定されます。r 属性は円の半径を定義します。

stroke と stroke-width 属性は形状の輪郭の表示方法を制御します。ここでは、円の輪郭を 2px 厚、黒い枠に設定しています。

fill 属性は形状内の色を設定します。ここでは、塗り絵色を赤に設定しています。

終了タグは SVG 要素とドキュメント自体を閉じる役割を果たします。

注記：すべての開始タグには終了タグが必要です！