SVGの幅・高さはともに200px4色の正方形。/></svg>1.svgの「width」「height」属性の検証まず、次の記事も含めた計20件の検証結果から分かったことを書いておきます。200px(設定は200)「svg」と「中の図」が同じサイズです。値が同じなので当然の結果かと思います。400px(設定は200)「svg」と「中の図」が同じサイズです。中の図の指定は幅、高さともに「200px」ですがsvgに合わせて「400px」になりました。100px(設定は200)「svg」と「中の図」が同じサイズです。中の図の指定は幅、高さともに「200px」ですがsvgに合わせて「100px」になりました。200px(設定は200)「svg」と「中の図」の高さは同じサイズで、幅はサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(高さ)に合わせて「200px」のままでした。200px(設定は200)「svg」と「中の図」の幅は同じサイズで、高さはサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(幅)に合わせて「200px」のままでした。100px(設定は200)「svg」と「中の図」の幅は同じサイズで、高さはサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(幅)に合わせて「100px」になりました。100px(設定は200)「svg」と「中の図」の高さは同じサイズで、幅はサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(高さ)に合わせて「100px」になりました。200px(設定は200)「svg」と「中の図」が同じサイズです。widthは指定していませんが、中の図が正方形ということでそれに合わせてsvgのwidthが自動設定されました。1-8(追加検証1)viewBox、中の図の幅・高さを400pxにする追加検証として、viewBox、中の図の幅・高さを400pxにしてみます(各正方形の大きさを幅200px、高さ200pxにします。格子状の線のサイズは変えていません)。よって、svgの幅が自動で200pxになれば、中の図に依存する可能性が高いというわけです。200px(設定は400)予想したとおり、中の図に合わせてsvgの幅は200に設定されました。1-8(追加検証2)viewBox、中の図の幅だけ400pxにする念のため、追加検証として、viewBox、中の図の幅だけを400pxにしてみます(各正方形の大きさを幅200px、高さ100pxにします。格子状の線のサイズは変えていません)。よって、svgの幅が自動で400pxになれば、こちらの検証も予想どおりの結果となります。200px(設定は200)予想したとおり、中の図に合わせてsvgの幅は400に設定されました。200px(設定は200)「svg」と「中の図」が同じサイズです。heightは指定していませんが、中の図が正方形ということでそれに合わせてsvgのheightが自動設定されました。1-9(追加検証1)viewBox、中の図の幅・高さを400pxにする追加検証として、viewBox、中の図の幅・高さを400pxにしてみます(各正方形の大きさを幅200px、高さ200pxにします。格子状の線のサイズは変えていません)。よって、svgの幅が自動で200pxになれば、中の図に依存する可能性が高いというわけです。200px(設定は400)予想したとおり、中の図に合わせてsvgの高さは200に設定されました。1-9(追加検証2)viewBox、中の図の高さだけ400pxにする念のため、追加検証として、viewBox、中の図の高さだけを400pxにしてみます(各正方形の大きさを幅100px、高さ200pxにします。格子状の線のサイズは変えていません)。よって、svgの高さが自動で400pxになれば、こちらの検証も予想どおりの結果となります。400px(設定は400)予想したとおり、中の図に合わせてsvgの高さは400に設定されました。svgの「width」「height」属性のいろいろな組み合わせを検証(後半)少し長くなってきましたので、記事を分けます。引き続きsvgの「width」「height」属性について検証していきます。LUCKLOGhttps://lucklog.info/svg-verification-width-height-part2/前の記事でsvgの「width」「height」属性の組み合わせについて色々なパターン(前半)を見てきました。残りを後半の本記事で見ていきます。...スポンサーリンク関連記事SVGのcircleがstrokeによって見切れなくする方法(stroke-widthを増やすと見切れちゃう)【SVG】SVGのwidth・height属性はどう考えるとしっくりくる?【SVG】20パターン検証!svgのwidth・height属性を徹底分析!~後半~【SVG】17パターン検証!svgのwidth、heightをcssで設定し分析!コピペで使える!SVG+CSSで〇(丸・円)!【SVG】svgのviewBox属性。