<svg>要素は、SVGの要素であることを示します。
<svg>要素をネストする(入れ子にする)ことができません。つまり、<svg>要素の中に別の<svg>要素を記述することはできません。
次の例は長方形と円の線を描く<svg>要素の例です。
<svg width="300" height="120" stroke="red" stroke-width="3" fill="none" >
<rect x="20" y="20" width="80" height="80" />
<circle cx="160" cy="60" r="30" stroke="blue" />
</svg>
この例では、widthは<svg>要素の幅、heightは<svg>要素の高さを示します。
これで、ブラウザには次のように表示されます。
<svg>要素の属性としてよく記述されるのは以下の通りです。
属性 | 解説 | 例 |
---|---|---|
fill | 閉じた図形を塗り潰す色 | fill="none"、fill="blue" |
height | 矩形ビューポートで表示される高さ | height="100" |
stroke | 描画ペンの色 | stroke="red" |
stroke-width | 描画ペンの幅 | stroke-width="3" |
width | 矩形ビューポートで表示される幅 | widtht="100" |
viewBox | <svg>要素のビューポートの位置(x,y座標)と大きさ(幅と高さ) | viewBox="0 0 300 100" |