SVGのviewBoxをわかりやすく紐解く
11月も後半になり今年も残すところあと僅かとなってきました。
こんにちは、rockdです。
皆さんはSVG使ってますか？
はじめてSVGを使うときにイマイチよくわからないのが、viewBoxの設定です。
今回はそんなわかりづらいことで有名な（？）viewBoxについて解説していきたいと思います。
viewBoxとは？
viewBoxはsvgタグの中に記述する属性です。
viewBoxを指定することで、描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定します。
viewBoxで指定できる値は4つです。
viewBox="x, y, width, height"
x,yは左上からみたx座標とy座標の位置、そしてwidth,heightは描画エリアの幅(座標値)と高さ(座標値)です。
4つの値は、カンマもしくは半角スペースで区切って使うことができます。
サンプルを使って解説
viewBox属性について言葉ではなんとなく理解できても、実際にどのように表示されるのかあまりピンとこないかもしれません。
ここからはわかりやすくサンプルを使って説明していきます。
まずはグレーの背景の上に青い円を作ります。
|
1 2 3 |
<svg width="400" height="400" viewBox="0, 0, 400, 400" style="background: #eee"> <circle cx="50" cy="50" r="50" fill="blue" /> </svg> |
svgタグに注目してください。ここに記述しているwidthとheightは、ブラウザ上で見える実際の表示エリアになります。
今回は幅と高さを400で指定しました。
（※表示エリアのことをViewportとも言いますがここでは「表示エリア」で統一します）
（※わかりやすくするため、svgタグの名前空間を指定する部分を取り除いています）
circleは円を描くために使うタグです。
cx/cyは円の中心を決めるx座標とy座標の値、rは円の半径です。
今回はぴったりと左上にくるように配置しています。
さてviewBoxはどうなっているでしょうか。
viewBox="0, 0, 400, 400"
xとyは0のまま、widthとheight部分はsvgの幅と高さと同じく400です。
この設定だと描画エリアは表示エリアとぴったりと重なるので、違和感のない大きさで表示されています。
viewBoxの幅と高さは表示エリアの幅と高さに揃うようにすると、1pxを1座標として考えることができるので扱いやすいです。
viewBoxの大きさを変更してみる
では、viewBoxの大きさを変更してみましょう。
|
1 2 3 |
<svg width="400" height="400" viewBox="0, 0, 200, 400" style="background: #eee"> <circle cx="50" cy="50" r="50" fill="blue" /> </svg> |
viewBox="0, 0, 200, 400"
widthを200にしてみました。
さて、表示はどうなるでしょうか。
最初と比べて円の位置が変わりました。
これは円が動いたのではなく、描画エリアの幅が狭くなったためです。
見やすくするために描画エリアの範囲を線で囲ってみます。
200と400なので縦長の描画エリアになります。
エリアが中央に表示されているのはpreserveAspectRatioという属性のデフォルトの指定が入っているためです。
デフォルトの場合はpreserveAspectRatio="xMinYMin meet"となり、縦横比を変えず左右上下が中央にくるようになっています。
この値をpreserveAspectRatio="none"のように指定すると見た目はこのようになります。
表示エリアに収まるように描画エリアが変形されて縦横比が変わってますね。
次にこのように値を変更してみます。
|
1 2 3 |
<svg width="400" height="400" viewBox="0, 0, 200, 200" style="background: #eee"> <circle cx="50" cy="50" r="50" fill="blue" /> </svg> |
viewBox="0, 0, 200, 200"
さて、どうなるでしょうか。
結果は下記のようになります。
最初に表示した時と比べて円が大きくなりました。
これは円の大きさは変えてませんが、高さと幅の比が同じなので表示エリアに合わせて拡大された形になります。
viewBoxをずらしてみる
では次にviewBoxの座標を変更してみます。
大きさは最初の状態に戻しておきます。
|
1 2 3 |
<svg width="400" height="400" viewBox="50, 0, 400, 400" style="background: #eee"> <circle cx="50" cy="50" r="50" fill="blue" /> </svg> |
viewBox="50, 0, 400, 400"
x座標を50にしてみました。
さて、表示はどうなるでしょうか。
円が半分に切れました。
これは描画エリアの位置が変わったからです。
ではy座標も変更してみます。
|
1 2 3 |
<svg width="400" height="400" viewBox="50, 50, 400, 400" style="background: #eee"> <circle cx="50" cy="50" r="50" fill="blue" /> </svg> |
viewBox="50, 50, 400, 400"
上の図を理解している人ならすぐにわかりますね。
viewBoxのy座標が下にずれるので表示はこのようになります。
円の原点とviewBoxの左上の点の座標が一致しているので、左上を中心に円が描画されています。
もちろん座標にはマイナスの座標を入れることも可能です。
viewBox="-50, 50, 400, 400"
x座標がマイナスなので描画エリアが左側に動きます。
結果はこのようになります。
まとめ
ここまでviewBoxの動きについて解説してきました。
viewBoxを理解するポイントを下記にあげてみます。
- viewBox="x, y, width, height"のx,yは描画エリアの左上の座標になり、width,heightによって右下の座標が決まる。
- viewBoxの幅と高さが表示エリアの幅と高さと異なる場合、比によって拡大・縮小される場合がある。
- viewBoxの座標を変更した場合、中の要素の座標は変わらず描画位置が変わるので見え方が変わる。
今までviewBoxをよくわからずに使っていた人もこの記事を見て少しでも理解が深まればうれしいです。
viewBoxをマスターし、SVGを使いこなせるように頑張りましょう！
参考サイト
[SVG] viewBoxについての考察
SVGデータと座標系
Understanding the SVG viewBox
