svgのviewBoxでいつもいつもドハマリするので備忘録を残すことにした

svgのviewBoxでいつもいつもドハマリするので備忘録を残すことにした

html5からインラインで使えるようになったsvgですが、viewBoxのせいでいつもいつもドハマリします。いまいちviewBoxの感覚がつかめきれていないせいです。

だから、svgについて一度整理しながら、viewBoxについて学ぶことにしました。

svgはxmlだということ

インラインで使えるようになったとは言え、svgはそもそもhtmlではありません。<svg>タグ内で使っているのはhtml空間とは別空間になるということです。

<html>空間内に<svg>空間という別のものが存在している状態です。

html空間とsvg空間

イメージ的には上のような感じだと思います。
<svg>~</svg>で作られた場所は<html>から切り離された別空間だということを意識しなきゃです。

そして、その別空間こそxml世界。

widthとheightが大切だった

さて、<svg>で区切られたところは<html>ではなくなっていたという事実がわかったので、次の段階です。

通常、<html>でインライン画像つっこむと、widthとheightを設定しなくても画像のサイズに合わせて勝手に表示されます。<svg>は別空間を作るという認識がなかったために、頭の中で画像と同じようにそのまま表示されるだろうという思い込みが働いていました。

<img>要素としてsvgを利用するときは、サイズ指定していなくても使えていたということが、この思い込みを強くしていたようにも思います。
今、考えれば、<img>はhtml空間、<svg>はxml空間で別物なので一緒のわけがないんですが……

そんなわけで、<svg>で区切られた部分はhtml空間内にある一つのブロックであると捉え、しっかりとwidthとheightの設定をしてあげなければいけなかったんです。

viewportとviewBoxの違い

viewportがあるせいでviewBoxが余計に何のことなのかよくわからなくなってます。vwやvhの単位を確認した際に、viewportのことが出たのでおさらいしておきます。

viewportとは何か

viewportのイメージレスポンシブなレイアウトを作るときに欠かせないviewportですが、viewportというのは表示領域のことです。スマホにしろ、タブレットにしろ、PCにしろ、画面上に映るそれが表示領域になります。画面外に出ていて映っていないのは表示領域の外だからです。

viewportは画面のサイズで決まります。

とはいえ、スマホやタブレットだと実際の解像度よりも小さくなります。だから、下手にviewportでwidth指定をしてしまうのではなく、width=device-widthを使うことになります。これは、いろいろな画面サイズがあるため、それぞれの端末ごとにviewportは調整してもらおうという狙いもあります。

viewBoxとは何か

で、<svg>に出てくるviewBoxです。viewportと同じように、どうやらviewBoxも表示領域を示しているようです。viewportと違うのは、画面サイズなどによる指定ではなく、相対的な指定になるということです。

相対的?
は?

相対的になってしまうには理由がありました。
viewBoxは

の形で指定しますが、このときのwidthとheightには単位がありません

そう、単位がないのです。
<html>みたいに「暗黙の理解として実はpx単位なんだぜ!」ということもなく、本当に単位がないんです。これも混乱していた一因のようです。

改めてviewBoxによる表示領域について考える

viewboxイメージ文章だけ読んでいてもチンプンカンプンだったので、実際に図に起こしてみました。

xyの座標平面上に起こしたので、ニガテな人はニガテかもしれませんが、ご勘弁を。

viewBoxで指定されるx座標とy座標は、viewBoxがつくる領域の中における任意の原点ということのようです。

任意の原点(x, y)を左上に置き、左下にできる点(x + width, y + height)とを結んでできる対角線をもつ長方形が、いわゆるviewBoxの表示領域なのでした。

いつもいつもviewBoxでわけがわからなくなる原因は、このxy軸の原点にあたる位置と表示領域がクシャクシャになっちゃうせいにあったようです。さらにこれに加えて、<svg>のサイズをしっかり考えていなかったことも拍車をかけていたように感じました。

わかってきたところでLet’s Try!!

ようやくスタート地点に立てたように思うので、試してみたいと思います。

ここまで改めて理解するのにけっこう時間を食いました。自分の理解や学んだことを整理しながらだと余計に、ですね。けれど、立ち止まりません。試したいんです。

以下のような、円と長方形を合わせたしょうもないソースを用意しました。テストのためにviewBoxは指定しておりません。

なお、今回のテストでは<svg>のサイズをwidth=”150″ height=”150″で固定します。

viewBox=”0 0 150 150″で表示してみる

この場合、高さが円のサイズと長方形のサイズの合計で250になるので、長方形の部分が完全に表示されません。

viewBox=”-100 -100 150 150″で表示してみる

この場合だと、上の円の部分が若干表示されるくらいになってしまいました。

viewBox=”50 50 150 150″で表示してみる

これだと、下側がちゃんと長方形になっていたんだというのがわかります。

viewBox=”0 0 300 300″で表示してみる

下側の長方形がようやく表示できました。

viewBox=”-100 -100 300 300″で表示してみる

右下によりましたねぇ…

viewBox=”50 50 300 300″で表示してみる

今度は右上ですね……

試してみた結果

こうやってviewBoxの値を変えて並べてみると、どんなふうに表示されていくのかの違いがよくわかりました。今後svgを使うときには何に気をつけなければならないのか、viewBoxで迷子にならないようにするにはどうすればいいか、の判断もできるようになった気がします。

後は、修練あるのみだと思うので、これからもバンバン、インラインsvgを使っていこうと思ったのでした。


コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)

Back to Top