SVGの幅・高さはともに200px4色の正方形。/></svg>3.viewBoxを検証viewBoxの設定の仕方と意味を見ておきます。height”と設定しますが、区切りは半角スペースでも半角カンマでもどちらでも良いようです。本記事では半角スペースで書きます。各値、そのままの意味ですが、一つずつ見ておきましょう。200′′」になります。私の予想した図とは異なったので、取り上げました。(予想どおりの方もいるかと思います、その方は読み飛ばしてくださいm(__)m)※このviewBoxは次のページで検証するパターンです透けたオレンジの部分がviewBoxの範囲まず、viewBoxの範囲が分かるよう上の画像を作成しましたので、ご覧ください。こちらを見ると、黄、黒の正方形はviewBoxの範囲外なので、表示されないように感じます。それでは、実際にどのような図になるのでしょう。200′′」を設定したsvgを下記に用意しましたので、見てみてください。私の予想とは違い黄・黒の正方形も表示されました。いった理由でこのようになるのでしょう?図解!svgの余白はどうなる?viewBoxの設定値からsvgに表示するまでの流れを見てみましょう。見る点はsvg領域に余白が出来たとき、何が表示されるか?です。あわせて、余白がある場合に中央配置になる理由についても少し触れます。viewBoxの範囲1viewBoxで指定された範囲は上の画像のとおりです。viewBoxの幅は400px、高さは200pxです。viewBoxの範囲を抜き出した図形2実際に図を抜き出します。幅は400px、高さは200pxです。中央下に図(赤と青の正方形)がくる形で抜き取られます。viewBoxで抜き出した図形をsvgに入れたい3viewBoxで抜き出した図形をsvgにどのようにはめこむか考えます図の拡大・縮小についてsvgの属性に「preserveAspectRatio」があります。これは「xMidYMid」と「meet」の2つが設定されているということです。この内「meet」の方が拡大・縮小に関連します。「meet」とは幅と高さを大きい方に合わせる、つまりviewboxはsvg領域内に収まるように拡大・縮小します。高さを合わせた場合、はみ出る4viewBoxとsvg領域の高さを合わせてみます。どちらの高さも200pxなのでviewBoxで抜き出した図をそのままのサイズでsvgに入れてみます。svgの左右から100pxはみ出して、収まりませんでした。幅を合わせた場合、きれいに入る5viewBoxとsvg領域の幅を合わせてみます。viewBoxの幅は400px、svg領域の幅は200pxなのでviewBoxで指定した図を半分(1/2)に縮小して入れましょう。viewBoxで抜き出した図は幅200px、高さ100pxになります。svgの領域にきれいに収まりました。はめこんだviewBoxの図の上下に余白がある6viewBoxはきれいにはまりましたが、余白の扱いがどうなるかが残っています。図が縦横ともに中央配置される理由svgの属性に「preserveAspectRatio」があります。これは「xMidYMid」と「meet」の2つが設定されているということです。この内「xMidYMid」の方が表示位置に関連します。「xMidYMid」とはviewBoxの中間点のX値とsvg領域の中間点のX値を揃える、および、viewBoxの中間点のY値とviewportの中間点のY値を揃えるというものです。縦横ともに中央に配置するということです。余白にはviewBoxには指定されていない部分もsvg領域に収まる部分は表示される7svg領域の余白にはviewBoxでは指定されていない部分の図も表示されますただし、黄・黒の正方形部分はviewBoxとしては認識されていないので、拡大・縮小には関係ありません。上記のとおりviewBoxで決まった通り1/2の大きさに縮小されます。影響を与えないが、余白があればviewBoxの範囲外でも図は表示されるということが分かりました。私の予測には反しましたが、納得はできました。次はsvgの「viewBox」の組み合わせを21パターン検証しました。LUCKLOGhttps://lucklog.info/svg-verification-viewbox-width-height3/前の記事でsvgのviewBoxで余白ができるイレギュラーなケースを検証してみました。それでは、最後にviewBoxで「座標」「width」「height」を設定し検証した21パターンをいくつか見ていきます。【SVG】svgのviewBox属性。基本的の5パターンを検証!それぞれの特徴は?【SVG】20パターン検証!svgのwidth・height属性を徹底分析!~後半~【SVG】17パターン検証!svgのwidth、heightをcssで設定し分析!【SVG】svgのviewBox属性?カメラで写真を撮ることと比較して簡単理解!【SVG】21パターン徹底検証!svgのviewBox属性を徹底分析!【SVG】SVGのwidth・height属性はどう考えるとしっくりくる?投稿ナビゲーション【SVG】svgのviewBox属性。TOPsvg【SVG】svgのviewBox属性。