SVGのサイズの知識
SVG（Scalable Vector Graphics）タグの簡単なお勉強
目次
SVGタグの使い方
次のようなコードを書くと青い丸が表示されます。
<svg width="100" height="100" viewBox="0 0 100 100" style="background: #eee">
<circle cx="50" cy="50" r="50" fill="blue" />
</svg>
ちなみにsvgタグはインライン要素です。
width, height
width, height は、ブラウザに表示するサイズの大きさを定義します。
viewbox
viewBox=”基点X 基点Y サイズX サイズY”
viewbox は、SVGで描画されている空間からどの範囲をClipするかを指定します。
viewBoxの数字の区切りは空白、カンマを使用できます。sampleを見ると空白を使用しているほうが多い印象ですね。
viewBoxとは
表示域をClipします。
<svg width="300" height="300" viewBox="0 0 300 300" style="background: #eee">
<circle cx="50" cy="50" r="50" fill="blue" />
</svg>width=”300″ height=”300″ …300pxの表示するサイズです。
viewBox=”0 0 300 300″ …0~300の範囲を表示します。
circle cx=”50″ cy=”50″ r=”50″ …x:50,y:50 に、半径50の円を描きます。
50pxでブラウザに描画されるかは、表示サイズやviewBox次第。
viewBox=”0 0 100 100″ に変更。
viewBox=”0 0 50 50″ に変更。
見える範囲が狭くなりましたね。円の左上部だけ見えています。
viewBox=”50, 50, 200, 200″…円の中心座標から200pxの大きさの窓です。円の右下が小さく見えています。
もう一つの例は、viewBox=”50, 50, 2000, 2000″です。
viewBoxを動かしてみる
x座標の基点を動かしてみました。
viewBox=”x 0 200 200″ …xを変更します。
viewBoxが、右シフトしていますね。円は左に見切れていっています。カメラを右にパンした感じですね。
ちょっと関係無いんですけど、ソースコードも見ていください。textタグもviewBoxに合わせて移動させています。移動させないとtextも見切れてしまいます。
viewBoxを10px右に移動したSample
<svg width="200" height="200" viewBox="10 0 200 200" style="background: #eee">
<circle cx="50" cy="50" r="50" fill="blue" />
<text x="10" y="90%" font-size="1rem" fill="green">10 0 200 200</text>
</svg>width,heightとは
表示されるサイズを定義します。
20px, 50px 100pxで表示してみました。
Aspect比の確認。中央寄りに配置されますね。
width, height, viewboxが未定義の場合
自動で300×150のサイズになるようです。FirefoxもChromeも同じサイズでした。
width, heightのみ定義
表示サイズが決まります。viewBoxは同じ範囲になります。
width=”100″ height=”100″
width=”200″ height=”200″
viewBoxのみ定義
viewBox=”0 0 100 100″
表示サイズは決まらずにStrechします。親要素の大きさまで伸縮します。
レスポンシブルでしょうか。
viewBox=”50 50 100 100″
percent
widthの指定に%は使えます。viewBoxには使用できないようです。
親divコンテナのサイズを適当に決めて、svgタグのサイズは100%を指定した例です。
親divにpadding:1remを指定しています。
.test-box1 {
box-sizing: border-box;
width: 100%;
height: 20vh;
padding: 1rem;
background-color: cadetblue;
}
</style>
<div class="test-box1">
<svg
width="100%"
height="100%"
viewBox="0 0 100 100"
style="background: #eee"
>
<circle cx="50" cy="50" r="50" fill="blue" />
</svg>
viewBoxのサイズが小さいと中央よりになるようですね。
viewBoxの拡縮
width=200 height=200 / cx=50 cy=50 r=50
viewBoxが小さい場合は中央に寄るようです。
ただし、viewBoxのサイズが小さいときは、そんなに直感的な配置でないと感じます。
viewBoxのサイズが小さい時
viewBoxのサイズが小さいと中央に寄ります。
width=”200″ height=”200″ / viewBox=”0, 0, x, 200″
viewBoxのx値を変更してみた。x : 200 → 0.1
viewBoxのxの幅が50より狭くなったときの挙動がよくわかりませんでした。
viewBoxのy座標の変更もx軸に影響したりするように見えてします。
そもそもよくわかないviewBoxの設定をしないようにしようと思います。
preserveAspectRatio
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
width=”200″ height=”200″ viewBox=”0, 0, 100, 200″
preserveAspectRatioを適当に設定してみます。
viewBoxの比が、座標に影響しているかもしれません。
まぁでも、しっかりと理解できるサイズを設定すればいいですね。
preserveAspectRatio をSVGタグに付加するとアスペクトは保持されるようですね。
そもそも、viewBoxの比を保てばいいのだが、そうできないときもあるのかな？
memo
svgはinline。並べたときに隙間が出来たら、きっとそれは改行です。
svgは、ちょっと難しいかなと感じました。
link
SVG mdn
SVG教本 mdn
SCALABLE VECTOR GRAPHICS (SVG) w3c
An SVG Primer for Today’s Browsers w3c
Learning Inkscape Inkscapeはオープンソースで開発されているベクター画像編集ソフトウェアです。SVG関連の記述もあり。