SVGの基本(ベクター画像を描く)

このレッスンでは、SVGタグを使ったベクター画像の基本を学び、拡大しても粗くならない図形を描けるようになることを目標にします。「SVG 基本 使い方」で調べている方向けの内容です。

<svg>タグを使うと、拡大しても粗くならない「ベクター画像」をコードで直接描けます。<circle>や<rect>のようなタグで図形を組み合わせます。アイコンやシンプルなイラストによく使われます。

サンプルコードでは、<rect>で四角形、<circle>で円、<text>で文字をそれぞれ座標を指定して配置しています。viewBox属性はSVG内部の座標系を定義するもので、この範囲の中に図形を自由に配置できます。

初心者がよくつまずくのが、SVG内部の座標系(viewBox)と実際の表示サイズ(width・height)の関係です。座標系はあくまで内部の設計図のようなもので、実際にどのくらいの大きさで表示されるかは別途指定する必要があります。

写真のような画像ファイル(JPEGなど)は拡大するとぼやけますが、SVGは数式で図形を表現しているため、どれだけ拡大しても綺麗なままです。ロゴやアイコンにSVGが好まれるのはこのためです。