SVGの幅・高さはともに200px4色の正方形。200px;」と指定して検証しました。17件の検証結果から分かったことを書いておきます。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」属性の「200」が適応されたと考えられます。※「1.svgの「width」「height」属性の検証」の「1-8.height=200(widthの指定なし)」と同じ結果です2-8(追加検証)svgの「width」属性を100にする追加検証として、svgの「width」属性を100にしてみます。よって、svgの幅が自動で100pxになれば、svgの「width」属性が適応されたことが分かります。200px(設定は200)予想したとおり、svgの「width」属性の100pxが適応されました。200px(設定は200)「svg」と「中の図」が同じサイズです。heightは指定していませんが、svgの「height」属性の「200」が適応されたと考えられます。2-9(追加検証)svgの「height」属性を100にする追加検証として、svgの「height」属性を100にしてみます。よって、svgの高さが自動で100pxになれば、svgの「height」属性が適応されたことが分かります。100px(設定は200)予想したとおり、svgの「height」属性の100pxが適応されました。200px(設定は200)「2-8.height=200px(widthの指定なし)」の検証結果より、cssで「width」を指定していない場合、svgの「width」属性が適応されるはずです。予想どおり、上記結果もsvgの「width」属性「200」が適応され、幅が200pxとなりました。2-10(追加検証)svgの「width」属性を300にする「2-8(追加検証)svgの「width」属性を100にする」と同様の検証ですが、値を大きくするパターンとして検証します。300px(設定は200)予想したとおり、svgの「width」属性の300pxが適応されました。200px(設定は200)「2-9.width=200px(heightの指定なし)」の検証結果より、cssで「height」を指定していない場合、svgの「height」属性が適応されるはずです。予想どおり、上記結果もsvgの「height」属性「200」が適応され、高さが200pxとなりました。2-11(追加検証)svgの「height」属性を300にする「2-9(追加検証)svgの「height」属性を100にする」と同様の検証ですが、値を大きくするパターンとして検証します。300px(設定は200)予想したとおり、svgの「height」属性の300pxが適応されました。100px(設定は200)「2-8.height=200px(widthの指定なし)」の検証結果より、cssで「width」を指定していない場合、svgの「width」属性が適応されるはずです。予想どおり、上記結果もsvgの「width」属性「200」が適応され、幅が200pxとなりました。中の図は高さが100pxのため、幅も100pxに縮小されています。100px(設定は200)「2-9.width=200px(heightの指定なし)」の検証結果より、cssで「height」を指定していない場合、svgの「height」属性が適応されるはずです。予想どおり、上記結果もsvgの「height」属性「200」が適応され、高さが200pxとなりました。中の図は幅が100pxのため、高さも100pxに縮小されています。svgの「viewBox」はどういったものかイメージしてみる次はsvgの「viewBox」がどういったものかイメージしてみたいと思います。カメラで写真を撮ることと比較しながら、理解を深めたいと思います。LUCKLOGhttps://lucklog.info/svg-viewbox-image/前の記事でsvgをcssの「width」「height」で調整する色々なパターンを見てきました。次はviewBoxを見ていくのですが、まずイメージから見ていけたらと思います。【SVG】SVGのwidth・height属性はどう考えるとしっくりくる?【SVG】svgのviewBox属性。図解!余白ができる場合どうなる?コピペで使える!SVG+CSSで〇(丸・円)!【SVG】21パターン徹底検証!svgのviewBox属性を徹底分析!【SVG】svgのviewBox属性。