【SVG】20パターン検証！svgのwidth・height属性を徹底分析！～後半～

引き続き「width」と「height」の組み合わせを見ていきます。残り7パターンも試し、さらに理解を深めたいと思います。

目次（SVGについて複数ページ書いてます）
  1. SVGについての基本
  2. SVGのwidth・height属性はどう考えるとしっくりくる？
  3. 20パターン検証！svgのwidth・height属性を徹底分析！～前半～
  4. 20パターン検証！svgのwidth・height属性を徹底分析！～後半～（現在ココ）
  5. 17パターン検証！svgのwidth、heightをcssで設定し分析！
  6. svgのviewBox属性？カメラで写真を撮ることと比較して簡単理解！
  7. svgのviewBox属性。基本的の5パターンを検証！それぞれの特徴は？
  8. svgのviewBox属性。図解！余白ができる場合どうなる？
  9. 21パターン徹底検証！svgのviewBox属性を徹底分析！
スポンサーリンク

検証で使用する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ソースを見る[クリックすると開きます]

<svg class="square" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1">
 <!-- 正方形 -->
 <rect x="0" y="0" width="100" height="100" fill="red" />
 <rect x="100" y="0" width="100" height="100" fill="blue" />
 <rect x="0" y="100" width="100" height="100" fill="yellow" />
 <rect x="100" y="100" width="100" height="100" fill="black" />
 <!-- 線（グリッド） --> 
 <line x1="0" y1="10" x2="200" y2="10" stroke="white" />
 <line x1="0" y1="20" x2="200" y2="20" stroke="white" />
 <line x1="0" y1="30" x2="200" y2="30" stroke="white" />
 <line x1="0" y1="40" x2="200" y2="40" stroke="white" />
 <line x1="0" y1="50" x2="200" y2="50" stroke="white" />
 <line x1="0" y1="60" x2="200" y2="60" stroke="white" />
 <line x1="0" y1="70" x2="200" y2="70" stroke="white" />
 <line x1="0" y1="80" x2="200" y2="80" stroke="white" />
 <line x1="0" y1="90" x2="200" y2="90" stroke="white" />
 <line x1="0" y1="100" x2="200" y2="100" stroke="white" />
 <line x1="0" y1="110" x2="200" y2="110" stroke="white" />
 <line x1="0" y1="120" x2="200" y2="120" stroke="white" />
 <line x1="0" y1="130" x2="200" y2="130" stroke="white" />
 <line x1="0" y1="140" x2="200" y2="140" stroke="white" />
 <line x1="0" y1="150" x2="200" y2="150" stroke="white" />
 <line x1="0" y1="160" x2="200" y2="160" stroke="white" />
 <line x1="0" y1="170" x2="200" y2="170" stroke="white" />
 <line x1="0" y1="180" x2="200" y2="180" stroke="white" />
 <line x1="0" y1="190" x2="200" y2="190" stroke="white" />
 <line x1="10" y1="0" x2="10" y2="200" stroke="white" />
 <line x1="20" y1="0" x2="20" y2="200" stroke="white" />
 <line x1="30" y1="0" x2="30" y2="200" stroke="white" />
 <line x1="40" y1="0" x2="40" y2="200" stroke="white" />
 <line x1="50" y1="0" x2="50" y2="200" stroke="white" />
 <line x1="60" y1="0" x2="60" y2="200" stroke="white" />
 <line x1="70" y1="0" x2="70" y2="200" stroke="white" />
 <line x1="80" y1="0" x2="80" y2="200" stroke="white" />
 <line x1="90" y1="0" x2="90" y2="200" stroke="white" />
 <line x1="100" y1="0" x2="100" y2="200" stroke="white" />
 <line x1="110" y1="0" x2="110" y2="200" stroke="white" />
 <line x1="120" y1="0" x2="120" y2="200" stroke="white" />
 <line x1="130" y1="0" x2="130" y2="200" stroke="white" />
 <line x1="140" y1="0" x2="140" y2="200" stroke="white" />
 <line x1="150" y1="0" x2="150" y2="200" stroke="white" />
 <line x1="160" y1="0" x2="160" y2="200" stroke="white" />
 <line x1="170" y1="0" x2="170" y2="200" stroke="white" />
 <line x1="180" y1="0" x2="180" y2="200" stroke="white" />
 <line x1="190" y1="0" x2="190" y2="200" stroke="white" />
</svg>

１．svgの「width」「height」属性の検証（前半と同じ内容）

前半とージと同じ内容です。不要な方は読み飛ばしてくださいm(__)m

前の記事も含めた20件の検証結果から分かったことを書いておきます。

  • 「width」「height」属性で指定したサイズがsvgの表示サイズとなる
  • 中の図（rectやline）のサイズは「width」「height」属性のうち小さい方に合わせて拡大縮小される
    ※svgの属性「preserveAspectRatio」の初期値が「xMidYMid meet」となっていて、その中の「meet」が設定されていることが上記のようになる理由です
  • 中の図（rectやline）の表示位置は縦横ともに中央表示される
    ※svgの属性「preserveAspectRatio」の初期値が「xMidYMid meet」となっていて、その中の「xMidYMid」が設定されていることが上記のようになる理由です
  • 「width」「height」属性の一方を指定していない場合、指定されている方に合わせて自動で拡大縮小される
  • 「width」「height」属性ともに指定されていない場合、表示可能な範囲いっぱいに拡大される

１－１０．height=400（widthの指定なし、高さ2倍）

引用：Firefoxの要素の検証
svg 中の図
幅 400px（未設定） 400px（設定は200）
高さ 400px 400px（設定は200）

「svg」と「中の図」が同じサイズです。widthは指定していませんが、中の図が正方形ということでそれに合わせてsvgのwidthが自動設定されました。

１－１１．width=400（heightの指定なし、幅2倍）

引用：Firefoxの要素の検証
svg 中の図
幅 400px（未設定） 400px（設定は200）
高さ 400px 400px（設定は200）

「svg」と「中の図」が同じサイズです。heightは指定していませんが、中の図が正方形ということでそれに合わせてsvgのheightが自動設定されました。

１－１２．height=100（widthの指定なし、高さ0.5倍）

引用：Firefoxの要素の検証
svg 中の図
幅 100px（未設定） 100px（設定は200）
高さ 100px 100px（設定は200）

「svg」と「中の図」が同じサイズです。widthは指定していませんが、中の図が正方形ということでそれに合わせてsvgのwidthが自動設定されました。

１－１３．width=100（heightの指定なし、幅0.5倍）

引用：Firefoxの要素の検証
svg 中の図
幅 100px（未設定） 100px（設定は200）
高さ 100px 100px（設定は200）

「svg」と「中の図」が同じサイズです。heightは指定していませんが、中の図が正方形ということでそれに合わせてsvgのheightが自動設定されました。

１－１４．width、heightの指定なし

引用：Firefoxの要素の検証
svg 中の図
幅 100%（未設定） 100%（設定は200）
高さ svgの幅と同じ大きさ（未設定） 中の図の幅と同じ大きさ（設定は200）

「svg」と「中の図」が同じサイズです。widthもheightも指定していないので、まず幅が100%のサイズで、高さはそれに伴い拡大・縮小されたサイズになります（正方形なので幅と同じサイズです）。
上の要素の検証の図だと幅、高さともに740pxとなっています。

試しにウィンドウ幅を縮めるとそれにあわせて下記のように縮みます。

引用：Firefoxの要素の検証（ウィンドウ幅を縮めた）

１－１４（追加検証１）横長の図の場合を検証（図の幅400px、高さ200px）

１－８の追加検証２で検証に使用したのsvgの「width」「height」属性の設定をなくしてみます。よって、幅は100%のサイズで、高さがその半分のサイズであれば予想どおりの結果となります。

引用：Firefoxの要素の検証
svg 中の図
幅 100%（未設定） 100%（設定は400）
高さ svgの幅の半分（未設定） 中の図の幅の半分（設定は200）

「svg」と「中の図」が同じサイズです。widthもheightも指定していないので、まず幅が100%のサイズで、高さはそれに伴い拡大・縮小されたサイズになります。幅が高さの2倍のサイズの長方形なので高さは幅の半分のサイズです）。

上の要素の検証の図だと幅が740pxで、高さが370pxとなっています。

１－１４（追加検証２）横長の図の場合を検証（図の幅200px、高さ400px）

１－９の追加検証２で検証に使用したのsvgの「width」「height」属性の設定をなくしてみます。よって、幅は100%のサイズで、高さがその２倍のサイズであれば予想どおりの結果となります。

svg 中の図
幅 100%（未設定） 100%（設定は200）
高さ svgの幅の2倍（未設定） 中の図の幅の2倍（設定は400）

「svg」と「中の図」が同じサイズです。widthもheightも指定していないので、まず幅が100%のサイズで、高さはそれに伴い拡大・縮小されたサイズになります。幅が高さの半分のサイズの長方形なので高さは幅の2倍のサイズです。

上の要素の検証の図だと幅が740pxで、高さが1480pxとなっています。

svgの幅・高さをcssの「width」「height」で設定。いろいろな組み合わせを検証

次はsvgの幅・高さをcssの「width」「height」で設定してみます。いろいろな組み合わせを検証してみます。

【SVG】17パターン検証！svgタグをcssで調整（width・height）を分析！ ｜ LUCKLOG
https://lucklog.info/svg-verification-css-width-height/
前２つの記事でsvgの「width」「height」属性の組み合わせについて色々なパターンを見てきました。次はCSSで「width」「height」を設定した場合も見ていきます。 ▼ 一つ前の記事はこちらから ▼ 二つ前 …

スポンサーリンク