HTMLのSVG
SVG要素をHTMLページに直接埋め込むことができます。
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>
SVGコードの説明：
- SVG画像は<svg>要素で始まります
- <svg>要素の幅と高さの属性は、SVG画像の幅と高さを定義します
- <circle>要素は円を描くために使用されます
- cx属性とcy属性は、円の中心のx座標とy座標を定義します。cxとcyが設定されていない場合、円の中心は（0、0）に設定されます。
- r属性は、円の半径を定義します
- ストローク属性とストローク幅属性は、図形の輪郭がどのように表示されるかを制御します。円の輪郭を4pxの緑色の「境界線」に設定します
- fill属性は、円の内側の色を参照します。塗りつぶしの色を黄色に設定しました
- 終了</ svg>タグはSVG画像を閉じます
注： SVGはXMLで記述されているため、すべての要素を適切に閉じる必要があります。