HTML要素 ・ メディア
<svg>
ベクター画像
線や図形を数式で表す、拡大しても劣化しない画像（SVG）を、HTMLの中に直接書く要素です。アイコンや図によく使います。
01
サンプルコード
HTML
1<svg width="120" height="120" viewBox="0 0 120 120" role="img" aria-label="コーヒーカップ">
2 <rect x="20" y="40" width="60" height="55" rx="8" fill="#b68235"/>
3 <path d="M80 52 h10 a12 12 0 0 1 0 24 h-10" fill="none" stroke="#b68235" stroke-width="6"/>
4 <path d="M38 18 q6 8 0 16 M58 18 q6 8 0 16" stroke="#a19c98" stroke-width="3" fill="none"/>
5</svg>
02
実行結果
ブラウザでの表示
03
解説
svg は、図形を座標と命令で描くベクター形式の画像です。どれだけ拡大してもくっきり表示され、ファイルサイズも小さくなります。
viewBox は描画に使う座標の範囲です。width・height を変えても、この座標系のまま拡大・縮小されます。
HTMLに直接書いたSVGは、CSSで色を変えたり、アニメーションさせたりできます。fill="currentColor" にすると、周りの文字色と同じ色になります。
04
応用例・注意点
よく使う図形の要素
| 要素 | 説明 |
|---|---|
rect | 四角形（rx で角丸） |
circle | 円 |
line / polyline | 直線 / 折れ線 |
path | 自由な線（d 属性に命令を書く） |
text | 文字 |
g | 図形のグループ |
文字色に合わせたアイコン
fill や stroke に currentColor を指定すると、親要素の color が使われます。
HTML
1<a href="/search" class="icon-link">
2 <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
3 <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/>
4 </svg>
5 検索
6</a>
CSS
1.icon-link {
2 color: #7d5411;
3}
4.icon-link:hover {
5 color: #b68235;
6}
注意点
- 01意味のあるSVGには role="img" と aria-label を、装飾だけのものには aria-hidden="true" を付けます。
- 02写真のような複雑な画像には向きません。写真は JPEG や WebP を使います。