【SVG】svgのviewBox属性？カメラで写真を撮ることと比較して簡単理解！

前の記事でsvgをcssの「width」「height」で調整するパターンを見てきました。次はviewBoxを見ていくのですが、まずイメージから見ていけたらと思います。「viewBox」はカメラで写真を撮るときと比べながらイメージすると理解しやすいかなと思います。座標図なども交えながら説明できればと思います。

スポンサーリンク

ざっくりのイメージはカメラ（写真）

少し例外部分がありますが、カメラ（写真）をイメージすると理解しやすいです。まずは、写真を撮る流れを見てみましょう。

写真を撮る流れ

①上のような景色が目の前に広がっています
②カメラを持っていたので、写真を撮ります

③上の黒枠部分の写真を撮ります

④写真が撮れました

SVGと対比

【写真を撮る流れ】の①「目の前に広がる景色」はsvgタグの中で描かれた図（rectタグやcircleタグ等々）に該当します。実際のsvgソースを見た方がイメージは付きやすいかと思います。下記のような「4つの正方形でできる正方形」を例に見てみましょう。

下のソースがこの正方形を描くためのsvgです。「rect」タグで書かれたものが図形になります。それぞれ該当する正方形の色（太字）で書きました。この色付き太字の部分が「目の前に広がる景色」にあたります。

<svg class="square" width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- 赤色の正方形 -->
  <rect x="0" y="0" width="100" height="100" fill="red"></rect>
   <!-- 青色の正方形 -->
  <rect x="100" y="0" width="100" height="100" fill="blue"></rect>
  <!-- 黄色の正方形 -->
  <rect x="0" y="100" width="100" height="100" fill="yellow"></rect>
  <!-- 黒色の正方形 -->
  <rect x="100" y="100" width="100" height="100" fill="black"></rect>
</svg>

viewBoxには座標も関わってくるので、「目の前に広がる景色」に座標を書き加えてみます。

svgの中に書かれた図はX座標＝０、Y座標＝０に描かれています（以降、X座標とY座標は（x, y）という形で書きます）。

次に進みます。

【写真を撮る流れ】の③「上の黒枠部分」はviewBoxに該当します。先ほどと同様に分かりやすくするめに座標を書き加えます。

書き加えた座標を見ると「上の黒枠部分」（viewBox）は、左上の座標は（20, 100）です。そして右下の座標が（300, 300）なので幅が280、高さが200と分かります。
これを実際にviewBoxで書くと「viewBox=”20 100 280 200″」となります。

それでは、viewBoxに設定できる値を説明します。viewBoxには「左上のx座標・y座標」そして「viewBoxの幅・高さ」の4つが指定できます。指定方法は「viewBox=”x座標 y座標 幅 高さ”」です。よって、今回の場合は先ほど書いたとおり「viewBox=”20 100 280 200″」となります。

svgで検証

では、少し検証してみましょう。先ほど「viewBox=”20 100 280 200″」となると書きましたが、本当かどうか svg で確認してみましょう。

まずは、svgで「目に見える景色」と「撮影した部分」を作ります。実際の景色をsvgで描くのは難しいので、オレンジの長方形で代用します。「撮影した部分」は白の長方形で代用します。さらに「撮影した部分」の4角（読み：ﾖｽﾐ）が分かるように各角に黒いカギ括弧を描いておきます。

「目に見える景色」・・・幅800px、高さ533pxのオレンジの長方形
「撮影した部分」・・・幅280px、高さ200pxの白の長方形（各角に黒いカギ括弧付き）
をsvgで表現しました。再現できたかと思います。↓に実際の「目に見える景色」と「撮影した部分」がわかる画像を再度載せておきます。比較してみてください。

「目に見える景色」と「撮影した部分」をオレンジと白の長方形（各角に黒いカギ括弧付き）で代用できているかと思います。

それでは、準備した図（オレンジと白の長方形）で検証してみましょう。

「viewBox=”20 100 280 200″」で白の長方形だけ表示できるか？検証

検証用の図の説明をはさんでしまったので、「何を検証するか」おさらいしておきましょう。
まず、一番最初に「写真を撮る流れ」を見たのを覚えていますか？

「写真を撮る流れ」では、上の景色から雲の部分の写真を撮りました。

撮影した結果が↑こちらです。
ここで、景色全体の撮影したい部分（雲の部分）を指定するのがviewBoxにあたると説明しました。

ということで検証したいことは、「svgで抜き出したい箇所をviewBoxで指定すると、上の写真のように全体から一部を抜き出せるか？」になります。それでは、検証に移ります。

検証本番

↑こちらが全体図（景色）になります。
上図は「viewbox=”0 0 800 533″」とすることで全体を表示しています。このviewBoxを「viewBox=”20 100 280 200″」と変更して図の一部を抜き出せるか検証します。「viewBox=”20 100 280 200″」とは、上図の（20, 100）から幅280、高さ200の部分を抜き出したいという指定です。つまり、白の長方形（各角に黒いカギ括弧付き）の部分です。

検証結果は、見事に白の長方形（各角に黒いカギ括弧付き）だけ抜け出せました。
※図の下にオレンジの細い線が入る場合がありますが、図のサイズが縮小等で小数点になってしまったときに起きる現象です。誤差なのでスルーしてください

「svgのviewBoxの設定」と「カメラで写真を撮ること」は似ていると思いませんか？
viewBoxが少しでもイメージしやすくなれば幸いです。

viewBoxのサイズ（幅、高さ）が小さいほど拡大／大きいほど縮小される

写真で見る

まずは、写真でイメージしましょう。

基本の写真

何度も例にあげましたが、左側の雲の部分です。

この写真を基本のサイズとします。

撮影部分を小さくした

基本の写真より撮影部分を小さくしました。つまり、雲の隆起した部分を更にアップにして写真を撮ります。

基本の写真と比較するとこの雲の一部分は大きくなりました。

↑並べて確認すると基本の写真より大きいことがよく分かります。

撮影部分を小さくする（絞り込む）と、抜き出した景色の一部は大きくなる（拡大される）ということが分かりました。
つまり、viewBoxのサイズを小さくするとsvgタグの中で指定された図（rectやlineなど）は大きくなるということです。

svgで見てみると

図全体

基本の写真と同じ部分にviewBoxを指定

viewBoxを小さくした図（上の図のX、Y座標は同じで幅と高さを半分にしました）

カギ括弧（「）のサイズが大きくなっているのが分かります。写真で見ていたときと同様に次の結果となりました。
viewBoxのサイズを小さくするとsvgタグの中で指定された図（今回はカギ括弧）は大きくなる

撮影部分を大きくした

基本の写真より撮影部分を大きくしました。つまり、雲の隆起した部分を更にアップにして写真を撮ります。

基本の写真と比較するとこの雲の一部分は小さくなりました。

↑並べて確認すると基本の写真より小さいことがよく分かります。

撮影部分を大きくする（引いて撮る）と、抜き出した景色の一部は小さくなる（縮小される）ということが分かりました。
つまり、viewBoxのサイズを大きくするとsvgタグの中で指定された図（rectやlineなど）は小さくなるということです。

svgで見てみると

図全体

基本の写真と同じ部分にviewBoxを指定

viewBoxを大きくした図（上の図のX、Y座標は同じで幅と高さを2倍にしました）

カギ括弧（「）のサイズが小さくなっているのが分かります。写真で見ていたときと同様に次の結果となりました。
viewBoxのサイズを大きくするとsvgタグの中で指定された図（今回はカギ括弧）は小さくなる

まとめ

本記事ではviewBoxをカメラで写真を撮るということと比較して、イメージしやすいように書いてみました。イメージを掴む助けになっていれば幸いです。

svgの「viewBox」を検証

次はsvgの「viewBox」のいろいろな組み合わせを検証していきますが、まず基本的な５パターンについて検証・考察を行います。

 

スポンサーリンク