SVGの幅・高さはともに200px4色の正方形。/></svg>3.viewBoxを検証viewBoxの設定の仕方と意味を見ておきます。height”と設定しますが、区切りは半角スペースでも半角カンマでもどちらでも良いようです。本記事では半角スペースで書きます。各値、そのままの意味ですが、一つずつ見ておきましょう。y座標width・・・幅height・・・高さ21件の検証結果から分かったこと▼こちらでviewBoxに関して21件の検証をしています。その中で基本となる5パターンをピックアップし図で説明します。LUCKLOGhttps://lucklog.info/svg-verification-viewbox-width-height3/前の記事でsvgのviewBoxで余白ができるイレギュラーなケースを検証してみました。それでは、最後にviewBoxで「座標」「width」「height」を設定し検証した21パターンをいくつか見ていきます。検証用の図形に座標を加えましたまず、svgの中で描かれた図に座標を加えます。y軸が下向きに正(プラス)ということ以外は注意点はありません。実例から見てみるのが一番分かりやすいので、下記条件で説明します。y=100)白色の縦線と横線は端から端まで引いている。200′′の場合それでは、viewBoxを図に対して「右に50、下に50」平行移動した場合を見てみましょう。200′′は、上図の透けたオレンジの部分を指しています。250)の正方形です。高さ”そして、このオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズも幅200px、高さ200pxなので、拡大縮小は発生せずviewBox(オレンジ部)を抜き取った画像がそのまま表示されます。実際に下に描きましたのでご覧ください。要素の検証を見ると白の背景(余白)も図として表示されているのが分かります。次はマイナス方向で考えてみましょう。上と同様に考えると下記のようになると推測できます。200′′は、上図の透けたオレンジの部分を指しています。150)の正方形です。高さ”先ほどと同じ理由で拡大縮小は発生せずviewBox(オレンジ部)を抜き取った画像がそのまま表示されます。同様に図を描きましたのでご覧ください。先ほどと同じように白の背景(余白)も図として表示されているのが分かります。200′′の座標部分(赤字)を変更するとどうなるかは掴めてきました。それではもう一つの要素である幅・高さを変更してみましょう。シンプルにするために幅・高さの部分の値のみ変更してみます。100′′の場合まずは、左上の座標はそのままで、viewBoxのサイズを図の半分にしてみましょう。100′′は、上図の黒い枠線の部分を指しています。100)の正方形です。高さ”そして、この黒い枠線部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズが幅100px、高さ100pxなので、幅200px、高さ200pxに拡大されて画像が表示されます。幅200px、高さ200pxの赤い正方形が表示されます。文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。白線の間隔が明らかに広くなっています。幅・高さともに2倍に拡大されています。この結果からviewBoxがsvgより小さい場合、中の図形は拡大されることがわかりました。次に、viewBoxのサイズを図の2倍にしてみましょう。左上の座標はそのままです。400′′は、上図の透けたオレンジの部分を指しています。400)の正方形です。高さ”そして、このオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズが幅400px、高さ400pxなので、幅200px、高さ200pxに縮小されて画像が表示されます。図全体が1/4サイズになり、残りの3/4は空白になります。文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。図全体が1/4に縮小されているのが分かります。この結果からviewBoxがsvgより大きい場合、中の図形は縮小されることがわかりました。200“のサイズ(赤字)を変更するとどうなるかも掴めてきました。それでは最後に座標・幅・高さを同時に変更してみましょう。最後に座標・大きさどちらも変更した場合を見てみましょう。viewBoxを図に対して「右に50、下に50」平行移動し、viewBoxのサイズを図の半分にしました。100′′は、上図の透けたオレンジの部分を指しています。150)の正方形です。高さ”今までと同様にこのオレンジ部分の図をsvgの幅200px、高さ200pxの領域に表示させます(実際に表示される図)。今回はviewBoxのサイズが幅100px、高さ100pxなので、幅200px、高さ200pxに拡大されて画像が表示されます。文字だけだと分かりにくいと思いますので、実際に下図をご覧ください。引用:Firefoxの要素の検証パッと見は元の図と違いがありません。白線の間隔が広くなっています。幅・高さともに2倍に拡大されています。元の図と並べると違いがよく分かります。右(下)が元の図です。白線を見ると左(上)の図の方が拡大されているのが分かるかと思います。以上で、座標・サイズを変更するとどのような感じになるか理解できてきました。今見てきた5パターンでその他のパターンも説明がつくか20パターン程確認してみます。svgの「viewBox」余白がある場合どうなる?次はsvgの「viewBox」の余白があるパターンを見てみます。【SVG】svgのviewBox属性。LUCKLOGhttps://lucklog.info/svg-verification-viewbox-width-height2/前の記事でsvgのviewBoxの基本パターンを5つ見てきました。他に少しイレギュラーなパターンがあるので、今回はそちらを図解しながら見ていきます。【SVG】svgのviewBox属性。図解!余白ができる場合どうなる?【SVG】20パターン検証!svgのwidth・height属性を徹底分析!~前半~SVGのcircleがstrokeによって見切れなくする方法(stroke-widthを増やすと見切れちゃう)投稿ナビゲーション【SVG】svgのviewBox属性?カメラで写真を撮ることと比較して簡単理解!【SVG】svgのviewBox属性。TOPsvg【SVG】svgのviewBox属性。