11月も後半になり今年も残すところあと僅かとなってきました。 こんにちは、rockdです。 皆さんはSVG使ってますか? はじめてSVGを使うときにイマイチよくわからないのが、viewBoxの設定です。 今回はそんなわかりづらいことで有名な(?)viewBoxについて解説していきたいと思います。 viewBoxとは? viewBoxはsvgタグの中に記述する属性です。 viewBoxを指定することで、描画エリアのアスペクト比、およびその中の要素の相対的なサイズを決定します。 viewBoxで指定できる値は4つです。 viewBox="x, y, width, height" x,yは左上からみたx座標とy座標の位置、そしてwidth,heightは描画エリアの幅(座標値)と高さ(座標値)です。 4つの値は、カンマもしくは半角スペースで区切って使うことができます。 サンプルを使って解説 vi
![SVGのviewBoxをわかりやすく紐解く|NEWS|株式会社INDETAIL(インディテール)](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4348fa061e9580cb8911ad1ea7aa7ccd88a2be2/height=288;version=1;width=512/https%3A%2F%2Fwww.indetail.co.jp%2Fwp-content%2Fuploads%2F2016%2F11%2Fviewbox_top_.png)