HTML5では、あなたが直接あなたのHTMLページにSVG要素を埋め込むことができます。
直接HTMLページに埋め込みSVG
ここでは、単純な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 Code explanation:
- SVG画像はで始まり<svg>要素
- 幅と高さ属性<svg>要素は、SVG画像の幅と高さを定義します
- <circle>要素は、円を描画するために使用されます
- CXとCYの属性は、円の中心のx、y座標を定義します。 CXとCYを省略した場合、円の中心に設定されている(0, 0)
- r属性は、円の半径を定義します
- ストロークとストローク幅の属性は、形状のアウトラインの表示方法を制御します。 私たちは、4PX緑色の「国境」に、円のアウトラインを設定しました
- fill属性は、円の内側の色を指します。 私たちは、黄色に塗りつぶしの色を設定しました
- 閉じる</svg>タグは、SVG画像をクローズ
注意：SVGはXMLで書かれているので、すべての要素が適切に閉じなければなりません！