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

前の記事で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ソースを見る[クリックすると開きます]

<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>

３．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=”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」の余白があるパターンを見てみます。

スポンサーリンク