SVG表示サイズ

画像 ＞ SVG

Gist

　状態:調査中 　閲覧数:2,721 　投稿日:2015-02-19 　更新日:2015-03-01
概念上は「画像サイズ」が存在しない
・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>


SVG構成

　閲覧数:807　投稿日:2015-02-19　更新日:2015-02-19

階層構造


SVG … ルートノード
　┗g
　　┗path

viewBox … 表示範囲指定

　閲覧数:830　投稿日:2015-02-19　更新日:2015-03-05

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属性

　閲覧数:781　投稿日:2015-02-19　更新日:2015-02-19
・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 （第２版）

Potrace

SVG



類似度ページランキング
順位 ページタイトル抜粋 ％
1 SVG表示サイズ 100
2 SVG 55
3 SVGイラスト素材 47
4 Vieasリサイズ 47
5 SVGアイコンを探す旅 42
6 SVGハマった点 38
7 ZorroSVG 38
8 SVGアニメーション 33
9 RGB ⇔ HSV 32
10 昔のサイト 31
11 jpg画像サイズを下げる 30
12 CSS選択範囲非表示対応 30
13 PC画面で、モバイル表示確認 27
14 トップページタイトル表示形式調査 25
15 Canvas図形が指定サイズで表示されない時は、CSSではなくCanvasタグで指定 24
16 HSV → RGB 計算方式の違い 24
17 RGB → HSL 24
18 HSV ／ HSB 24
19 HSL → RGB 24
20 HSLとHSVの違い 22
2026/4/17 23:46 更新
週間人気ページランキング ／ 4-10 → 4-16
順位 ページタイトル抜粋 アクセス数
1 Design 0 20
2 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 | Chrome 拡張機能 17
3 Chromeシークレットモードで、ウインドウ幅をリサイズしようとすると、下限制限を受ける | Google Chrome(ブラウザ) 16
3 「Default User」を削除したら、既存ブックマークが削除されてしまった！ 16
4 Material Design 2014 年 | Material Design(色) 15
4 Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する | Illustrator CS3(Illustrator) 15
5 Adobe Camera Raw 4.0 | Photoshop 13
6 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 11
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 9
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
9 Photoshop無料アクションファイル(atn)導入見送り | Photoshop 6
10 「.aiファイル」を下位バージョンで保存するための操作手順 ／ OS 上で「.aiファイル」から「作成したIllustratorバージョン」を確認する方法 ／ 下位バージョンのIllustratorで開く方法 5
10 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 5
10 鉄道会社毎のカラーコード | カラーコード(色) 5
11 画像縦横比の問題 | 画像 4
11 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
11 RGBの種類 ／ ビットカラー | RGB(色) 4
12 RGB ⇔ Lab | 色変換(色) 3
12 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
12 「bgcolor」「background-color」「background」の違い | CSS 3
2026/4/17 5:05 更新