前の記事でsvgの「xmlns」「version」などの基本的な属性を見ました。次は図形に関わる「width」「height」属性について見ていきましょう。
「width」「height」属性
「width」「height」属性は svgの幅と高さを指定する属性です。数字だけ指定した場合、単位は「px」と見なされます。
ここで指定された幅・高さでWEBページに図が表示されます。例えば、<svg width=”100″ height=”100″・・・></svg>であれば幅100px、高さ100pxのsvg（画像）が表示されます。
では、幅100px・高さ100pxの正方形を描いてみます。
ソース（svg）を見るにはこちらをクリック▶
<svg class="square" width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" stroke-width="1" /> </svg>
「width」「height」属性の値を大きくしてみる
「width」「height」の値を大きくするとsvgのサイズが変わるか見てみましょう。「width」「height」を先ほどの2倍（200）にしてみます。
<svg class="square" width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" stroke-width="1" /> </svg>
svgが2倍の大きさになりました。
ただ、1つ不思議なことがあります。中のrectタグ（正方形を指定しているタグ）の「width」「height」は100のままなのに、正方形（中の図）も2倍の大きさになったことです。
<svg class="square" width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect x="0" y="0" width="100" height="100" fill="none" stroke="black" stroke-width="1" /> </svg>
試しにviewBoxを変更
試しに、「viewBox=”0 0 200 200″」を見てみましょう。
<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="none" stroke="black" stroke-width="1" /> </svg>
中の図が最初と同じ幅100px・高さ100pxの正方形に戻りました。ですが、同じではありません。要素の検証で確認するとよく分かりますのでご覧ください。
「width」「height」属性だけではなく「viewBox」属性もどのように図を描画するかに関連していることが分かりました。
記事の最後から次ページへ進んでいくとviewBoxのページへたどり着きます。そちらで詳しく確認・検証していますので、後程ご覧ください。
もし、先に「viewBox」を確認したい方は、下記から先に見てみてください。
スポンサーリンク
CSSでの拡大と縮小はキャンバスが拡大縮小される？
svgタグも他のタグと同様、cssでwidth、heightの指定ができます。下のsvg（図）はcssを指定していない100pxの正方形です。このsvgに対しえcssで幅・高さを指定してどのようになるか検証してみます。
<svg class="square" width="100" height="100" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0 0, 100 0, 100 100, 0 100, 0 0" fill="none" stroke="black" stroke-width="3"></polyline> </svg>
※↑実際に描画したもの（幅100px、高さ100pxの正方形）
幅を500pxに拡大（width: 500px;を指定）
style属性で「style=”width: 500px;”」を指定してみます。
何か違いがあるのは分かりますが、はっきりとは分からないかと思います。ブラウザの要素の検証で見ると分かりやすいので下記をご覧ください。
svgの幅だけが500pxになっていて、中の図は大きくなっていません。また、svg上の水平方向中心に図があるのも分かります。
直感的には中の図も拡大されそうですが、実際はsvgという枠だけが拡大されるので注意が必要です。
幅を50pxに縮小（width: 50px;を指定）
次は小さくしてみましょう。
style属性で「style=”width: 50px;”」を指定してみます。
同様に要素の検証で見てみましょう。
svgの幅だけが50pxになっています。また拡大と違いがあるのも分かります。縮小の場合は、拡大とは違い描画された図も縮小されています。これは描画される図がsvgからはみ出さないよう自動で縮小された結果です。この場合は幅が50pxになるように図が縮小されました。もう1点、svg上の垂直方向中心に図があるのも分かります。
検証「width=、height=」を指定しない場合はどうなる？
下記のように「width=、height=」は指定しない場合はどうなるのでしょう。実際に見てみましょう。
<svg class="square" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="0 0, 100 0, 100 100, 0 100, 0 0" fill="none" stroke="black" stroke-width="3"></polyline> </svg>
cssを指定しない場合
width、height属性を削除した上、cssでもwidth、heightを指定しない場合、下図のようになります。幅・高さともに単位（例えば100px）の縛りがなくなり、表示できる最大のサイズで中の図も含め拡大（縮小）して描画されます。これは、レスポンシブ視点で考えるとたいへん有用な気がします。
cssで幅500pxを指定（拡大）
style属性で「style=”width: 500px;”」を指定してみます。svgのwidth、height属性を指定していたときとは違い、「中の図も一緒に拡大縮小される」という直感的な結果になりました。これは、height属性が指定されていないことにより、高さは自動で調整されたのだと思います。
cssで幅50pxを指定（縮小）
style属性で「style=”width: 50px;”」を指定してみます。幅500pxを指定した場合と同様、svgのwidth、height属性を指定していたときとは違い、「中の図も一緒に拡大縮小される」という直感的な結果になりました。これは、height属性が指定されていないことにより、高さは自動で調整されたのだと思います。
svgの「width」「height」属性のいろいろな組み合わせを検証
次はsvgのwidth属性、height属性についてもう少し色々なパターンを検証してみたいと思います。
スポンサーリンク