HTMLでの SVG
HTML5 では、HTML ページに直接 SVG 要素を埋め込むことができます。
SVG を直接 HTML ページへ埋め込む
下に、簡単な SVG グラフィックの例を示します：
HTML コードは次の通り：
例
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow"
/>
</svg>
</body>
</html>
Try it Yourself »
SVG コードの説明：
- SVG 画像は <svg> 要素で始まります
- <svg> 要素の width と height 属性は、SVG 画像の幅と高さを定義します
- <circle> 要素は、円を描画するために使用します
- cx と cy 属性は、円の中心の x と y 座標を定義します。cx と cy を省略した場合、円の中心は (0, 0) に設定されます
- r 属性は、円の半径を定義します
- stroke と stroke-width 属性は、アウトラインの形状の表示方法を制御します。今回は、円形のアウトラインに 4px 緑色のボーダーを設定しています
- fill 属性は、円の内側の色を指定します。ここでは、黄色に塗りつぶしの色を設定しています
- 終了 </svg> タグは、SVG 画像を閉じます
注: SVG は XML で書かれているので、全ての要素は適切に閉じなければなりません！