前の記事でsvgのviewBoxとはどんなイメージかを見てきました。次はviewBoxで「座標」「width」「height」を設定した基本的な5パターンを検証してみます。
検証で使用するsvg（幅200px、高さ200px）※他の検証と同じsvgです
svgの他ページと同じ検証用svgの説明です。不要な方は読み飛ばしてくださいm(__)m
検証用に下記のような図形を使用します。
どの部分が抜き出されているか、拡大・縮小はどうなっているか、見た感じで分かりやすいように考えました。下記をご覧ください。一通り説明します。
- SVGの幅・高さはともに200px
- 4色の正方形。サイズは全て同じで幅100×高さ100
- 左上に赤色の正方形（座標は x=0, y=0）
- 右上に青色の正方形（座標は x=100, y=0）
- 左下に黄色の正方形（座標は x=0, y=100）
- 右下に黒色の正方形（座標は x=100, y=100）
- 白い縦線・横線を10間隔で格子状の白い縦線・横線（各19本）
svgソースを見る[クリックすると開きます]
３．viewBoxを検証
viewBoxの設定の仕方と意味を見ておきます。viewBox=”x y width height”と設定しますが、区切りは半角スペースでも半角カンマでもどちらでも良いようです。本記事では半角スペースで書きます。各値、そのままの意味ですが、一つずつ見ておきましょう。
- x・・・左上の x座標
- y・・・左上の y座標
- width・・・幅
- height・・・高さ
21件の検証結果から分かったこと
▼こちらでviewBoxに関して21件の検証をしています。その中で基本となる5パターンをピックアップし図で説明します。
前の記事でsvgのviewBoxで余白ができるイレギュラーなケースを検証してみました。それでは、最後にviewBoxで「座標」「width」「height」を設定し検証した21パターンをいくつか見ていきます。 目次（SV …
図での説明
まず、svgの中で描かれた図に座標を加えます。y軸が下向きに正（プラス）ということ以外は注意点はありません。
説明に使用する図の条件
実例から見てみるのが一番分かりやすいので、下記条件で説明します。
SVGの属性
- width属性は200px、height属性は200px
SVG内に記述した図形
- 正方形4つと白色の縦線と横線各19本
- 正方形のサイズは4つとも同じで幅100、高さ100
- 赤色の正方形の左上の座標は（x=0, y=0）
- 青色の正方形の左上の座標は（x=100, y=0）
- 黄色の正方形の左上の座標は（x=0, y=100）
- 黒色の正方形の左上の座標は（x=100, y=100）
- 白色の縦線と横線は端から端まで引いている。間隔は10で格子状に引いている
※白線は図のサイズを分かりやすくするために引いています
viewBox=”50 50 200 200″の場合
それでは、viewBoxを図に対して「右に50、下に50」平行移動した場合を見てみましょう。
viewBox=”50 50 200 200″は、上図の透けたオレンジの部分を指しています。座標でいうと（50, 50）から（250, 250）の正方形です。
※おさらい：viewBox=”x座標 y座標 幅 高さ”
そして、このオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます（実際に表示される図）。今回はviewBoxのサイズも幅200px、高さ200pxなので、拡大縮小は発生せずviewBox（オレンジ部）を抜き取った画像がそのまま表示されます。実際に下に描きましたのでご覧ください。
要素の検証を見ると白の背景（余白）も図として表示されているのが分かります。
viewBox=”-50 -50 200 200″の場合
次はマイナス方向で考えてみましょう。上と同様に考えると下記のようになると推測できます。
viewBox=”-50 -50 200 200″は、上図の透けたオレンジの部分を指しています。座標でいうと（-50, -50）から（150, 150）の正方形です。
※おさらい：viewBox=”x座標 y座標 幅 高さ”
先ほどと同じ理由で拡大縮小は発生せずviewBox（オレンジ部）を抜き取った画像がそのまま表示されます。同様に図を描きましたのでご覧ください。
先ほどと同じように白の背景（余白）も図として表示されているのが分かります。
さて、viewBox=”0 0 200 200″の座標部分（赤字）を変更するとどうなるかは掴めてきました。それではもう一つの要素である幅・高さを変更してみましょう。シンプルにするために幅・高さの部分の値のみ変更してみます。
viewBox=”0 0 100 100″の場合
まずは、左上の座標はそのままで、viewBoxのサイズを図の半分にしてみましょう。
viewBox=”0 0 100 100″は、上図の黒い枠線の部分を指しています。座標でいうと（0, 0）から（100, 100）の正方形です。
※おさらい：viewBox=”x座標 y座標 幅 高さ”
そして、この黒い枠線部分の図をsvgの幅200px、高さ200pxの領域に表示させます（実際に表示される図）。今回はviewBoxのサイズが幅100px、高さ100pxなので、幅200px、高さ200pxに拡大されて画像が表示されます。つまり、幅200px、高さ200pxの赤い正方形が表示されます。
文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。
白線の間隔が明らかに広くなっています。幅・高さともに2倍に拡大されています。
この結果からviewBoxがsvgより小さい場合、中の図形は拡大されることがわかりました。
viewBox=”0 0 400 400″の場合
次に、viewBoxのサイズを図の2倍にしてみましょう。左上の座標はそのままです。
viewBox=”0 0 400 400″は、上図の透けたオレンジの部分を指しています。座標でいうと（0, 0）から（400, 400）の正方形です。
※おさらい：viewBox=”x座標 y座標 幅 高さ”
そして、このオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます（実際に表示される図）。今回はviewBoxのサイズが幅400px、高さ400pxなので、幅200px、高さ200pxに縮小されて画像が表示されます。つまり、図全体が1/4サイズになり、残りの3/4は空白になります。
文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。
図全体が1/4に縮小されているのが分かります。
この結果からviewBoxがsvgより大きい場合、中の図形は縮小されることがわかりました。
さて、viewBox=”0 0 200 200“のサイズ（赤字）を変更するとどうなるかも掴めてきました。それでは最後に座標・幅・高さを同時に変更してみましょう。
viewBox=”50 50 100 100″の場合
最後に座標・大きさどちらも変更した場合を見てみましょう。
viewBoxを図に対して「右に50、下に50」平行移動し、viewBoxのサイズを図の半分にしました。
viewBox=”50 50 100 100″は、上図の透けたオレンジの部分を指しています。座標でいうと（50, 50）から（150, 150）の正方形です。
※おさらい：viewBox=”x座標 y座標 幅 高さ”
今までと同様にこのオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます（実際に表示される図）。今回はviewBoxのサイズが幅100px、高さ100pxなので、幅200px、高さ200pxに拡大されて画像が表示されます。
文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。
パッと見は元の図と違いがありません。ですが、白線の間隔が広くなっています。幅・高さともに2倍に拡大されています。
元の図と並べると違いがよく分かります。下記をご覧ください。右（下）が元の図です。白線を見ると左（上）の図の方が拡大されているのが分かるかと思います。
以上で、座標・サイズを変更するとどのような感じになるか理解できてきました。
今見てきた5パターンでその他のパターンも説明がつくか20パターン程確認してみます。
svgの「viewBox」余白がある場合どうなる？
次はsvgの「viewBox」の余白があるパターンを見てみます。
前の記事でsvgのviewBoxの基本パターンを5つ見てきました。他に少しイレギュラーなパターンがあるので、今回はそちらを図解しながら見ていきます。 ▼ 一つ前の記事はこちらから svgで図を描くとき viewBox・w …
スポンサーリンク
