svgタグ -ベクターグラフィックスを描画する｜HTML辞典
<svg>タグとは？
<svg> タグは、ベクターグラフィックス（SVG: Scalable Vector Graphics）を描画するためのタグです。
ピクセルではなく数式で画像を描画するため、拡大縮小しても画質が劣化しません。
基本情報
コンテンツモデル
フローコンテンツ（Flow Content）、フレージングコンテンツ（Phrasing Content）、エンベッダブルコンテンツ（Embedded Content）。
閉じタグの有無
<svg> は 開始タグ（<svg>）と閉じタグ（</svg>）の両方が必要 です。
基本的な記述方法
<svg width="200" height="100">
<rect x="10" y="10" width="180" height="80" fill="blue"></rect>
</svg>
使用できる主な属性
<svg> タグには以下の属性があります。
| 属性名 | 説明 | 例 |
|---|---|---|
width | 描画領域の幅（px） | <svg width="200"> |
height | 描画領域の高さ（px） | <svg height="100"> |
viewBox | 座標系の範囲を指定 | <svg viewBox="0 0 200 100"> |
xmlns | 名前空間（省略可能） | <svg xmlns="http://www.w3.org/2000/svg"> |
CSSを使ったデザイン変更
<svg> のデザインは CSS でも変更可能です。
svg {
border: 2px solid black;
background-color: lightgray;
}
適切な使用例
✅ 矩形（四角形）を描画する
<svg width="200" height="100">
<rect x="10" y="10" width="180" height="80" fill="blue"></rect>
</svg>
✅ 円を描画する
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red"></circle>
</svg>
✅ 線を描画する
<svg width="200" height="100">
<line x1="10" y1="10" x2="190" y2="90" stroke="black" stroke-width="2"></line>
</svg>
✅ テキストを描画する
<svg width="200" height="100">
<text x="10" y="50" font-size="20" fill="black">Hello SVG</text>
</svg>
適切でない使用例（誤った使い方）
❌ <svg> の中に通常の HTML を記述すると無効になる
<!-- NG: <svg> 内に <p> を記述 -->
<svg width="200" height="100">
<p>このテキストは表示されません</p>
</svg>
✅ 正しい書き方（<text> を使用）
<svg width="200" height="100">
<text x="10" y="50" font-size="20" fill="black">Hello SVG</text>
</svg>
<svg>タグと他のタグの違い
| タグ | 役割 | 特徴 | 適切な用途 |
|---|---|---|---|
<svg> | ベクターグラフィックスを描画 | XML ベースで記述 | ロゴ、アイコン、グラフ |
<canvas> | 動的な描画を行う | JavaScript で制御 | アニメーション、ゲーム |
<img> | 画像を表示 | 既存の画像ファイルを表示 | 静的な画像 |
使用上の注意点
✅ <svg> のサイズは width と height で指定する
viewBoxを使用すると拡大縮小が容易になる。
✅ JavaScript で動的に変更できる
<svg>内の要素を JavaScript で変更可能。
✅ <canvas> との違いを理解する
<svg>は静的な描画 に適し、<canvas>は動的な描画 に適している。
関連タグ
まとめ
<svg> タグは、HTML文書内で ベクターグラフィックスを描画するためのタグ です。width / height を適切に設定し、ロゴやアイコン、グラフなどの描画に活用できます。
