前の記事でsvgのviewBoxで余白ができるイレギュラーなケースを検証してみました。それでは、最後にviewBoxで「座標」「width」「height」を設定し検証した21パターンをいくつか見ていきます。
検証で使用する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は全体のどの部分を抜き出す（ピックアップする）かを指定する属性だと分かった
- viewBoxでは抜き出す場所を決めた状態です。実際に図を表示するのはsvgです。表示サイズはsvgタグに設定されている「width」「height」属性に指定されたサイズになります。viewBoxで抜き出した図をsvgにきれいにはまる様に拡大・縮小して表示する
文章だけでは分かりにくいと思いますので、2つ前のページにて図で説明しています。
前の記事でsvgのviewBoxとはどんなイメージかを見てきました。次はviewBoxで「座標」「width」「height」を設定した基本的な5パターンをまず見てみましょう。 ▼ 一つ前の記事はこちらから svgで図を …
1つ前のページでは余白があるパターンも見ています。まだ見ていない方はご覧ください。
前の記事でsvgのviewBoxの基本パターンを5つ見てきました。他に少しイレギュラーなパターンがあるので、今回はそちらを図解しながら見ていきます。 ▼ 一つ前の記事はこちらから svgで図を描くとき viewBox・w …
下記各検証にも、図での解説を入れておきます。少しでもイメージしやすくなれば幸いです。
３－０．viewBox=”0 0 200 200″（デフォルト）
まず、検証用の図そのものを見ておきましょう。
座標・サイズともにそのままなので、そのまま表示されます。
【参考】viewBoxで指定している範囲
３－１．幅と高さのみ変更
３－１－１．viewBox=”0 0 400 400″（2倍）
viewBoxの幅、高さをsvgの2倍にしてみます。
前ページで検証したとおりviewBoxがsvgより大きい場合、中の図形は縮小されました。
【参考】viewBoxで指定している範囲
３－１－２．viewBox=”0 0 100 100″（0.5倍）
viewBoxの幅、高さをsvgの半分（0.5倍）にしてみます。
前ページで検証したとおりviewBoxがsvgより小さい場合、中の図形は拡大されました。
【参考】viewBoxで指定している範囲
３－１－３．viewBox=”0 0 400 200″（幅だけ2倍）
viewBoxの幅だけsvgの2倍にしてみます。
前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、幅を元に中の図形は縮小され、「xMidYMid」により、Y軸方向中央に表示されています。
【参考】viewBoxで指定している範囲
３－１－４．viewBox=”0 0 200 400″（高さだけ2倍）
viewBoxの高さだけsvgの2倍にしてみます。
前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、高さを元に中の図形は縮小され、「xMidYMid」により、X軸方向中央に表示されています。
【参考】viewBoxで指定している範囲
３－１－５．viewBox=”0 0 100 200″（幅だけ0.5倍）
viewBoxの幅だけsvgの半分にしてみます。
前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、高さを元に中の図形はそのままで、「xMidYMid」により、X軸方向中央に表示されています。また、前ページの「⑦svg領域の余白には・・・」で見たとおり、viewBoxの指定範囲外の青と黒の正方形が表示されています。
【参考】viewBoxで指定している範囲
３－１－６．viewBox=”0 0 200 100″（高さだけ0.5倍）
viewBoxの高さだけsvgの2倍にしてみます。
前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、幅を元に中の図形はそのままで、「xMidYMid」により、Y軸方向中央に表示されています。また、前ページの「⑦svg領域の余白には・・・」で見たとおり、viewBoxの指定範囲外の黄と黒の正方形が表示されています。
【参考】viewBoxで指定している範囲
３－２．座標のみ変更
３－２－１．viewBox=”400 400 200 200″
XY座標ともに＋400ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。
【参考】viewBoxで指定している範囲
３－２－２．viewBox=”100 100 200 200″
XY座標ともに＋100ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。
【参考】viewBoxで指定している範囲
３－２－３．viewBox=”400 0 200 200″（x座標だけ）
X座標だけ＋400ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。
【参考】viewBoxで指定している範囲
３－２－４．viewBox=”0 400 200 200″
Y座標だけ＋400ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。
【参考】viewBoxで指定している範囲
３－２－５．viewBox=”100 0 200 200″（x座標だけ）
X座標だけ＋100ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。
【参考】viewBoxで指定している範囲
３－２－６．viewBox=”0 100 200 200″（y座標だけ）
Y座標だけ＋100ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。
【参考】viewBoxで指定している範囲
３－２－７．viewBox=”-400 -400 200 200″（マイナス方向）
XY座標ともに－400ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。
【参考】viewBoxで指定している範囲
３－２－８．viewBox=”-100 -100 200 200″（マイナス方向）
XY座標ともに－100ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。
【参考】viewBoxで指定している範囲
３－２－９．viewBox=”-400 0 200 200″（x座標だけマイナス方向）
X座標だけ－400ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。
【参考】viewBoxで指定している範囲
３－２－１０．viewBox=”0 -400 200 200″（y座標だけマイナス方向）
Y座標だけ－400ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。ただし、図がないところを指しているので何も表示されません。
【参考】viewBoxで指定している範囲
３－２－１１．viewBox=”-100 0 200 200″（x座標だけマイナス方向）
X座標だけ－100ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。
【参考】viewBoxで指定している範囲
３－２－１２．viewBox=”0 -100 200 200″（y座標だけマイナス方向）
Y座標だけ－100ずらしました。
viewBoxとsvgのサイズは同じなので、下記「viewBoxで指定している範囲」がそのまま表示されます。
【参考】viewBoxで指定している範囲
３－３．幅と高さ・座標ともに変更
３－３－１．viewBox=”50 50 100 100″（真ん中を正方形にくり抜いた）
ちょうど真ん中をくりぬきました。
XY座標ともに＋50、viewBoxの幅、高さをsvgの半分にしました。
前ページで検証したとおりviewBoxがsvgより小さい場合、中の図形は拡大されました。
【参考】viewBoxで指定している範囲
元の図との違いが分かりやすいように並べておきます。右（下）が元の図です。白の線を見ると左（上）の図の方が拡大されているのが分かるかと思います。
３－３－２．viewBox=”-100 -100 400 400″（図を囲う）
前ページで検証したとおりviewBoxがsvgより大きい場合、中の図形は縮小されました。
【参考】viewBoxで指定している範囲
３－３－３．viewBox=”-100 -100 400 200″（幅方向だけ図を囲う）
前ページで検証した図そのものです。まだ見ていない方は是非下記ページをご覧ください。
前の記事でsvgのviewBoxの基本パターンを5つ見てきました。他に少しイレギュラーなパターンがあるので、今回はそちらを図解しながら見ていきます。 ▼ 一つ前の記事はこちらから svgで図を描くとき viewBox・w …
他と同様にテキストでも説明しておきます。
前ページで検証したとおり「preserveAspectRatio」の初期値「meet」により、viewBoxがsvgに収まるように、幅を元に中の図形は縮小され、「xMidYMid」により、Y軸方向中央に表示されています。また、前ページの「⑦svg領域の余白には・・・」で見たとおり、viewBoxの指定範囲外の黄と黒の正方形が表示されています。
【参考】viewBoxで指定している範囲
まとめ
以上、svgについて9ページに渡っていろいろな属性やcssを確認してきました。図に関わる「width」「height」「viewBox」属性などが多くを占めましたがいかがだったでしょうか？
私自身いろいろなパターンも試して、けっこう理解できたと思います。
ただ…、実際にSVGタグを書く場合は、svgの「width」「height」属性と「viewBox」属性は同じサイズにし、「viewBox」の左上の座標も（0, 0）にするのが普通かなと思います。なので、検証してきた内容は実際には役には立たないかもしれません。
ですが、誰かが書いたsvgソースを解析するとき等には役に立つかもしれません。知らないより知っていた方が使いやすいのは確かです。もし、他に検証して欲しいこと等ありましたら、コメントください。余裕があれば検証してみます。
以上、最後まで読んでいただきありがとうございました。
スポンサーリンク
