【SVG】21パターン徹底検証!svgのviewBox属性を徹底分析!

前の記事でsvgのviewBoxで余白ができるイレギュラーなケースを検証してみました。それでは、最後にviewBoxで「座標」「width」「height」を設定し検証した21パターンをいくつか見ていきます。

目次(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は全体のどの部分を抜き出す(ピックアップする)かを指定する属性だと分かった
  • viewBoxでは抜き出す場所を決めた状態です。実際に図を表示するのはsvgです。表示サイズはsvgタグに設定されている「width」「height」属性に指定されたサイズになります。viewBoxで抜き出した図をsvgにきれいにはまる様に拡大・縮小して表示する

文章だけでは分かりにくいと思いますので、2つ前のページにて図で説明しています。

1つ前のページでは余白があるパターンも見ています。まだ見ていない方はご覧ください。

下記各検証にも、図での解説を入れておきます。少しでもイメージしやすくなれば幸いです。

3-0.viewBox=”0 0 200 200″(デフォルト)

まず、検証用の図そのものを見ておきましょう。

引用:Firefoxの要素の検証

座標・サイズともにそのままなので、そのまま表示されます。

【参考】viewBoxで指定している範囲

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

3-1.幅と高さのみ変更

3-1-1.viewBox=”0 0 400 400″(2倍)

viewBoxの幅、高さをsvgの2倍にしてみます。

引用:Firefoxの要素の検証

前ページで検証したとおりviewBoxがsvgより大きい場合、中の図形は縮小されました

【参考】viewBoxで指定している範囲

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

3-1-2.viewBox=”0 0 100 100″(0.5倍)

viewBoxの幅、高さをsvgの半分(0.5倍)にしてみます。

引用:Firefoxの要素の検証

前ページで検証したとおりviewBoxがsvgより小さい場合、中の図形は拡大されました

【参考】viewBoxで指定している範囲

黒い枠線の部分がviewBoxの範囲

3-1-3.viewBox=”0 0 400 200″(幅だけ2倍)

viewBoxの幅だけsvgの2倍にしてみます。

引用:Firefoxの要素の検証

前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、幅を元に中の図形は縮小され、「xMidYMid」により、Y軸方向中央に表示されています。

【参考】viewBoxで指定している範囲

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

3-1-4.viewBox=”0 0 200 400″(高さだけ2倍)

viewBoxの高さだけsvgの2倍にしてみます。

引用:Firefoxの要素の検証

前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、高さを元に中の図形は縮小され「xMidYMid」により、X軸方向中央に表示されています。

【参考】viewBoxで指定している範囲

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

3-1-5.viewBox=”0 0 100 200″(幅だけ0.5倍)

viewBoxの幅だけsvgの半分にしてみます。

引用:Firefoxの要素の検証

前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、高さを元に中の図形はそのままで「xMidYMid」により、X軸方向中央に表示されています。また、前ページの「⑦svg領域の余白には・・・」で見たとおり、viewBoxの指定範囲外の青と黒の正方形が表示されています

【参考】viewBoxで指定している範囲

透けたオレンジ&黒枠の部分がviewBoxの範囲

3-1-6.viewBox=”0 0 200 100″(高さだけ0.5倍)

viewBoxの高さだけsvgの2倍にしてみます。

引用:Firefoxの要素の検証

前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、を元に中の図形はそのままで「xMidYMid」により、Y軸方向中央に表示されています。また、前ページの「⑦svg領域の余白には・・・」で見たとおり、viewBoxの指定範囲外の黄と黒の正方形が表示されています

【参考】viewBoxで指定している範囲

viewBoxの範囲(イレギュラーなパターンなので枠外に書きます)

3-2.座標のみ変更

3-2-1.viewBox=”400 400 200 200″

XY座標ともに+400ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。

【参考】viewBoxで指定している範囲

viewBoxの範囲。範囲内に図がないので真っ白になる

3-2-2.viewBox=”100 100 200 200″

XY座標ともに+100ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。

【参考】viewBoxで指定している範囲

viewBoxの範囲(サイズは同じなので大きさは変わらない。図がない部分は白になる)

3-2-3.viewBox=”400 0 200 200″(x座標だけ)

X座標だけ+400ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。

【参考】viewBoxで指定している範囲

viewBoxの範囲。範囲内に図がないので真っ白になる

3-2-4.viewBox=”0 400 200 200″

Y座標だけ+400ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。

【参考】viewBoxで指定している範囲

viewBoxの範囲。範囲内に図がないので真っ白になる

3-2-5.viewBox=”100 0 200 200″(x座標だけ)

X座標だけ+100ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。

【参考】viewBoxで指定している範囲

viewBoxの範囲(サイズは同じなので大きさは変わらない。図がない部分は白になる)

3-2-6.viewBox=”0 100 200 200″(y座標だけ)

Y座標だけ+100ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。

【参考】viewBoxで指定している範囲

viewBoxの範囲(サイズは同じなので大きさは変わらない。図がない部分は白になる)

3-2-7.viewBox=”-400 -400 200 200″(マイナス方向)

XY座標ともに-400ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。

【参考】viewBoxで指定している範囲

viewBoxの範囲。範囲内に図がないので真っ白になる

3-2-8.viewBox=”-100 -100 200 200″(マイナス方向)

XY座標ともに-100ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。

【参考】viewBoxで指定している範囲

viewBoxの範囲(サイズは同じなので大きさは変わらない。図がない部分は白になる)

3-2-9.viewBox=”-400 0 200 200″(x座標だけマイナス方向)

X座標だけ-400ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。

【参考】viewBoxで指定している範囲

viewBoxの範囲。範囲内に図がないので真っ白になる

3-2-10.viewBox=”0 -400 200 200″(y座標だけマイナス方向)

Y座標だけ-400ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。

【参考】viewBoxで指定している範囲

viewBoxの範囲。範囲内に図がないので真っ白になる

3-2-11.viewBox=”-100 0 200 200″(x座標だけマイナス方向)

X座標だけ-100ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。

【参考】viewBoxで指定している範囲

viewBoxの範囲(サイズは同じなので大きさは変わらない。図がない部分は白になる)

3-2-12.viewBox=”0 -100 200 200″(y座標だけマイナス方向)

Y座標だけ-100ずらしました。

引用:Firefoxの要素の検証

viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。

【参考】viewBoxで指定している範囲

viewBoxの範囲(サイズは同じなので大きさは変わらない。図がない部分は白になる)

3-3.幅と高さ・座標ともに変更

3-3-1.viewBox=”50 50 100 100″(真ん中を正方形にくり抜いた)

ちょうど真ん中をくりぬきました。
XY座標ともに+50、viewBoxの幅、高さをsvgの半分にしました。

引用:Firefoxの要素の検証

前ページで検証したとおりviewBoxがsvgより小さい場合、中の図形は拡大されました

【参考】viewBoxで指定している範囲

viewBoxの範囲(viewBoxがsvgより小さいサイズなので、中の図形は拡大される※ページ内の「図での説明」参照)

元の図との違いが分かりやすいように並べておきます。右(下)が元の図です。白の線を見ると左(上)の図の方が拡大されているのが分かるかと思います。

3-3-2.viewBox=”-100 -100 400 400″(図を囲う)

引用:Firefoxの要素の検証

前ページで検証したとおりviewBoxがsvgより大きい場合、中の図形は縮小されました

【参考】viewBoxで指定している範囲

viewBoxの範囲(viewBoxがsvgより大きいサイズなので、中の図形は縮小される※ページ内の「図での説明」参照)

 

3-3-3.viewBox=”-100 -100 400 200″(幅方向だけ図を囲う)

引用:Firefoxの要素の検証

前ページで検証した図そのものです。まだ見ていない方は是非下記ページをご覧ください。

他と同様にテキストでも説明しておきます。
前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、幅を元に中の図形は縮小され「xMidYMid」により、Y軸方向中央に表示されています。また、前ページの「⑦svg領域の余白には・・・」で見たとおり、viewBoxの指定範囲外の黄と黒の正方形が表示されています

【参考】viewBoxで指定している範囲

viewBoxの範囲

まとめ

以上、svgについて9ページに渡っていろいろな属性やcssを確認してきました。図に関わる「width」「height」「viewBox」属性などが多くを占めましたがいかがだったでしょうか?

私自身いろいろなパターンも試して、けっこう理解できたと思います。

ただ…、実際にSVGタグを書く場合は、svgの「width」「height」属性と「viewBox」属性は同じサイズにし、「viewBox」の左上の座標も(0, 0)にするのが普通かなと思います。なので、検証してきた内容は実際には役には立たないかもしれません。

ですが、誰かが書いたsvgソースを解析するとき等には役に立つかもしれません。知らないより知っていた方が使いやすいのは確かです。もし、他に検証して欲しいこと等ありましたら、コメントください。余裕があれば検証してみます。

以上、最後まで読んでいただきありがとうございました。