SVGマスターへの道

<svg> タグ - SVGの入れ物

SVGの図形や線は、すべてこの <svg> というタグの中に書きます。このタグで囲まれた部分が、SVG画像が表示される領域（キャンバスのようなもの）になります。

<svg>
  <!-- この中に、円や四角などの図形を書いていきます -->
</svg>

これだけだと、まだ何も表示されません。なぜなら、SVGの「入れ物」の大きさを決めていないからです。

width と height 属性 - 見た目のサイズを決める

<svg> タグに width（幅）と height（高さ）属性を指定することで、SVGがウェブページ上でどれくらいの大きさで表示されるかを決めます。

<svg width="200" height="100" style="border: 1px solid black;">
  <!-- 幅200ピクセル、高さ100ピクセルの領域が確保されます -->
</svg>

上の例では、幅200ピクセル、高さ100ピクセルの黒い枠線がついた領域が作られます（まだ中身は空っぽですが）。このサイズは、px（ピクセル）だけでなく、%（パーセント）やem（文字サイズ基準）など、CSSで使える単位で指定できます。

• width="200" や width="200px": 幅を200ピクセルに。
• width="100%": 親要素の幅いっぱいに。レスポンシブにしたいときによく使います。
• width="10em": 現在のフォントサイズの10倍の幅に。

もし width や height を指定しないと、SVGの種類やブラウザの解釈によってデフォルトのサイズ（例えば幅300px、高さ150pxなど）になったり、中身に合わせて自動調整されたりしますが、基本的には明示的に指定するのがおすすめです。

viewBox 属性 - SVG内部の「魔法の窓」

ここからがSVGの面白いところ！ viewBox 属性は、SVG内部の座標系と、その中で「見える範囲」を定義する、とても強力な仕組みです。「ビューボックス」とは、SVGコンテンツを覗き込む「窓」のようなものだと考えてください。

viewBox は4つの数字で指定します: "min-x min-y width height"

<svg width="200" height="100" viewBox="0 0 200 100">
  <!-- ... -->
</svg>

• min-x: 窓の左上のX座標（SVG内部座標系での値）
• min-y: 窓の左上のY座標（SVG内部座標系での値）
• width: 窓の幅（SVG内部座標系での単位数）
• height: 窓の高さ（SVG内部座標系での単位数）

ちょっと言葉だけだと分かりにくいですよね。例を使って見てみましょう。

例えば、<svg width="200" height="100"> という表示領域があるとします。ここに viewBox="0 0 50 25" と指定したとしましょう。これは、

1. SVG内部では、(0,0)の点から始まる、幅50単位、高さ25単位の世界を考えます。
2. この「幅50単位、高さ25単位」の世界が、実際の表示領域である「幅200px、高さ100px」にピッタリ収まるように拡大されます（この例では縦横ともに4倍）。

つまり、SVG内部で1単位の長さで描いたものは、画面上では4ピクセルの長さで表示されることになります。viewBox を使うと、SVG内部の座標をピクセルから切り離して考えることができるので、拡大・縮小に非常に強くなります。

インタラクティブデモ: viewBox を動かしてみよう！

下のSVGには、水色の四角と緑色の丸が描かれています。スライダーを動かして viewBox の値を変えると、SVGの表示がどのように変わるか観察してみましょう。SVGの表示領域（黒い枠）は幅400px、高さ200pxで固定されています。

試してみよう:

• min-x や min-y を変えると: 窓の位置がずれるので、中の絵がスクロールするように見えます。
• width (窓の幅) を小さくすると: 窓が狭まるので、中の絵がズームアップして見えます。
• height (窓の高さ) を小さくすると: 同様に、縦方向にズームアップします。
• width (窓の幅) や height (窓の高さ) を大きくすると: 中の絵がズームアウトして見えます。

重要なのは、viewBox の width と height のアスペクト比（縦横比）と、<svg> タグの width と height 属性のアスペクト比が異なるときです。デフォルトでは、SVGは全体が表示され、かつアスペクト比が保たれるように拡大縮小され、余ったスペースは空白になります。この挙動は preserveAspectRatio 属性で細かく制御できますが、それはまた後のページで詳しく学びましょう。

viewBox のメリット

• 座標系の柔軟性: SVG内部の図形を描くときに、ピクセル単位ではなく、自分にとって分かりやすい単位（例えば、0から100の範囲など）で座標を指定できます。
• レスポンシブデザイン: <svg> タグの width を 100% などにしておき、viewBox で内部の座標系とアスペクト比を固定しておけば、SVGは親要素のサイズに合わせてきれいに拡大縮小します。
• 再利用性: 同じSVGアイコンを異なるサイズで表示したい場合、viewBox はそのままで <svg> の width と height を変えるだけで対応できます。
• パンとズーム効果: JavaScriptと組み合わせることで、viewBox の値を動的に変更し、SVG内を移動したり拡大縮小したりするインタラクティブな表現も可能です。

SVGとCanvasの「キャンバス」サイズ設定の違い

ここでも、SVGとCanvasのちょっとした違いに触れておきましょう。

• SVG:
  • <svg> タグの width と height 属性で、ページ上での「見た目の表示領域のサイズ」を指定します。
  • viewBox 属性で、SVG内部の「論理的な座標系と見える範囲」を独立して定義します。
  • この2つのサイズ設定のおかげで、SVGはベクターグラフィックとしてきれいに拡大縮小されます。
• Canvas:
  • <canvas> タグの width と height 属性は、そのキャンバスが持つ「ピクセル数（描画バッファの解像度）」を直接指定します。
  • 例えば <canvas width="400" height="200"></canvas> と書くと、400x200ピクセルの絵が描ける画用紙が用意されます。
  • もしCSSで canvas { width: 800px; height: 400px; } のように表示サイズを変えると、元々400x200ピクセルで描かれた絵が引き伸ばされて表示されるため、画像がぼやけたりギザギザになったりすることがあります。
  • Canvasで高解像度表示に対応するには、width/height 属性値を大きくし、CSSで表示サイズを調整するなどの工夫が必要です。

SVGの viewBox は、このような解像度の問題をうまく吸収してくれる強力な仕組みと言えますね。

まとめ

このページでは、SVGの基本的な骨組みである <svg> タグと、その表示サイズを決める width, height 属性、そしてSVG内部の座標系と表示範囲を自在に操る viewBox 属性について学びました。

• <svg width="W" height="H">: ページ上に W x H の大きさのSVG表示領域を作る。
• viewBox="min-x min-y vW vH": SVG内部の座標系を定義し、(min-x, min-y) から始まる vW x vH の範囲を「窓」として切り取り、上記の W x H の表示領域にフィットさせる。

viewBox は最初は少しとっつきにくいかもしれませんが、使いこなせるとSVGの表現力が格段に上がります。デモを色々いじって、感覚を掴んでみてください。

次のページ「基本図形を描こう - 四角、丸、線」では、いよいよこのSVGの「入れ物」の中に、具体的な形を描いていきます！