前の記事でsvgのviewBoxで余白ができるイレギュラーなケースを検証してみました。それでは、最後にviewBoxで「座標」「width」「height」を設定し検証した21パターンをいくつか見ていきます。
- 検証で使用するsvg（幅200px、高さ200px）※他の検証と同じsvgです
- ３．viewBoxを検証
- 下記21件の検証結果から分かったこと
- ３－０．viewBox=”0 0 200 200″（デフォルト）
- ３－１．幅と高さのみ変更
- ３－２．座標のみ変更
- ３－２－１．viewBox=”400 400 200 200″
- ３－２－２．viewBox=”100 100 200 200″
- ３－２－３．viewBox=”400 0 200 200″（x座標だけ）
- ３－２－４．viewBox=”0 400 200 200″
- ３－２－５．viewBox=”100 0 200 200″（x座標だけ）
- ３－２－６．viewBox=”0 100 200 200″（y座標だけ）
- ３－２－７．viewBox=”-400 -400 200 200″（マイナス方向）
- ３－２－８．viewBox=”-100 -100 200 200″（マイナス方向）
- ３－２－９．viewBox=”-400 0 200 200″（x座標だけマイナス方向）
- ３－２－１０．viewBox=”0 -400 200 200″（y座標だけマイナス方向）
- ３－２－１１．viewBox=”-100 0 200 200″（x座標だけマイナス方向）
- ３－２－１２．viewBox=”0 -100 200 200″（y座標だけマイナス方向）
- ３－３．幅と高さ・座標ともに変更
- まとめ
検証で使用する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は全体のどの部分を抜き出す（ピックアップする）かを指定する属性だと分かった
- 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ソースを解析するとき等には役に立つかもしれません。知らないより知っていた方が使いやすいのは確かです。もし、他に検証して欲しいこと等ありましたら、コメントください。余裕があれば検証してみます。
以上、最後まで読んでいただきありがとうございました。
スポンサーリンク
