【SVG】17パターン検証!svgのwidth、heightをcssで設定し分析!

1つ前と2つ前の記事でsvgの「width」「height」属性の組み合わせを20パターン見てきました。次はCSSで「width」「height」を設定した場合どのような結果になるか見ていきたいと思います。17パターン試しましたので見ていきましょう。

目次(SVGについて複数ページ書いてます)

検証で使用する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>

2.cssで「width」「height」変更の検証

検証方法は「style」属性を用いて「style=”width: 200px; height: 200px;」と指定して検証しました。

まず、17件の検証結果から分かったことを書いておきます。

  • cssで「width」「height」どちらも設定した場合(2-1から2-9)は「1.width、heightの検証」と同じ結果になる
  • cssで「width」「height」のどちらか一つしか指定していない場合、指定されていない方はsvgの「width」「height」属性から「200px」と見なされる
    ※下記「2-10(追加検証)svgの「width」属性を300にする」「2-11(追加検証)svgの「height」属性を300にする」でsvgの「width」「height」属性に依存することを検証しています

2-1.width=200px、height=200px(1倍)

引用:Firefoxの要素の検証
svg 中の図
200px 200px(設定は200)
高さ 200px 200px(設定は200)

「svg」と「中の図」が同じサイズです。値が同じなので当然の結果かと思います。
「1.svgの「width」「height」属性の検証」の「1-1.width=200、height=200」と同じ結果です

2-2.width=400px、height=400px(2倍)

引用:Firefoxの要素の検証
svg 中の図
400px 400px(設定は200)
高さ 400px 400px(設定は200)

「svg」と「中の図」が同じサイズです。中の図の指定は幅、高さともに「200px」ですがsvgに合わせて「400px」になりました。
※詳しくはviewBoxとの関係がありますので、次の記事で検証していきます
「1.svgの「width」「height」属性の検証」の「1-2.width=400、height=400」と同じ結果です

2-3.width=100px、height=100px(0.5倍)

引用:Firefoxの要素の検証
svg 中の図
100px 100px(設定は200)
高さ 100px 100px(設定は200)

「svg」と「中の図」が同じサイズです。中の図の指定は幅、高さともに「200px」ですがsvgに合わせて「100px」になりました。
※詳しくはviewBoxとの関係がありますので、次の記事で検証していきます
「1.svgの「width」「height」属性の検証」の「1-3.width=100、height=100」と同じ結果です

2-4.width=400px、height=200px(幅だけ2倍)

引用:Firefoxの要素の検証
svg 中の図
400px 200px(設定は200)
高さ 200px 200px(設定は200)

「svg」と「中の図」の高さは同じサイズで、幅はサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(高さ)に合わせて「200px」のままでした。
※詳しくはviewBoxとの関係がありますので、次の記事で検証していきます
「1.svgの「width」「height」属性の検証」の「1-4.width=400、height=200」と同じ結果です

2-5.width=200px、height=400px(高さだけ2倍)

引用:Firefoxの要素の検証
svg 中の図
200px 200px(設定は200)
高さ 400px 200px(設定は200)

「svg」と「中の図」の幅は同じサイズで、高さはサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(幅)に合わせて「200px」のままでした。
※詳しくはviewBoxとの関係がありますので、次の記事で検証していきます
「1.svgの「width」「height」属性の検証」の「1-5.width=200、height=400」と同じ結果です

2-6.width=100px、height=200px(幅だけ0.5倍)

引用:Firefoxの要素の検証
svg 中の図
100px 100px(設定は200)
高さ 200px 100px(設定は200)

「svg」と「中の図」の幅は同じサイズで、高さはサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(幅)に合わせて「100px」になりました。
※詳しくはviewBoxとの関係がありますので、次の記事で検証していきます
「1.svgの「width」「height」属性の検証」の「1-6.width=100、height=200」と同じ結果です

2-7.width=200px、height=100px(高さだけ0.5倍)

引用:Firefoxの要素の検証
svg 中の図
200px 100px(設定は200)
高さ 100px 100px(設定は200)

「svg」と「中の図」の高さは同じサイズで、幅はサイズが異なる結果になりました。中の図の指定は幅、高さともに「200px」ですがsvgの短い方(高さ)に合わせて「100px」になりました。
※詳しくはviewBoxとの関係がありますので、次の記事で検証していきます
「1.svgの「width」「height」属性の検証」の「1-7.width=200、height=100」と同じ結果です

2-8.height=200px(widthの指定なし)

引用:Firefoxの要素の検証
svg 中の図
200px(cssは未設定) 200px(設定は200)
高さ 200px 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」属性が適応されたことが分かります。

引用:Firefoxの要素の検証
svg 中の図
100px(cssは未設定) 100px(設定は200)
高さ 200px 200px(設定は200)

予想したとおり、svgの「width」属性の100pxが適応されました。

2-9.width=200px(heightの指定なし)

引用:Firefoxの要素の検証

「1.svgの「width」「height」属性の検証」の「1-9.width=200(heightの指定なし)」と同じ結果です

svg 中の図
200px 200px(設定は200)
高さ 200px(cssは未設定) 200px(設定は200)

「svg」と「中の図」が同じサイズです。heightは指定していませんが、svgの「height」属性の「200」が適応されたと考えられます。

2-9(追加検証)svgの「height」属性を100にする

追加検証として、svgの「height」属性を100にしてみます。よって、svgの高さが自動で100pxになれば、svgの「height」属性が適応されたことが分かります。

引用:Firefoxの要素の検証
svg 中の図
200px 200px(設定は200)
高さ 100px(cssは未設定) 100px(設定は200)

予想したとおり、svgの「height」属性の100pxが適応されました。

2-10.height=400px(widthの指定なし、高さ2倍)

 

引用:Firefoxの要素の検証
svg 中の図
200px(cssは未設定) 200px(設定は200)
高さ 400px 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にする」と同様の検証ですが、値を大きくするパターンとして検証します。

 

引用:Firefoxの要素の検証
svg 中の図
300px(cssは未設定) 300px(設定は200)
高さ 400px 300px(設定は200)

予想したとおり、svgの「width」属性の300pxが適応されました。

2-11.width=400px(heightの指定なし、幅2倍)

引用:Firefoxの要素の検証
svg 中の図
400px 200px(設定は200)
高さ 200px(cssは未設定) 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にする」と同様の検証ですが、値を大きくするパターンとして検証します。

引用:Firefoxの要素の検証
svg 中の図
400px 300px(設定は200)
高さ 300px(cssは未設定) 300px(設定は200)

予想したとおり、svgの「height」属性の300pxが適応されました。

2-12.height=100px(widthの指定なし、高さ0.5倍)

引用:Firefoxの要素の検証
svg 中の図
200px(cssは未設定) 100px(設定は200)
高さ 100px 100px(設定は200)

「2-8.height=200px(widthの指定なし)」の検証結果より、cssで「width」を指定していない場合、svgの「width」属性が適応されるはずです。予想どおり、上記結果もsvgの「width」属性「200」が適応され、幅が200pxとなりました。ただし、中の図は高さが100pxのため、幅も100pxに縮小されています。

2-13.width=100px(heightの指定なし、幅0.5倍)

引用:Firefoxの要素の検証
svg 中の図
100px 100px(設定は100)
高さ 200px(cssは未設定) 100px(設定は200)

「2-9.width=200px(heightの指定なし)」の検証結果より、cssで「height」を指定していない場合、svgの「height」属性が適応されるはずです。予想どおり、上記結果もsvgの「height」属性「200」が適応され、高さが200pxとなりました。ただし、中の図は幅が100pxのため、高さも100pxに縮小されています。

svgの「viewBox」はどういったものかイメージしてみる

次はsvgの「viewBox」がどういったものかイメージしてみたいと思います。カメラで写真を撮ることと比較しながら、理解を深めたいと思います。