【SVG】svgのviewBox属性。基本的の5パターンを検証!それぞれの特徴は?

前の記事でsvgのviewBoxとはどんなイメージかを見てきました。次はviewBoxで「座標」「width」「height」を設定した基本的な5パターンを検証してみます。

目次(SVGについて複数ページ書いてます)

検証で使用する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ソースを見る[クリックすると開きます]

<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 x="100" y="0" width="100" height="100" fill="blue" />
 <rect x="0" y="100" width="100" height="100" fill="yellow" />
 <rect x="100" y="100" width="100" height="100" fill="black" />
 <!-- 線(グリッド) --> 
 <line x1="0" y1="10" x2="200" y2="10" stroke="white" />
 <line x1="0" y1="20" x2="200" y2="20" stroke="white" />
 <line x1="0" y1="30" x2="200" y2="30" stroke="white" />
 <line x1="0" y1="40" x2="200" y2="40" stroke="white" />
 <line x1="0" y1="50" x2="200" y2="50" stroke="white" />
 <line x1="0" y1="60" x2="200" y2="60" stroke="white" />
 <line x1="0" y1="70" x2="200" y2="70" stroke="white" />
 <line x1="0" y1="80" x2="200" y2="80" stroke="white" />
 <line x1="0" y1="90" x2="200" y2="90" stroke="white" />
 <line x1="0" y1="100" x2="200" y2="100" stroke="white" />
 <line x1="0" y1="110" x2="200" y2="110" stroke="white" />
 <line x1="0" y1="120" x2="200" y2="120" stroke="white" />
 <line x1="0" y1="130" x2="200" y2="130" stroke="white" />
 <line x1="0" y1="140" x2="200" y2="140" stroke="white" />
 <line x1="0" y1="150" x2="200" y2="150" stroke="white" />
 <line x1="0" y1="160" x2="200" y2="160" stroke="white" />
 <line x1="0" y1="170" x2="200" y2="170" stroke="white" />
 <line x1="0" y1="180" x2="200" y2="180" stroke="white" />
 <line x1="0" y1="190" x2="200" y2="190" stroke="white" />
 <line x1="10" y1="0" x2="10" y2="200" stroke="white" />
 <line x1="20" y1="0" x2="20" y2="200" stroke="white" />
 <line x1="30" y1="0" x2="30" y2="200" stroke="white" />
 <line x1="40" y1="0" x2="40" y2="200" stroke="white" />
 <line x1="50" y1="0" x2="50" y2="200" stroke="white" />
 <line x1="60" y1="0" x2="60" y2="200" stroke="white" />
 <line x1="70" y1="0" x2="70" y2="200" stroke="white" />
 <line x1="80" y1="0" x2="80" y2="200" stroke="white" />
 <line x1="90" y1="0" x2="90" y2="200" stroke="white" />
 <line x1="100" y1="0" x2="100" y2="200" stroke="white" />
 <line x1="110" y1="0" x2="110" y2="200" stroke="white" />
 <line x1="120" y1="0" x2="120" y2="200" stroke="white" />
 <line x1="130" y1="0" x2="130" y2="200" stroke="white" />
 <line x1="140" y1="0" x2="140" y2="200" stroke="white" />
 <line x1="150" y1="0" x2="150" y2="200" stroke="white" />
 <line x1="160" y1="0" x2="160" y2="200" stroke="white" />
 <line x1="170" y1="0" x2="170" y2="200" stroke="white" />
 <line x1="180" y1="0" x2="180" y2="200" stroke="white" />
 <line x1="190" y1="0" x2="190" y2="200" stroke="white" />
</svg>

3.viewBoxを検証

viewBoxの設定の仕方と意味を見ておきます。viewBox=”x y width height”と設定しますが、区切りは半角スペースでも半角カンマでもどちらでも良いようです。本記事では半角スペースで書きます。各値、そのままの意味ですが、一つずつ見ておきましょう。

  • x・・・左上の x座標
  • y・・・左上の y座標
  • width・・・幅
  • height・・・高さ

21件の検証結果から分かったこと

▼こちらでviewBoxに関して21件の検証をしています。その中で基本となる5パターンをピックアップし図で説明します。

図での説明

検証用の図形に座標を加えました

まず、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

viewBox=”50 50 200 200″は、上図の透けたオレンジの部分を指しています。座標でいうと(50, 50)から(250, 250)の正方形です。
※おさらい:viewBox=”x座標 y座標 幅 高さ”

そして、このオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズも幅200px、高さ200pxなので、拡大縮小は発生せずviewBox(オレンジ部)を抜き取った画像がそのまま表示されます。実際に下に描きましたのでご覧ください。

引用:Firefoxの要素の検証

要素の検証を見ると白の背景(余白)も図として表示されているのが分かります。

viewBox=”-50 -50 200 200″の場合

次はマイナス方向で考えてみましょう。上と同様に考えると下記のようになると推測できます。

透けたオレンジの部分がviewBox

viewBox=”-50 -50 200 200″は、上図の透けたオレンジの部分を指しています。座標でいうと(-50, -50)から(150, 150)の正方形です。
※おさらい:viewBox=”x座標 y座標 幅 高さ”

先ほどと同じ理由で拡大縮小は発生せずviewBox(オレンジ部)を抜き取った画像がそのまま表示されます。同様に図を描きましたのでご覧ください。

引用:Firefoxの要素の検証

先ほどと同じように白の背景(余白)も図として表示されているのが分かります。

さて、viewBox=”0 0 200 200″の座標部分(赤字)を変更するとどうなるかは掴めてきました。それではもう一つの要素である幅・高さを変更してみましょう。シンプルにするために幅・高さの部分の値のみ変更してみます。

viewBox=”0 0 100 100″の場合

まずは、左上の座標はそのままで、viewBoxのサイズを図の半分にしてみましょう。

黒い枠線の部分がviewBox

viewBox=”0 0 100 100″は、上図の黒い枠線の部分を指しています。座標でいうと(0, 0)から(100, 100)の正方形です。
※おさらい:viewBox=”x座標 y座標 幅 高さ”

そして、この黒い枠線部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズが幅100px、高さ100pxなので、幅200px、高さ200pxに拡大されて画像が表示されます。つまり、幅200px、高さ200pxの赤い正方形が表示されます。

文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。

引用:Firefoxの要素の検証

白線の間隔が明らかに広くなっています。幅・高さともに2倍に拡大されています。
この結果からviewBoxがsvgより小さい場合、中の図形は拡大されることがわかりました

viewBox=”0 0 400 400″の場合

次に、viewBoxのサイズを図の2倍にしてみましょう。左上の座標はそのままです。

透けたオレンジの部分がviewBox

viewBox=”0 0 400 400″は、上図の透けたオレンジの部分を指しています。座標でいうと(0, 0)から(400, 400)の正方形です。
※おさらい:viewBox=”x座標 y座標 幅 高さ”

そして、このオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズが幅400px、高さ400pxなので、幅200px、高さ200pxに縮小されて画像が表示されます。つまり、図全体が1/4サイズになり、残りの3/4は空白になります。

文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。

引用:Firefoxの要素の検証

図全体が1/4に縮小されているのが分かります。
この結果からviewBoxがsvgより大きい場合、中の図形は縮小されることがわかりました

さて、viewBox=”0 0 200 200“のサイズ(赤字)を変更するとどうなるかも掴めてきました。それでは最後に座標・幅・高さを同時に変更してみましょう

viewBox=”50 50 100 100″の場合

最後に座標・大きさどちらも変更した場合を見てみましょう。
viewBoxを図に対して「右に50、下に50」平行移動し、viewBoxのサイズを図の半分にしました。

透けたオレンジの部分がviewBox

viewBox=”50 50 100 100″は、上図の透けたオレンジの部分を指しています。座標でいうと(50, 50)から(150, 150)の正方形です。
※おさらい:viewBox=”x座標 y座標 幅 高さ”

今までと同様にこのオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズが幅100px、高さ100pxなので、幅200px、高さ200pxに拡大されて画像が表示されます。

文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。

引用:Firefoxの要素の検証

パッと見は元の図と違いがありません。ですが、白線の間隔が広くなっています。幅・高さともに2倍に拡大されています。

元の図と並べると違いがよく分かります。下記をご覧ください。右(下)が元の図です。白線を見ると左(上)の図の方が拡大されているのが分かるかと思います。

以上で、座標・サイズを変更するとどのような感じになるか理解できてきました。
今見てきた5パターンでその他のパターンも説明がつくか20パターン程確認してみます。

svgの「viewBox」余白がある場合どうなる?

次はsvgの「viewBox」の余白があるパターンを見てみます。