---
title: Positions
slug: Web/SVG/Tutorial/Positions
tags:
  - SVG
  - 'SVG:Tutorial'
translation_of: Web/SVG/Tutorial/Positions
---
<p>{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}</p>
<p>{{ 英語版章題("The grid") }}</p>
<h2 id="The_grid" name="The_grid">グリッド</h2>
<p><img align="right" alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="">すべての要素向けに、SVG は <a href="/ja/HTML/Canvas" title="ja/HTML/Canvas">canvas</a> (あるいはその他多くのコンピュータによる描画ルーチン) で使われているものと似た座標システムまたはグリッドシステムを用います。これは、ドキュメントの左上隅を点 (0, 0) として考えます。よって位置は、左上隅から右方向へ伸びる正の X 軸と下方向へ伸びる正の Y 軸により、ピクセル数で測定されます。この座標は、子供の頃に教わったグラフのものとは逆向きであることに注意してください。しかし、これは HTML の要素を配置する場合と同じです。</p>
<h4 id="例">例:</h4>
<p>以下の要素は、左上隅から右および下へ 100px の範囲を占める長方形を表します。</p>
<pre>&lt;rect x="0" y="0" width="100" height="100" /&gt;
</pre>
<p>{{ 英語版章題("What are .22pixels.22.3F") }}</p>
<h3 id="ピクセル_とは">"ピクセル" とは</h3>
<p>ほとんどの基本的なケースにおいて、SVG ドキュメントの 1 ピクセルは出力デバイス (例えばスクリーン) の 1 ピクセルに対応します。 しかしこの動作を変えることができないのであれば、SVG の名称内に "Scalable" はなかったでしょう。CSS のフォントサイズで絶対値と相対値があるように、SVG でも絶対単位 ("pt" や "cm" など寸法の識別子) と、単位が欠落して数値だけのいわゆる{{ 原語併記("ユーザー単位", "user units") }}があります。</p>
<p>特に明示しなければ、1 ユーザー単位は 1 スクリーン単位と同じです。明示的にこの動作を変えるための手段が SVG にあります。以下の <code>svg</code> ルート要素から始める場合:</p>
<pre>&lt;svg width="100" height="100"&gt;
</pre>
<p>上記の要素は、100x100px のシンプルな SVG キャンバスを定義します。1 ユーザー単位は 1 スクリーン単位と同じです。</p>
<pre>&lt;svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>&gt;
</pre>
<p>この場合、SVG キャンバス全体のサイズは縦横ともに 200px です。しかし <code>viewBox</code> 属性が、表示するキャンバスの部分を定義しています。これら 200x200 ピクセルの領域は、ユーザー単位 (0, 0) から始まり右方向および下方向に 100x100 ユーザー単位を占める領域を表示します。これは実質的に 100x100 単位の領域をズームインし、画像を 2 倍のサイズに引き伸ばします。</p>
<p>現行の (単一の要素またはイメージ全体への) ユーザー単位とスクリーン単位間のマッピングは、<strong>{{ 原語併記("ユーザー座標系", "user coordinate system") }}</strong> と呼ばれます。座標系から離れることで、回転・変形・反転を行うこともできます。デフォルトのユーザー座標系は、1 ユーザーピクセルを 1 デバイスピクセルに割り当てます。(ただし、デバイスは何を 1 ピクセルとして扱うかを決めることができるかもしれません。) SVG ファイルで "in" や "cm"など 特定の寸法である長さは、結果の画像で 1:1 で見えるようにする方法で計算されます。</p>
<p>これを説明する SVG 1.1 の仕様を引用します:</p>
<blockquote> <p>[...] suppose that the user agent can determine from its environment that "1px" corresponds to "0.2822222mm" (i.e., 90dpi). Then, for all processing of SVG content: [...] "1cm" equals "35.43307px" (and therefore 35.43307 user units)</p> <p><code>{{ 訳注("以下は参考訳文") }}</code>(前略) ユーザーエージェントは自身の環境から、"1px" を "0.2822222mm" に対応づける (すなわち 90dpi) と仮定します。すると、SVG コンテンツの処理において (中略) "1cm" は "35.43307px" (よって、35.43307 ユーザー単位) と一致します。</p>
</blockquote>
<p>{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}</p>
<p><span class="comment">Interwiki Languages Links</span></p>
<p>{{ languages( { "en": "en/SVG/Tutorial/Positions", "fr": "fr/SVG/Tutoriel/Positionnement"} ) }}</p>