Gist
状態:調査中
閲覧数:2,741
投稿日:2015-02-19
更新日:2015-03-01
概念上は「画像サイズ」が存在しない
・SVG画像は平面上に無限に広がっている
・指定場所に図形を配置するだけ
インラインSVG
・SVG タグ使用
・HTML内に（インラインで）直接SVGタグでベクターパスを指定して描画するやり方
・SVG画像は平面上に無限に広がっている
・指定場所に図形を配置するだけ
用語
インラインSVG
・SVG タグ使用
・HTML内に（インラインで）直接SVGタグでベクターパスを指定して描画するやり方
<svg id="" x="0px" y="0px" width="155px" height="155px" viewBox="0 0 155 155" enable-background="new 0 0 155 155">
</svg>
viewBox … 表示範囲指定
viewBox
表示範囲指定
・4つの数値を空白区切りで記述
表示範囲左上X座標 表示範囲左上Y座標 幅 高さ
構文
viewBox(min-x，min-y，width，height);
単位
・なし
属性
・svg固有のもの
・記述した図形の座標系と表示範囲（ビューポート）を定義
svg要素左上の座標
・(x,y)
svg要素左上右下の座標
・(x+width,y+height)
外部表示サイズとviewBoxのサイズとでアスペクト比が異なる場合
・preserveAspectRatio属性にて描画方法を指定可能
・幅，高さ，viewBox属性のいずれも設定されていない場合，暗黙的に（0,0,表示上の幅,表示上の高さ）として扱われる
preserveAspectRatio属性
・10分でわかるSVG 基礎編
・「10分でわかるSVG 基礎編」サンプル
preserveAspectRatio - SVG | MDN
・svgのpreserveAspectRatio属性の動作検証
A Look At preserveAspectRatio in SVG by Joni Trythall on CodePen
www.w3.org/TR/SVG/images/coords/PreserveAspectRatio.svg
SVG Viewport and View Box | tutorials.jenkov.com
・svg要素の基本的な使い方まとめ
・座標系, 変換, 単位 – SVG 1.1 （第２版）
・「10分でわかるSVG 基礎編」サンプル
preserveAspectRatio - SVG | MDN
・svgのpreserveAspectRatio属性の動作検証
A Look At preserveAspectRatio in SVG by Joni Trythall on CodePen
www.w3.org/TR/SVG/images/coords/PreserveAspectRatio.svg
SVG Viewport and View Box | tutorials.jenkov.com
・svg要素の基本的な使い方まとめ
・座標系, 変換, 単位 – SVG 1.1 （第２版）