8. 座標系, 変形, 単位 — Coordinate Systems, Transformations and Units

8.1. 序論

すべての SVG 内容は、 SVG 表示域 （ SVG viewport ）の内側に描かれる。 どの SVG 表示域も、 サイズ（横幅, 縦幅), 原点で特徴付けられ，抽象的な 利用元単位 （ user unit ）で測定される描画領域を定義する。 All SVG content is drawn inside SVG viewports. Every SVG viewport defines a drawing region characterized by a size (width, height), and an origin, measured in abstract user units.

注記： 用語 SVG 表示域は、 CSS に利用される用語 “表示域” とは別物であることに注意。 Note that the term SVG viewport is distinct from the "viewport" term used in CSS.

初期表示域 （ initial viewport ）は、 トップレベルの SVG 表示域であり， 包含している環境が利用している座標系（例えば, web ブラウザにおいては CSS px ）と利用元単位との間に対応付けを確立する。 その確立法の詳細は、 § 初期表示域にてに述べる。 The initial viewport is a top-level SVG viewport that establishes a mapping between the coordinate system used by the containing environment (for example, CSS pixels in web browsers) and user units. Establishing an initial viewport is described in more detail in The initial viewport.

SVG 表示域を確立するものは、 要素に限られる。 どの要素が表示域を生成するかについての情報は、 § 新たな SVG 表示域の確立法を見よ。 SVG viewports are only established by elements. See Establishing a new SVG viewport for information on which elements generate viewports.

各 SVG 表示域は、 表示域座標系, 利用元座標系 を生成する — これらは、初期時には一致する。 利用元座標系は、 [css-transforms-1] にて定義される。 表示域を確立している要素が viewBox が供している場合、 利用元座標系は，表示域座標系に相対的に変形される — viewBox 属性を見よ。 要素の子孫は — 例えば transform プロパティを指定することにより — 利用元座標系を更に改変できる。 Each SVG viewport generates a viewport coordinate system and a user coordinate system, initially identical. Providing a ‘viewBox’ on a viewport's element transforms the user coordinate system relative to the viewport coordinate system as described in The ‘viewBox’ attribute. Child elements of a viewport can further modify the user coordinate system, for example by specifying the transform property.

SVG 表示域は、入れ子にできる。 百分率単位は、［ 表示域を定義する先祖の要素のうち，最も近いものの利用元座標系 ］を基準に解決される — § 単位にて定義されるように。 よって，SVG 表示域を入れ子にすることは、［ 百分率単位の意味を定義し直す機会 ／ グラフィックをある特定の矩形な区画に相対的に “収める” ための新たな基準矩形 ］を供する。 最も遠い先祖の SVG 表示域 とは、最外縁の svg 要素の SVG 表示域である。 先祖 SVG 表示域は、 DOM ツリー順序に依存することもある【？】。 例：［ linearGradient, radialGradient, pattern, mask, clipPath symbol, use ］要素に対するときなど。 SVG viewports can be nested. Percentage units are resolved with reference to the user coordinate system of the nearest ancestral viewport-defining element, as defined in the section on Units. Hence, nesting SVG viewports provides an opportunity to redefine the meaning of percentage units and provide a new reference rectangle for "fitting" a graphic relative to a particular rectangular area. The furthest ancestral SVG viewport is the top most root SVG viewport with out leaving the SVG context. An ancestor SVG viewport might not be independent of the DOM tree order. E.g for ‘linearGradient’, ‘radialGradient’, ‘pattern’, ‘mask’, ‘clipPath’ ‘symbol’ or ‘use’ elements.

SVG 表示域の［ 横幅, 縦幅, 原点 ］は、［ SVG 表示域を生成している SVG 文書片と，その素片の親 ］との間の（場合によっては暗黙的な）折衝処理により確立される。 この折衝処理については、 § 新たな SVG 表示域の確立法を見よ。 The width, height and origin of SVG viewports is established by a negotiation process between the SVG document fragment generating the SVG viewport, and the parent of that fragment (whether real or implicit). See Establishing a new SVG viewport for a description of this negotiation process.

既定では、入れ子な SVG 表示域の表示域座標系は、［ それを確立した要素 要素 の親の利用元座標系を 要素 の原点【？】で並進したもの ］に等価になる。 しかしながら， 要素 上の transform プロパティは、 表示域座標系を親の利用元座標系に相対的に改変することになる。 By default, a nested SVG viewport's viewport coordinate system is equivalent to the local coordinate system of the parent element, translated by the origin of the SVG viewport's element. However, a transform property on an SVG viewport's element will modify the viewport coordinate system relative to the parent element's user coordinate system.

抽象的には、すべての SVG 表示域は，［ キャンバス と呼ばれる，【同じ一つの？】無限に広い描画領域 ］に埋め込まれる。 Abstractly, all SVG viewports are embedded in the canvas, a drawing region that is infinitely large in all relevant dimensions.

8.2. SVG 表示域に等価な変形の算出法

以下に与える処理は、 所与の要素の［ viewBox 属性の値, 位置とサイズ, preserveAspectRatio 属性の値 ］を［ 要素に包含されている内容に適用される，並進と拡縮率 ］へ変換する： This process converts the min-x, min-y, width and height values of a viewBox attribute, the position and size of the element on which the viewBox attribute is defined, and the value of the preserveAspectRatio attribute on that element into a translation and a scale that is applied to content contained by the element.

【 viewBox 属性の値が妥当でない場合、 指定されなかったかのようになる（初期値）ので，この手続きも適用されない（ preserveAspectRatio 属性も無視される）。 】

1. ( vb-x, vb-y, vb-横幅, vb-横幅 ) :← 順に， viewBox 属性の ( <min-x>, <min-y>, <width>, <height> ) Let vb-x, vb-y, vb-width, vb-height be the min-x, min-y, width and height values of the viewBox attribute respectively.
2. ( e-x, e-y ) :← 要素の位置 ↓
3. ( e-横幅, e-縦幅 ) :← 要素のサイズ Let e-x, e-y, e-width, e-height be the position and size of the element respectively.
4. align :← ［ 要素は preserveAspectRatio 属性を有するならば その <align> 値 ／ 他の場合は xMidYMid ］ Let align be the align value of preserveAspectRatio, or 'xMidYMid' if preserveAspectRatio is not defined.
5. meetOrSlice :← ［ 次が満たされるならば slice ／ 他の場合は meet ］ ：要素は preserveAspectRatio 属性を有していて，その値に <meetOrSlice> 値として slice が供されている Let meetOrSlice be the meetOrSlice value of preserveAspectRatio, or 'meet' if preserveAspectRatio is not defined or if meetOrSlice is missing from this value.
6. scale-x ← e-横幅 ÷ vb-横幅 Initialize scale-x to e-width/vb-width.
7. scale-y ← e-縦幅 ÷ vb-縦幅 Initialize scale-y to e-height/vb-height.

8. IF［ align ≠ none ］： ↓

   1. scale-x ← meetOrSlice に応じて ：meet ならば min( scale-x, scale-y ) ／ slice ならば max( scale-x, scale-y ) If align is not 'none' and meetOrSlice is 'meet', set the larger of scale-x and scale-y to the smaller.Otherwise, if align is not 'none' and meetOrSlice is 'slice', set the smaller of scale-x and scale-y to the larger.
   2. scale-y ← scale-x ↑
9. translate-x :← e-x − ( vb-x × scale-x ) Initialize translate-x to e-x - (vb-x * scale-x).
10. translate-y :← e-y − ( vb-y × scale-y ) Initialize translate-y to e-y - (vb-y * scale-y)
11. IF［ align ∈ { xMidYMin, xMidYMid, xMidYMax } ］ ：translate-x += ( e-横幅 − vb-横幅 × scale-x ) ÷ 2 If align contains 'xMid', add (e-width - vb-width * scale-x) / 2 to translate-x.
12. IF［ align ∈ { xMaxYMin, xMaxYMid, xMaxYMax } ］ ：translate-x += ( e-横幅 − vb-横幅 × scale-x ) If align contains 'xMax', add (e-width - vb-width * scale-x) to translate-x.
13. IF［ align ∈ { xMinYMid, xMidYMid, xMaxYMid } ］ ：translate-y += ( e-縦幅 − vb-縦幅 × scale-y ) ÷ 2 If align contains 'yMid', add (e-height - vb-height * scale-y) / 2 to translate-y.
14. IF［ align ∈ { xMinYMax, xMidYMax, xMaxYMax } ］ ：translate-y += ( e-縦幅 − vb-縦幅 × scale-y ) If align contains 'yMax', add (e-height - vb-height * scale-y) to translate-y.
15. RETURN 次に与える値が表現する変形 ：translate( translate-x, translate-y) scale( scale-x, scale-y ) The transform applied to content contained by the element is given by translate(translate-x, translate-y) scale(scale-x, scale-y).

8.3. 初期表示域

SVG 内容の初期表示域の横幅は、 次に従って決定されるものとする： The initial viewport's width, must be＼

1. IF［ ∧↓ ］… the value of the width presentation attribute on the outermost svg element, unless the following conditions are met:

   • SVG 内容は、［ 参照により埋め込まれたリソースに別々に格納されている（ HTML 内の object 要素など）か ある文書の中にインラインに埋め込まれている ］ the SVG content is a separately stored resource that is embedded by reference (such as the ‘object’ element in HTML), or the SVG content is embedded inline within a containing document;
   • 参照元の要素／包含している文書は，CSS を利用してスタイルされている [CSS2] and the referencing element or containing document is styled using CSS [CSS2];
   • ［ 参照元の要素（例： object 要素）／ 包含している文書の最外縁の svg 要素 ］上に CSS に互換な位置決めプロパティ [CSS2] が指定されていて，表示域の横幅を確立するに足るものである and there are CSS-compatible positioning properties ([CSS2], section 9.3) specified on the referencing element (e.g., the ‘object’ element) or on the containing document's outermost svg element that are sufficient to establish the width of the viewport.

   …ならば ：RETURN 位置決めプロパティを介して確立される結果の横幅 Under these conditions, the viewport's width must be established via the positioning properties.

2. RETURN 最外縁の svg 要素上の width 呈示属性の値 【初期値 auto の場合、 100% として扱われることになる。】 ↑

SVG 内容の初期表示域の横幅は、 上の手続きの［ 横幅を縦幅, width を height ］に読み替えて決定されるものとする。 Similarly, if there are positioning properties specified on the referencing element or on the outermost svg element that are sufficient to establish the height of the viewport, then these positioning properties must establish the viewport's height; otherwise, the initial viewport's height must be the value of the height presentation attribute on the outermost svg element.

最外縁の svg 要素上の［ width ／ height ］呈示属性は，利用元単位による値をとる場合（すなわち単位識別子は供されていない）、 その単位は px と見做される（§ 単位を見よ）。 If the width or height presentation attributes on the outermost svg element are in user units (i.e., no unit identifier has been provided), then the value is assumed to be equivalent to the same number of "px" units (see Units).

<?xml version="1.0" standalone="yes"?>
<parent xmlns="http://some.url">

   <!-- 
SVG グラフィック
SVG graphic -->
   <svg xmlns='http://www.w3.org/2000/svg'
      width="100px" height="200px">
      <path d="M100,100 Q200,400,300,100"/>
      <!-- 
SVG グラフィックの残りはここに来る
rest of SVG graphic would go here -->
   </svg>

</parent>

8.4. 初期座標系

SVG UA は、 最外縁の svg 要素用の 初期時の［ 表示域座標系, 利用元座標系 ］を ∧↓ を満たすように決定するものとする： For the outermost svg element, the SVG user agent must determine an initial viewport coordinate system and an initial user coordinate system such that＼

• 両座標系は互いに一致する。 the two coordinates systems are identical.＼
• 両座標系の原点は SVG 表示域の原点に一致する The origin of both coordinate systems must be at the origin of the SVG viewport,＼
• 両座標系とも， 1 単位は SVG 表示域における 1 px に等しい（[CSS2] ／ [css-values] ）。 and one unit in the initial coordinate system must equal one CSS 2.1 px ([CSS2], section 4.3.2) in the SVG viewport.

自立的 SVG 文書, および［ 親文書の中に（参照またはインラインにより）埋め込まれた SVG 文書片であって，親のレイアウトは CSS により決定されているもの [CSS2] ］は、その初期時の表示域座標系（したがって初期時の利用元座標系）は，次を満たすものとする： In stand-alone SVG documents and in SVG document fragments embedded (by reference or inline) within parent documents where the parent's layout is determined by CSS [CSS2], the initial viewport coordinate system (and therefore the initial user coordinate system) must

• 原点は、表示域の左上隅にある have its origin at the top/left of the viewport,＼
• ［ 正な x 軸は右方を指し，正な y 軸は下方を指す ］ with the positive x-axis pointing towards the right, the positive y-axis pointing down,＼
• テキストは “正立” 方位で描画される — すなわち，各グリフのうち［ Roman 文字, アジアのスクリプト用の full-size ideographic 文字【かな漢字等】 ］に対応するものは、 その［ 上端辺は上方, 右端辺は右方 ］へ方位されることを意味する。 and text rendered with an "upright" orientation, which means glyphs are oriented such that Roman characters and full-size ideographic characters for Asian scripts have the top edge of the corresponding glyphs oriented upwards and the right edge of the corresponding glyphs oriented to the right.

SVG 実装が［ CSS 2.1互換 px 単位を利用している文書のスタイル付けをサポートする UA ］の一部を成す場合、 SVG UA は，自身の 1 px 単位のサイズ用の初期値を［ 現実の単位において，他のスタイル付け演算用に利用される値に合致する ］ように設定するべきである。 他の場合、 UA は， 1 px 単位のサイズを［ 自身の環境から決定できるならば その値を利用する ／ 他の場合は 適切なサイズを選ぶ ］べきである。 いずれにせよ、 1 px のサイズは [CSS2] に述べられる規則に適合させるものとする。 If the SVG implementation is part of a user agent which supports styling documents using CSS 2.1 compatible px units, then the SVG user agent should set its initial value for the size of a px unit in real world units to match the value used for other styling operations; otherwise, if the user agent can determine the size of a px unit from its environment, it should use that value; otherwise, it should choose an appropriate size for one px unit. In all cases, the size of a px must be in conformance with the rules described in CSS 2.1 ([CSS2], section 4.3.2).

下の例 InitialCoords に，初期座標系の原点は左上隅にあり，x 軸は右を指し，y 軸は下方を指している様子を示す。 初期時の利用元座標系の 1 利用元単位は、 親の（暗黙的な／明示的な）UA の “画素” に等しい。 Example InitialCoords below shows that the initial coordinate system has the origin at the top/left with the x-axis pointing to the right and the y-axis pointing down. The initial user coordinate system has one user unit equal to the parent (implicit or explicit) user agent's "pixel".

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="100px" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  <desc>
例
InitialCoords 
— SVG の初期座標系
Example InitialCoords - SVG's initial coordinate system</desc>

  <g fill="none" stroke="black" stroke-width="3" >
    <line x1="0" y1="1.5" x2="300" y2="1.5" />
    <line x1="1.5" y1="0" x2="1.5" y2="100" />
  </g>
  <g fill="red" stroke="none" >
    <rect x="0" y="0" width="3" height="3" />
    <rect x="297" y="0" width="3" height="3" />
    <rect x="0" y="97" width="3" height="3" />
  </g>
  <g font-size="14" font-family="Verdana" >
    <text x="10" y="20">(0,0)</text>
    <text x="240" y="20">(300,0)</text>
    <text x="10" y="90">(0,100)</text>
  </g>
</svg>

この例を SVG で見る（要ブラウザ対応）

8.5. transform プロパティ

UA は、 [css-transforms-1] に定義される transform プロパティ, それ用の呈示属性をサポートするものとする。 User agents must support the transform property and presentation attribute as defined in [css-transforms-1].

8.6. viewBox 属性

viewBox
値	[ <min-x>,? <min-y>,? <width>,? <height> ]
初期値	指定されていないかのようになる。【特に、値が妥当でない場合。】
アニメート可？	可

Name Value Initial value Animatable viewBox [<min-x>,? <min-y>,? <width>,? <height>] As if not specified. yes

<min-x>
	= <number>
<min-y>
	= <number>
<width>
	= <number>
<height>
	= <number>

svg 要素上の変形は、 viewBox 属性に因り，ちょっと特別である。 変形は［ svg には，その変形が設定された親要素がある ］かのように適用されるべきである ：RESOLUTION： transform プロパティは、 概念的には svg 要素の外側に適用され、 視覚的な結果において，呈示属性とスタイルプロパティの間に相違は無い （参照先）。 Transform on the ‘svg’ element is a bit special due to the ‘viewBox’ attribute. The transform should be applied as if the ‘svg’ had a parent element with that transform set.＼RESOLUTION: transform property applies conceptually to the outside of the 'svg' element and there is no difference between presentation attribute and style property (in terms of the visual result).

注記： viewBox 属性は、 preserveAspectRatio 属性と併用されたときは，SVG 表示域をある特定のコンテナ要素に収まるよう伸縮する能力を供する。 The ‘viewBox’ attribute, in conjunction with the ‘preserveAspectRatio’ attribute, provides the capability to stretch an SVG viewport to fit a particular container element.

viewBox 属性の値は、［［ 0 個以上の空白, 0 〜 1 個のカンマ ］が成す，空でない文字列 ］で分離された 4 個の数［ <min-x>, <min-y>, <width>, <height> ］からなり、［ preserveAspectRatio 属性も織り込む下で，所与の要素が確立する SVG 表示域の限界域に対応付けられるべき矩形 ］を，【要素の内容における】利用元空間内で指定する。 この矩形 — すなわち、［ 左上隅の座標は ( <min-x>, <min-y> ), 横幅 <width>, 縦幅 <height> ］にされた矩形 — は、要素の viewbox と称される。 【この用語 viewbox は、他所を簡潔に述べるための，この訳による追加。】 The value of the ‘viewBox’ attribute is a list of four numbers <min-x>, <min-y>, <width> and <height>, separated by whitespace and/or a comma, that specify a rectangle in user space that should be mapped to the bounds of the SVG viewport established by the given element, taking into account the ‘preserveAspectRatio’ attribute.＼

viewBox 属性が在る場合、 表示域座標系には［ SVG 表示域に等価な変形の算出法に述べた変換 ］が適用されることになる。 The presence of the ‘viewBox’ attribute results in a transformation being applied to the viewport coordinate system as described in Computing the equivalent transform of an SVG viewport.

［ <width> ／ <height> ］に対しては、［ 負な値は，エラーであり viewBox 属性を無効化する。 値 0 は，要素の描画を不能化する ］。 A negative value for <width> or <height> is an error and invalidates the ‘viewBox’ attribute. A value of zero disables rendering of the element.

例 ViewBox は、最外縁の svg 要素上の viewBox 属性の利用を図解する — それは、［ SVG 内容は、 SVG 表示域の限界域に収まるように伸縮するべきである ］ことを指定する。 Example ViewBox illustrates the use of the ‘viewBox’ attribute on the outermost svg element to specify that the SVG content should stretch to fit bounds of the SVG viewport.

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>
例 ViewBox
—
viewBox 属性を利用して，初期時の利用元座標系を自動的に作成する。
それにより、
グラフィックは SVG 表示域の中へ収まるよう拡縮される
— SVG 表示域のサイズが何であれ。
Example ViewBox - uses the viewBox attribute to automatically create an initial user coordinate system which causes the graphic to scale to fit into the SVG viewport no matter what size the SVG viewport is.</desc>

  <!-- 
この矩形は、
利用元座標系において，
( 0, 0 ) から ( 1500,1000 ) までにわたる。
svg 要素には viewBox 属性があるので、
矩形は SVG 内容用に予約された区画全体を埋めることになる。
This rectangle goes from (0,0) to (1500,1000) in user coordinate system. Because of the viewBox attribute above, the rectangle will end up filling the entire area reserved for the SVG content. -->
  <rect x="0" y="0" width="1500" height="1000"
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- 
大きな赤い三角形
A large, red triangle -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z"/>
  <!-- 
SVG 表示域の横幅ほぼ全体を占めるテキスト
A text string that spans most of the SVG viewport -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    Stretch to fit
  </text>
</svg>

この例を SVG で見る（要ブラウザ対応）

viewBox 属性の効果は、［ 利用元座標系内で指定された矩形を，指名された領域（SVG 表示域であることが多い）の限界域へ対応付ける ］ような適切な変換行列を， UA が自動的に給するようにする。 SVG 表示域の寸法は 300 × 200 px であるときに， 上の 1 個目の図に示した効果を達成するためには、 UA は，［ X , Y とも 0.2 倍に拡縮する変換 ］を自動的に挿入する必要がある。 その効果は、［ SVG 表示域のサイズはそのままに，文書内に次のように変換を補足したとき ］と等価になる： The effect of the ‘viewBox’ attribute is that the user agent automatically supplies the appropriate transformation matrix to map the specified rectangle in user coordinate system to the bounds of a designated region (often, the SVG viewport). To achieve the effect of the example on the left, with SVG viewport dimensions of 300 by 200 pixels, the user agent needs to automatically insert a transformation which scales both X and Y by 0.2. The effect is equivalent to having an SVG viewport of size 300px by 200px and the following supplemental transformation in the document, as follows:

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
	<g transform="scale(0.2)">
    <!-- 
文書の残りはここに来る
Rest of document goes here -->
	</g>
</svg>

SVG 表示域の寸法は 150 × 200 px のときに，上の 2 個目の図に示した効果を達成するためには、 UA は，［ X を 0.1 倍, Y を 0.2 倍に拡縮する変換 ］を自動的に挿入する必要がある。 その効果は、［ SVG 表示域のサイズはそのままに，文書内に次のように変換を補足したとき ］と等価になる： To achieve the effect of the example on the right, with SVG viewport dimensions of 150 by 200 pixels, the user agent needs to automatically insert a transformation which scales X by 0.1 and Y by 0.2. The effect is equivalent to having an SVG viewport of size 150px by 200px and the following supplemental transformation in the document, as follows:

<?xml version="1.0" standalone="no"?>
<svg width="150px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
	<g transform="scale(0.1 0.2)">
    <!-- 
文書の残りはここに来る
Rest of document goes here -->
	</g>
</svg>

要素に［ transform （または patternTransform ）, viewBox ］の両者とも適用される場合、 要素は，両者それぞれに新たな座標系を確立する。 この場合，要素の内容は、 先ず viewBox による変形が適用されてから transform による変形が適用されることになる。 【要素を g で括って， transform を g に移したのと同じ効果になる。】 If both transform (or ‘patternTransform’) and ‘viewBox’ are applied to an element two new coordinate systems are established. transform establishes the first new coordinate system for the element. ‘viewBox’ establishes a second coordinate system for all descendants of the element. The first coordinate system is post-multiplied by the second coordinate system.

transform プロパティと違って， viewBox 属性に因り作成される自動的な変換は、 その属性を有する要素上の［ x, y, width, height ］属性 （あるいは、 marker 要素の事例では［ markerWidth, markerHeight ］属性） には影響しない。 したがって，上の例に示した svg 要素は［ width ／ height ］呈示属性も viewBox 属性も有するが、［ width, height ］は［ viewBox 変換が適用される前に存在する座標系 ］における値を表現する。 他方， transform の様なプロパティは、［ 当の要素上の他の【 viewBox 以外の】すべての属性, 当の要素の子孫 ］用に新たな座標系を確立する。 Unlike the transform property, the automatic transformation that is created due to a ‘viewBox’ does not affect the ‘x’, ‘y’, ‘width’ and ‘height’ attributes (or in the case of the ‘marker’ element, the ‘markerWidth’ and ‘markerHeight’ attributes) on the element with the ‘viewBox’ attribute. Thus, in the example above which shows an ‘svg’ element which has width and height presentation attributes and a ‘viewBox’ attribute, the width and height represent values in the coordinate system that exists before the ‘viewBox’ transformation is applied. On the other hand, like the transform property, it does establish a new coordinate system for all other attributes and for descendant elements.

8.7. preserveAspectRatio 属性

preserveAspectRatio
値	<align> <meetOrSlice>?
初期値	xMidYMid meet
アニメート可？	可

Name Value Initial value Animatable preserveAspectRatio <align> <meetOrSlice>? xMidYMid meet yes

<align>
	= none
	| xMinYMin
	| xMidYMin
	| xMaxYMin
	| xMinYMid
	| xMidYMid
	| xMaxYMid
	| xMinYMax
	| xMidYMax
	| xMaxYMax

<meetOrSlice>
	= meet
	| slice

一様な拡縮を強制するかどうかを指示する。 新たな SVG 表示域を確立する すべての要素（§ 表示域を確立する要素を見よ）, および［ image, marker, pattern, view ］要素に適用される。 Indicates whether or not to force uniform scaling. Applies to all elements that establish a new SVG viewport (see elements that establish SVG viewports), plus the ‘image’, ‘marker’, ‘pattern’ and ‘view’ elements

概して， viewBox 属性を利用しているときは、［ SVG 表示域全体を占めるかつ収まるよう，グラフィックを【 x, y 軸で】非一様に伸縮する方が望ましい事例 ］もあれば，［ 一様な拡縮を利用して，グラフィックの縦横比を保全する方が望ましい事例 ］もある。 In some cases, typically when using the ‘viewBox’ attribute, it is desirable that the graphics stretch to fit non-uniformly to take up the entire SVG viewport. In other cases, it is desirable that uniform scaling be used for the purposes of preserving the aspect ratio of the graphics.

新たな SVG 表示域を確立する要素（§ 表示域を確立する要素を見よ），および［ marker ／ pattern ／ view ］要素用の preserveAspectRatio は、 同じ要素上に viewBox が供された【かつ その値は妥当である】ときに限り適用され，他の場合は無視される。 For elements that establish a new SVG viewport (see elements that establish SVG viewports), plus the ‘marker’, ‘pattern’ and ‘view’ elements, ‘preserveAspectRatio’ only applies when a value has been provided for ‘viewBox’ on the same element. For these elements, if attribute ‘viewBox’ is not provided, then ‘preserveAspectRatio’ is ignored.

image 要素用の preserveAspectRatio は、 次を指示する ：参照先の画像は，基準矩形にどう収まるべきか ／ 参照先の画像の縦横比は，現在の利用元座標系においても保全されるべきかどうか For ‘image’ elements, ‘preserveAspectRatio’ indicates how referenced images should be fitted with respect to the reference rectangle and whether the aspect ratio of the referenced image should be preserved with respect to the current user coordinate system.

<align> パラメタは、 一様な拡縮を強制するかどうか, および 強制する場合に要素の［ viewbox , SVG 表示域で互いの縦横比が合致しないときに利用する整列手法 ］を指示する。 The <align> parameter indicates whether to force uniform scaling and, if so, the alignment method to use in case the aspect ratio of the ‘viewBox’ doesn't match the aspect ratio of the SVG viewport. The <align> parameter must be one of the following strings:

<align> パラメタは、 以下に挙げるいずれかの文字列でなければならない：

• 値 none は、 一様な拡縮を強制しない。 所与の要素を成すグラフィック内容を［ 要素の限界ボックスは SVG 表示域を成す矩形に正確に合致する ］よう，必要なら非一様に拡縮する。 none - Do not force uniform scaling. Scale the graphic content of the given element non-uniformly if necessary such that the element's bounding box exactly matches the SVG viewport rectangle.＼

  注記： <align> は none の場合、 <meetOrSlice> 値はあっても無視される。 (Note: if <align> is none, then the optional <meetOrSlice> value is ignored.)

• 他のすべての値は、 一様な拡縮を強制する。 以下において［ viewbox は要素の viewbox , 表示域 は要素の SVG 表示域 ］を表すとするとき、 これらの値は，次の表に述べるように［ 要素内容用の座標系（利用元座標系）における viewbox を SVG 表示域に対応付ける ］ことを指示する：

  xMinYMin	viewbox の ( 最小 X 値, 最小 Y 値 ) を 表示域 のそれらに整列する。 xMinYMin - Force uniform scaling. Align the <min-x> of the element's ‘viewBox’ with the smallest X value of the SVG viewport. Align the <min-y> of the element's ‘viewBox’ with the smallest Y value of the SVG viewport.
  xMidYMin	viewbox の ( 中央 X 値, 最小 Y 値 ) を 表示域 のそれらに整列する。 xMidYMin - Force uniform scaling. Align the midpoint X value of the element's ‘viewBox’ with the midpoint X value of the SVG viewport. Align the <min-y> of the element's ‘viewBox’ with the smallest Y value of the SVG viewport.
  xMaxYMin	viewbox の ( 最大 X 値, 最小 Y 値 ) を 表示域 のそれらに整列する。 xMaxYMin - Force uniform scaling. Align the <min-x>+<width> of the element's ‘viewBox’ with the maximum X value of the SVG viewport. Align the <min-y> of the element's ‘viewBox’ with the smallest Y value of the SVG viewport.
  xMinYMid	viewbox の ( 最小 X 値, 中央 Y 値 ) を 表示域 のそれらに整列する。 xMinYMid - Force uniform scaling. Align the <min-x> of the element's ‘viewBox’ with the smallest X value of the SVG viewport. Align the midpoint Y value of the element's ‘viewBox’ with the midpoint Y value of the SVG viewport.
  xMidYMid （初期値）	viewbox の ( 中央 X 値, 中央 Y 値 ) を 表示域 のそれらに整列する。 xMidYMid (the initial value) -Force uniform scaling. Align the midpoint X value of the element's ‘viewBox’ with the midpoint X value of the SVG viewport. Align the midpoint Y value of the element's ‘viewBox’ with the midpoint Y value of the SVG viewport.
  xMaxYMid	viewbox の ( 最大 X 値, 中央 Y 値 ) を 表示域 のそれらに整列する。 xMaxYMid - Force uniform scaling. Align the <min-x>+<width> of the element's ‘viewBox’ with the maximum X value of the SVG viewport. Align the midpoint Y value of the element's ‘viewBox’ with the midpoint Y value of the SVG viewport.
  xMinYMax	viewbox の ( 最小 X 値, 最大 Y 値 ) を 表示域 のそれらに整列する。 xMinYMax - Force uniform scaling. Align the <min-x> of the element's ‘viewBox’ with the smallest X value of the SVG viewport. Align the <min-y>+<height> of the element's ‘viewBox’ with the maximum Y value of the SVG viewport.
  xMidYMax	viewbox の ( 中央 X 値, 最大 Y 値 ) を 表示域 のそれらに整列する。 xMidYMax - Force uniform scaling. Align the midpoint X value of the element's ‘viewBox’ with the midpoint X value of the SVG viewport. Align the <min-y>+<height> of the element's ‘viewBox’ with the maximum Y value of the SVG viewport.
  xMaxYMax	viewbox の ( 最大 X 値, 最大 Y 値 ) を 表示域 のそれらに整列する。 xMaxYMax - Force uniform scaling. Align the <min-x>+<width> of the element's ‘viewBox’ with the maximum X value of the SVG viewport. Align the <min-y>+<height> of the element's ‘viewBox’ with the maximum Y value of the SVG viewport.

任意選択な <meetOrSlice> パラメタを供する場合、 1 個以上のスペースで <align> 値と分離した上で， 次に挙げるいずれかの文字列にしなければならない： The <meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings:

meet （これが既定）

グラフィックを［ 縦横比を保全しつつ， viewbox 全体が SVG 表示域の中で可視になる ］ような最大サイズに拡縮する。 meet (the default) - Scale the graphic such that: • aspect ratio is preserved • the entire ‘viewBox’ is visible within the SVG viewport • the ‘viewBox’ is scaled up as much as possible, while still meeting the other criteria

この事例では、 グラフィックの縦横比が SVG 表示域に合致しない場合， SVG 表示域を成す一部は viewbox の限界域を超えて拡がることになる （すなわち，viewbox が描かれる区画は、 SVG 表示域より小さくなる）。 In this case, if the aspect ratio of the graphic does not match the SVG viewport, some of the SVG viewport will extend beyond the bounds of the ‘viewBox’ (i.e., the area into which the ‘viewBox’ will draw will be smaller than the SVG viewport).

slice

グラフィックを［ 縦横比を保全しつつ， viewbox が SVG 表示域全体を覆う ］ような最小サイズに拡縮する。 slice - Scale the graphic such that: • 縦横比を保全する • aspect ratio is preserved • the entire SVG viewport is covered by the ‘viewBox’ • the ‘viewBox’ is scaled down as much as possible, while still meeting the other criteria

この事例では、 グラフィックの縦横比が SVG 表示域に合致しない場合， viewbox を成す一部は SVG 表示域の限界域を超えて拡がることになる （すなわち，viewbox が描かれる区画は、 SVG 表示域よりより大きくなる）。 In this case, if the aspect ratio of the ‘viewBox’ does not match the SVG viewport, some of the ‘viewBox’ will extend beyond the bounds of the SVG viewport (i.e., the area into which the ‘viewBox’ will draw is larger than the SVG viewport).

例 PreserveAspectRatio に、 preserveAspectRatio 用の各種オプションを図解する。 この例は、 最外縁の svg 要素の内側に svg 下位要素を埋め込んで含めることにより， いくつかの新たな SVG 表示域を作成する （§ 新たな SVG 表示域の確立法を見よ）。 Example PreserveAspectRatio illustrates the various options on ‘preserveAspectRatio’. The example creates several new SVG viewports by including ‘svg’ sub-elements embedded inside the outermost svg element (see Establishing a new SVG viewport).

<svg
  width="450px" height="350px"
  xmlns="http://www.w3.org/2000/svg"
  viewbox="0 0 450 350"
>

  <desc>PreserveAspectRatio 属性の用例</desc>

  <style type="text/css">
    text { font-size: 9; text-anchor:middle; font-family: monospace;}
    text.legend { font-family: serif;}
    rect { fill: none; stroke: blue;}
    .bounds { fill:black; stroke:red; stroke-width:2px; }
	svg { outline: solid blue thin;}
  </style>

  <defs>
    <g id="smile">
      <circle cx="0" cy="0" r="10"  fill="yellow"/>
      <circle cx="-3" cy="-3" r="1.5" fill="black"/>
      <circle cx="3" cy="-3" r="1.5" fill="black"/>
      <path d="M -5 4 A 8 8 0 0 0 5 4" stroke="black" stroke-width="2"/>
    </g>

    <g id="smile-1">
      <rect x="1" y="1" width="28" height="48" class="bounds"/>
      <use href="#smile" transform="translate(15,25)"/>
    </g>
    <g id="smile-2">
      <rect x="1" y="1" width="48" height="28" class="bounds"/>
      <use href="#smile" transform="translate(25,15)"/>
    </g>
  </defs>

  <rect x="0" y="0" width="450" height="350"/>

  <g transform="translate(110,40)">
    <text class="legend" x="0" y="-10">収める SVG（縦長）</text>
    <use href="#smile-1" transform="translate(-15,0)"/>
  </g>

  <g transform="translate(340,40)">
    <text class="legend" x="0" y="-10">収める SVG（横長）</text>
    <use href="#smile-2" transform="translate(-25,0)"/>
  </g>

  <g transform="translate(225,40)">
    <text class="legend" x="0" y="-10">表示域</text>
    <rect x="0" y="0" width="40" height="40"  transform="translate(-20,0)"/>
  </g>

  <g id="meet-group-1" transform="translate(20, 170)">
    <text x="90" y="-40">meet</text>
    <g>
      <text x="20" y="-10">xMin*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text x="20" y="-10">xMid*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text x="20" y="-10">xMax*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
  </g>

  <g id="meet-group-2" transform="translate(250, 170)">
    <text x="90" y="-40">meet</text>
    <g>
      <text x="20" y="-10">*YMin</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(70, 0)">
      <text x="20" y="-10">*YMid</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 50 30" width="40" height="40">
	<use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(140, 0)">
      <text x="20" y="-10">*YMax</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
  </g>

  <g id="slice-group-2" transform="translate(20, 290)">
    <text x="90" y="-40">slice</text>
    <g>
      <text x="20" y="-10">*YMin</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text x="20" y="-10">*YMid</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text x="20" y="-10">*YMax</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 50" width="40" height="40">
        <use href="#smile-1"/>
      </svg>
    </g>
  </g>

  <g id="slice-group-1" transform="translate(250, 290)">
    <text x="90" y="-40">slice</text>
    <g>
      <text x="20" y="-10">xMin*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text x="20" y="-10">xMid*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text x="20" y="-10">xMax*</text>
      <rect x="0" y="0" width="40" height="40"/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 50 30" width="40" height="40">
        <use href="#smile-2"/>
      </svg>
    </g>
  </g>
</svg>

8.8. 新たな SVG 表示域の確立法

svg 要素（SVG 内容の内側にあるものも含む）は、 新たな SVG 表示域を作成する — 要素が包含するグラフィックはすべて，その中に描かれる。 これは、［ 新たな表示域座標系, 新たな利用元座標系 ］の両者を暗黙的に確立する。 加えて，新たな SVG 表示域が確立される結果、 その中の百分率単位の意味も変わる（§ 単位を見よ）。 Including an ‘svg’ element inside SVG content creates a new SVG viewport into which all contained graphics are drawn; this implicitly establishes both a new viewport coordinate system and a new user coordinate system. Additionally, there is a new meaning for percentage units therein, because a new SVG viewport has been established (see Units).

svg 要素など，新たな SVG 表示域を確立している要素 要素 においては、 新たな SVG 表示域の限界域は［ 要素 上の x, y, width, height ］属性で定義される。 ［ 新たな表示域座標系, 新たな利用元座標系 ］とも，その原点は 要素 上の ( x, y ) の値で与えられる。 両座標系とも，その方位は、 要素 用の現在の利用元座標系の方位に対応する。 両座標系とも，その 1 単位は、 要素 用の現在の利用元座標系の 1 単位と同じサイズになる。 The bounds of the new SVG viewport are defined by the ‘x’, ‘y’, ‘width’ and ‘height’ attributes on the element establishing the new SVG viewport, such as an ‘svg’ element. Both the new viewport coordinate system and the new user coordinate system have their origins at (‘x’, ‘y’), where ‘x’ and ‘y’ represent the value of the corresponding attributes on the element establishing the SVG viewport. The orientation of the new viewport coordinate system and the new user coordinate system correspond to the orientation of the current user coordinate system for the element establishing the SVG viewport. A single unit in the new viewport coordinate system and the new user coordinate system are the same size as a single unit in the current user coordinate system for the element establishing the SVG viewport.

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>
この SVG 絵図は、
別のそれを埋め込むので，新たな SVG 表示域を確立している
This SVG drawing embeds another one, thus establishing a new SVG viewport</desc>
  <!-- 
次の言明は、
新たな SVG 表示域を確立して，その中に別の SVG 絵図を描画する
The following statement establishing a new SVG viewport and renders SVG drawing B into that SVG viewport -->
  <svg x="25%" y="25%" width="50%" height="50%">
     <!-- 
別の絵図はここに来る
drawing B goes here -->
  </svg>
</svg>

次に挙げる要素は、 新たな SVG 表示域を確立する ：svg 要素, use 要素によりインスタンス化された symbol 要素 The following elements establish new SVG viewports: • The ‘svg’ element • A ‘symbol’ element that is instanced by a ‘use’ element.

注記： 歴史的な理由から，［ pattern ／ marker ］要素は、 viewBox 属性を受容するにもかかわらず，新たな表示域は作成しない。 ［ clipPath ／ mask ］要素も，新たな表示域は作成しない。 これらの要素の内容の中の百分率による長さは、 グラフィックな効果領域の寸法に比例しない。 For historical reasons, the ‘pattern’ and ‘marker’ elements do not create a new viewport, despite accepting a ‘viewBox’ attribute. Neither do the ‘clipPath’ or ‘mask’ elements. Percentage lengths within the content of these elements are not proportional to the dimensions of the graphical effect region.

foreignObject 要素は、 その子内容用に新たな CSS 包含ブロックを確立する。 これには、新たな表示域に類似な，子内容用のレイアウトの視野を設定し直す効果がある。 しかしながら， foreignObject の子孫である svg 要素は、 その子孫の SVG 要素を描画するため，SVG 文書片と SVG 表示域を確立するものとする。 The ‘foreignObject’ element establishes a new CSS containing block for its child content. This has some effects similar to a new viewport, resetting the scope of layout for child content. However, in order to render SVG elements that are descendents of ‘foreignObject’, a new ‘svg’ element must establish an SVG document fragment and SVG viewport.

image 要素は、 参照先の文書用に新たな文書表示域を作成する。 もちろん，参照先の文書は SVG ファイルである場合、 それは自前の SVG 表示域を確立することになる。 An ‘image’ creates a new document viewport for the referenced document. If the referenced document is a SVG file, it will of course establish its own SVG viewport.

新たな SVG 表示域が新たな切り抜きパスも追加で確立するかどうかは、 当の SVG 表示域を確立した要素上の overflow プロパティの値により決定される。 Whether a new SVG viewport also establishes a new additional clipping path is determined by the value of the overflow property on the element that establishes the new SVG viewport.

8.9. 単位

SVG は、［ 属性 ／ 呈示属性 ／ CSS プロパティ ］用に [css-values] による共通な［ 値と単位 ］の記述と定義に従う。 各［ 属性／プロパティ ］には、 利用する成分値の型が指定されなければならない。 ［ CSS WG , または SVG WG ］が公表する［ 後継の, または拡張する ］仕様は、［ 基本データ型を拡張する, または新たなデータ型を追加する ］こともある。 SVG follows the description and definition of common values and units from the CSS Values and Units Module [css-values] for attributes, presentation attributes and CSS properties. Each attribute and property must specify the used component value type. Subsequent or extending specifications published by the CSS WG or SVG WG may extend basic data types or add new data types.

［ <percentage> として表出され，SVG 表示域 表示域 のサイズに相対的になる ］ものと定義された 寸法 用に与えられた値は、 以下において［ 基準横幅, 基準縦幅 ］は［ 表示域 に適用される viewBox 属性が指定されているならば viewbox のサイズ ／ 他の場合は 表示域 のサイズ ］を利用元単位で表すとするとき： For <percentage> values that are defined to be relative to the size of SVG viewport:

• 寸法 が［ x 座標／横幅 ］である場合、 値は， 基準縦幅 に対する百分率を与えるものとする。 For any x-coordinate value or width value expressed as a percentage of the SVG viewport, the value to use must be the percentage, in user units, of the width parameter of the ‘viewBox’ applied to that viewport. If no ‘viewBox’ is specified, then the value to use must be the percentage, in user units, of the width of the SVG viewport.
• 寸法 が［ y 座標／縦幅 ］である場合、 値は， 基準縦幅 に対する百分率を与えるものとする。 For any y-coordinate value or height value expressed as a percentage of the SVG viewport, the value to use must be the percentage, in user units, of the height parameter of the ‘viewBox’ applied to that viewport. If no ‘viewBox’ is specified, then the value to use must be the percentage, in user units, of the height of the SVG viewport.
• 寸法 が他の長さである場合、 値は，次の式で計算される 正規化済み対角線長さ に対する百分率を与えるものとする ：sqrt( ( 基準横幅 × 基準横幅 ) + ( 基準縦幅 × 基準縦幅 ) ) ÷ sqrt( 2 ) For any other length value expressed as a percentage of the SVG viewport, the percentage must be calculated as a percentage of the normalized diagonal of the ‘viewBox’ applied to that viewport. If no ‘viewBox’ is specified, then the normalized diagonal of the SVG viewport must be used. The normalized diagonal length must be calculated with sqrt((width)**2 + (height)**2)/sqrt(2).

下の例 Units に、各 種別の単位用の，いくつかの処理規則を図解する。 Example Units below illustrates some of the processing rules for different types of units.

<?xml version="1.0" standalone="no"?>
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <title>Example Units</title>
  <desc>
様々な単位オプションを図解する
Illustrates various units options</desc>

  <!-- 
全体の枠線
Frame the picture -->
  <rect x="5" y="5" width="3990" height="1990" 
        fill="none" stroke="blue" stroke-width="10"/>

  <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
    <!-- 
絶対単位指定子
Absolute unit specifiers -->
    <g transform="translate(400,0)">
      <text x="-50" y="300" fill="black" stroke="none">Abs. units:</text>
      <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in"/>
      <rect x="0" y="750" width="384" height="192" stroke-width="38.4"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in"/>
      </g>
    </g>

    <!-- 
相対単位指定子
Relative unit specifiers -->
    <g transform="translate(1600,0)">
      <text x="-50" y="300" fill="black" stroke="none">Rel. units:</text>
      <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em"/>
      <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em"/>
      </g>
    </g>

    <!-- 
百分率
Percentages -->
    <g transform="translate(2800,0)">
      <text x="-50" y="300" fill="black" stroke="none">Percentages:</text>
      <rect x="0" y="400" width="10%" height="10%" stroke-width="1%"/>
      <rect x="0" y="750" width="400" height="200" stroke-width="31.62"/>
      <g transform="scale(2)">
        <rect x="0" y="600" width="10%" height="10%" stroke-width="1%"/>
      </g>
    </g>
  </g>
</svg>

• 左列にある 3 個の矩形は、 絶対単位識別子 in 単位（インチ）の利用をデモる。 CSS は 1 in は 96 px に等しいものと定義するので、 in 単位で指定された上段の矩形のサイズは，【 px 単位に等しい】利用元単位で指定された中段の矩形と正確に同じになる。 下段の矩形は、 in 単位で指定された値が拡縮されたとき何が起こるかを図解する。 The three rectangles on the left demonstrate the use of one of the absolute unit identifiers, the "in" unit (inch). CSS defines 1 inch to be equal to 96 pixels. Therefore, the topmost rectangle, which is specified in inches, is exactly the same size as the middle rectangle, which is specified in user units such that there are 96 user units for each corresponding inch in the topmost rectangle. The bottom rectangle of the group illustrates what happens when values specified in inches are scaled.
• 中央列にある 3 個の矩形は、 相対単位識別子 em 単位の利用をデモる。 最外縁 g 要素上では font-size プロパティは 150 に設定されているので、 各 em 単位は 150 利用元単位に等しくなる。 em 単位で指定された上段の矩形のサイズは、 利用元単位で指定された中段の矩形と正確に同じになる。 下段の矩形は、 em 単位で指定された値が拡縮されたとき何が起こるかを図解する。 The three rectangles in the middle demonstrate the use of one of the relative unit identifiers, the "em" unit. Because the font-size property has been set to 150 on the outermost ‘g’ element, each "em" unit is equal to 150 user units. The topmost rectangle, which is specified in "em" units, is exactly the same size as the middle rectangle, which is specified in user units such that there are 150 user units for each corresponding "em" unit in the topmost rectangle. The bottom rectangle of the group illustrates what happens when values specified in "em" units are scaled.
• 右列にある 3 個の矩形は、 百分率の利用をデモる。 SVG 表示域要素（この事例では最外縁の svg 要素）用の利用元座標系における SVG 表示域の横幅, 縦幅は、 順に 4000, 2000 になることに注意 — viewbox は，利用元座標系に変形されるので。 百分率単位で指定された上段の矩形は、 等価な利用元単位で指定された中段の矩形と正確に同じサイズになる。 特に，中段の矩形における stroke-width プロパティは、 ( SVG 表示域の対角線長さ ÷ sqrt( 2 ) ) の 1% — この事例では .01 × sqrt( (4000 × 4000 + 2000 × 2000) ÷ 2 ) （およそ 31.62 ） — に設定されることに注意。 下段の矩形は、 百分率単位で指定された値が拡縮されたとき，何が起こるかを図解する。 The three rectangles on the right demonstrate the use of percentages. Note that the width and height of the SVG viewport in the user coordinate system for the SVG viewport element (in this case, the outermost svg element) are 4000 and 2000, respectively, because processing the ‘viewBox’ attribute results in a transformed user coordinate system. The topmost rectangle, which is specified in percentage units, is exactly the same size as the middle rectangle, which is specified in equivalent user units. In particular, note that the stroke-width property in the middle rectangle is set to 1% of the sqrt((actual-width)**2 + (actual-height)**2) / sqrt(2), which in this case is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. The bottom rectangle of the group illustrates what happens when values specified in percentage units are scaled.

8.10. 限界ボックス

要素の 限界ボックス （ bounding box, 略称 bbox ）とは、 自身とその子孫すべてを封入する, かつ 要素の利用元座標系の軸に辺が平行な，最も狭い矩形である。 bounding boxThe bounding box (or "bbox") of an element is the tightest fitting rectangle aligned with the axes of that element's user coordinate system that entirely encloses it and its descendants.

要素用の限界ボックスは、 次の 3 種類として算出され得る： Three kinds of bounding boxes can be computed for an element:

オブジェクト限界ボックス

要素の幾何図形のみを包含する限界ボックス。 これは、基本図形に対しては，フィルされる区画になる。 他が指定されずに単に “限界ボックス” と記されたときは、 これを意味する。 The object bounding box is the bounding box that contains only an element's geometric shape. For basic shapes, this is the area that is filled. Unless otherwise specified, this is what is meant by the unqualified term "bounding box".

ストローク限界ボックス

要素の［ 幾何図形, ストローク図形 ］を包含する限界ボックス。 The stroke bounding box is the bounding box that contains an element's geometric shape and its stroke shape.

装飾限界ボックス

要素の［ 幾何図形, ストローク図形, マーカ ］を包含する限界ボックス。 The decorated bounding box is the bounding box that contains an element's geometric shape, its stroke shape and its markers.

注記： 要素上の次に挙げるプロパティの値は、 要素の限界ボックスに対する効果は無いことに注意 ：opacity, visibility, fill, fill-opacity, fill-rule, stroke-dasharray, stroke-dashoffset Note that the values of the opacity, visibility, fill, fill-opacity, fill-rule, stroke-dasharray and stroke-dashoffset properties on an element have no effect on the bounding box of an element.

曲線を含む図形用の限界ボックスは、 その端点 【図形を成す各パス区分の端点】 のみならず，図形を成す辺に沿うすべての部位を封入するものとする。 曲線を定義する制御点（三次 Bézier コマンドのそれなど）は、 限界ボックスの寸法には寄与しないものとする — それらは、どこにあろうが辺に沿う部位とはみなされないことに注意。 For curved shapes, the bounding box must enclose all portions of the shape along the edge, not just end points. Note that control points for a curve which are not defined as lying along the line of the resulting curve (e.g., the second coordinate pair of a Cubic Bézier command) must not contribute to the dimensions of the bounding box (though those points may fall within the area of the bounding box, if they lie within the shape itself, or along or close to the curve). For example, control points of a curve that are at a further distance than the curve edge, from the non-enclosing side of the curve edge, must be excluded from the bounding box.

［ defs 要素の中にある，その他諸々【省略する】 ］に因り，描画ツリーに含まれない要素にも、 限界ボックスはある。 要素上で getBBox() を call したときは、 要素が描画されたとするときと同じ矩形を返すことになる。 しかしながら，そのような要素は、どの先祖の限界ボックスにも寄与しない。 【したがって，そのような要素の子孫も要素の限界ボックスには寄与しなくなるので、 “要素が描画されたとするとき” は “要素の子孫を除く要素のみが描画されたとするとき” を意味することになる。】 Even if an element is not in the rendering tree – due to it being 'display: none', within a ‘defs’ element, not usually rendered like a ‘symbol’ element or not currently present in the document tree – it still has a bounding box. A call to getBBox on the element will return the same rectangle as if the element were rendered. However, an element that is not in the rendering tree does not contribute to the bounding box of any ancestor element.

<svg xmlns="http://www.w3.org/2000/svg">

  <title>Bounding Box Calculation</title>
  <desc>
要素の限界ボックスが、
文脈に応じて異なる結果になる例。
Examples of elements with different bounding box results based on context.</desc>

  <defs id="defs-1">
     <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" />
  </defs>

  <g id="group-1">
    <use id="use-1" href="#rect-1" x="10" y="10" />

    <g id="group-2" display="none">
      <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" />
    </g>
  </g>
</svg>

テキスト内容要素用の限界ボックスを計算する目的においては、 各グリフは，別々なグラフィックス要素として扱うものとする — すべてのグリフは全部的グリフ cell を占めると見做す下で。 全部的グリフ cell のサイズは、次のようになるものとする： For text content elements, for the purposes of the bounding box calculation, each glyph must be treated as a separate graphics element. The calculations must assume that all glyphs occupy the full glyph cell.＼

• 横書きテキスト用には、 横幅は横方向の送り幅に等しく，縦幅は EM ボックスのそれに等しい。 The full glyph cell must have width equal to the horizontal advance and height equal to the EM box for horizontal text.＼
• 側転に植字される縦書きテキスト用には、 横幅は EM ボックスに等しく，縦幅は【横書きで描画されたときの】横方向の送り幅に等しい。 For vertical text that is typeset sideways, the full glyph cell must have width equal to the EM box and height equal to the horizontal advance.＼
• 他の縦書きテキスト用には、 横幅は EM ボックスに等しく，縦幅は［ フォント用に縦方向の送り幅は定義されているならば その送り幅 ／ 他の場合は EM ボックスの縦幅 ］に等しい。 For other vertical text, the full glyph cell must have width equal to the EM box and height equal to the vertical advance, or height equal to the height of the EM box if no vertical advance is defined in the font.＼

例えば，横書きテキスト用の計算では、 各グリフは［ 縦方向には、フォント用の ascent から descent まで全部的に占める ］と見做すものとする。 For example, for horizontal text, the calculations must assume that each glyph extends vertically to the full ascent and descent values for the font.

要素の［ 図形, サイズ, 位置 ］は，アニメーションにより変化し得るので、限界ボックスは変異可能である。 したがって，要素用の限界ボックスは、 限界ボックスが — スクリプト call , ［ 宣言的／リンク法 ］構文の一部として，などにより — 要請された時点のそれを反映するものとする。 Because declarative or scripted animation can change the shape, size, and position of an element, the bounding box is mutable. Thus, the bounding box for an element shall reflect the current values for the element at the snapshot in time at which the bounding box is requested, whether through a script call or as part of a declarative or linking syntax.

要素の横幅や縦幅が 0 であっても （水平または垂直な線や width または height が 0 にされた rect 要素など）、 限界ボックスはある — サイズ 0 にされた寸法は，そのまま 0 にされて。 同様に、 path 要素の下位パス区分が［ 横幅, 縦幅 ］とも 0 であっても，その要素の限界ボックス用の幾何に含めるものとする。 An element which has zero width, zero height, or both (such as a vertical or horizontal line, or a ‘rect’ element with a zero width or height) still has a bounding box, with a positive value for the positive dimension, or with '0' for both the width and height if no positive dimension is specified. Similarly, subpaths segments of a ‘path’ element with zero width and height must be included in that element's geometry for the sake of the bounding box.

位置が指定されていない要素 （ path 要素のうち d プロパティが none にされたものなど）は、 限界ボックスを計算する目的においては，点 ( 0,0 ) に位置される。 An element with no position specified (such as a ‘path’ element with a value of none for the d property) is positioned at the point (0,0) for the purposes of calculating a bounding box.

SVGGraphicsElement オブジェクトでない DOM 要素（gradient 要素など）には、 限界ボックスは無いので，限界ボックスを要請するインタフェースも無いことに注意。 Note that elements whose DOM object does not derive from SVGGraphicsElement (such as gradient elements) do not have a bounding box, and thus have no interface to request a bounding box.

描画ツリー内にある要素は、 未解決なリソースを参照するものであっても，その限界ボックスは［ 要素の属性に指定された位置と寸法，あるいは属性が給されてなければ その属性用の初期値 ］により定義されるものとする。 例えば，要素 <use href="#存在しない ID" x="10" y="10"/> の限界ボックスは、 ( x, y ) は ( 10, 10 ), ( 横幅, 縦幅 ) は ( 0, 0 ) になる。 Elements in the rendering tree which reference unresolved resources shall still have a bounding box, defined by the position and dimensions specified in their attributes, or by the initial value for those attributes if no values are supplied. For example, the element <use href="#bad" x="10" y="10"/> would have a bounding box with an x and y of 10 and a width and height of 0.

次のアルゴリズムは、 所与の要素用の限界ボックスを算出する方法を定義する。 このアルゴリズムに対する入力は： The following algorithm defines how to compute a bounding box for a given element. The inputs to the algorithm are:

• 要素 — 限界ボックスを算出している要素 element, the element we are computing a bounding box for;
• 座標空間 — 限界ボックスは、 この座標空間内で算出されることになる space, a coordinate space in which the bounding box will be computed;
• fill — 限界ボックスは 要素, その子孫の幾何を含むかどうかを指示する真偽値 fill, a boolean indicating whether the bounding box includes the geometry of the element and its descendants;
• stroke — 限界ボックスは 要素, その子孫のストロークを含むかどうかを指示する真偽値 stroke, a boolean indicating whether the bounding box includes the stroke of the element and its descendants;
• markers — 限界ボックスは 要素, その子孫のマーカを含むかどうかを指示する真偽値 markers, a boolean indicating whether the bounding box includes the markers of the element and its descendants; and
• clipped — 限界ボックスは 要素, その子孫のに適用された切り抜きパスに影響されるかどうかを指示する真偽値。 clipped, a boolean indicating whether the bounding box is affected by any clipping paths applied to the element and its descendants.

限界ボックスを算出する アルゴリズムは、 要素 の型に応じて，次に従う： The algorithm to compute the bounding box is as follows, depending on the type of element:

図形要素 a shape

テキスト内容要素 a text content element

テキスト内容要素の中の a 要素 an ‘a’ element within a text content element

1. 図形集合 :← 空集合 ↓

2. IF［ fill ＝ true ］ ：図形集合 に［ 次に与える図形 を 座標空間 に換算した結果 ］を追加する ：要素 は図形要素ならば 要素 に等価なパス ／ 他の場合は 要素 の中のテキストに対応している 各グリフ cell をすべて含む図形 Let box be a rectangle initialized to (0, 0, 0, 0).Let fill-shape be the equivalent path of element if it is a shape, or a shape that includes each of the glyph cells corresponding to the text within the elements otherwise.If fill is true, then set box to the tightest rectangle in the coordinate system space that contains fill-shape.

   注記： fill ／ fill-opacity ／ fill-rule プロパティの値は フィル図形 には影響しない。 The values of the fill, fill-opacity and fill-rule properties do not affect fill-shape.

3. IF［ stroke ＝ true ］∧［ 要素 の stroke の値 ≠ none ］ ：図形集合 に［ 要素 のストローク図形を 座標空間 に換算した結果 ］を追加する — 要素 には dash パタンは無いと見做す下で If stroke is true and the element's stroke is anything other than none, then set box to be the union of box and the tightest rectangle in coordinate system space that contains the stroke shape of the element, with the assumption that the element has no dash pattern.

   注記： ［ stroke-opacity ／ stroke-dasharray ／ stroke-dashoffset ］の値は、 ストローク図形の計算には影響しない。 The values of the stroke-opacity, stroke-dasharray and stroke-dashoffset do not affect the calculation of the stroke shape.

4. IF［ markers ＝ true ］： If markers is true, then＼

   1. 要素 上に描画された 各( marker ) に対し： for each marker marker rendered on the element:

      1. マーカ要素 :← marker を定義する marker 要素 ↓

      2. マーカ要素 の 各( 子孫 子孫 ) に対し： For each descendant graphics element child of the ‘marker’ element that defines marker's content:

         1. IF［ ∧↓ ］…

            • marker の内容を定義するグラフィックス要素である
            • ∧↓ を満たす要素は無い ：マーカ要素 の子孫である, 子孫 の先祖である, display は none をとる
            • 子孫 は 条件付き処理属性により除外されていない
            • 子孫 は［ a ／ g ／ svg ／ switch ］要素である

            …ならば ：図形集合 に次の結果を追加する ：限界ボックスを算出する( 子孫, 座標空間, true, stroke, markers, clipped )

            If child has an ancestor element within the ‘marker’ that is 'display: none', has a failing conditional processing attribute, or is not an ‘a’, ‘g’, ‘svg’ or ‘switch’ element, then continue to the next descendant graphics element.Otherwise, set box to be the union of box and the result of invoking the algorithm to compute a bounding box with child as the element, space as the target coordinate space, true for fill, stroke and markers, and clipped for clipped.
5. ボックス :← ［ 図形集合 は空でないならば 図形集合 を成すすべての図形の和領域を包含する最も狭い矩形 ／ 他の場合は 矩形( 0, 0, 0, 0 ) ］ ↑

6. IF［ clipped ＝ true ］∧［ 要素 上の clip-path の値 ≠ none ］ ：ボックス ← ボックス と［ 切り抜きパスを 座標空間 に換算した結果 ］との交差域を包含する最も狭い矩形

   【交差域が無い場合にどうなるのかは、述べられていない。】 【元の図形と切り抜きパスの交差域は空になる場合でも、 ボックス は面積 0 にならない場合がある。】 If clipped is true and the value of clip-path on element is not none, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the clipping path.
7. RETURN ボックス Return box.

コンテナ要素 a container element

use

1. ボックス :← ( 0, 0, 0, 0 ) に初期化された矩形 Let box be a rectangle initialized to (0, 0, 0, 0).
2. parent :← 要素 に応じて ：コンテナ要素ならば 要素 ／ use 要素ならば use 要素の shadow ツリーの根 Let parent be the container element if it is one, or the root of the ‘use’ element's shadow tree otherwise.

3. parent の 各( 子孫 子孫 ) に対し： For each descendant graphics element child of parent:

   1. IF［ 子孫 はグラフィックス要素でない ］∨［ 子孫 は描画されていない ］ ：CONTINUE If child is not rendered then continue to the next descendant graphics element.
   2. ボックス ← ボックス と次の結果との和領域 ：限界ボックスを算出する( 子孫, 座標空間, fill, stroke, markers, clipped ) Otherwise, set box to be the union of box and the result of invoking the algorithm to compute a bounding box with child as the element and the same values for space, fill, stroke, markers and clipped as the corresponding algorithm input values.

4. IF［ clipped ＝ true ］： If clipped is true:

   • IF［ 要素 上の clip-path プロパティの値 ≠ none ］ ：ボックス ← ボックス と［ clip-path に指定された切り抜きパスを 座標空間 に換算した結果 ］との交差域を包含する最も狭い矩形 If the value of clip-path on element is not none, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the clipping path.
   • IF［ 要素 は overflow プロパティの適用対象である ］∧［ 要素 の overflow プロパティの値 ≠ visible ］ ：ボックス ← ボックス と［ 要素 の過フロー限界域を 座標空間 に換算した結果 ］との交差域を包含する最も狭い矩形 If the overflow property applies to the element and does not have a value of visible, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the element's overflow bounds.
   • IF［ 要素 は clip プロパティの適用対象である ］∧［ 要素 の clip プロパティの値 ≠ auto ］ ：ボックス ← ボックス と［ clip に指定された矩形を 座標空間 に換算した結果 ］との交差域を包含する最も狭い矩形 If the clip property applies to the element and does not have a value of auto, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the rectangle specified by clip.
   【原文は順序付きリストとしてマークアップされていないが、順序も有意になり得る。】
5. RETURN ボックス Return box.

foreignObject

image

1. ボックス :← ［ 要素の［ x, y, width, height ］幾何プロパティで定義される位置決め矩形を 座標空間 に換算した結果 ］を包含する最も狭い矩形 Let box be the tightest rectangle in coordinate space space that contains the positioning rectangle defined by the ‘x’, ‘y’, ‘width’ and ‘height’ geometric properties of the element.

   注記： 引数 fill, stroke, markers は、 このアルゴリズムがこれらの要素用に返す限界ボックスには影響しない。 The fill, stroke and markers input arguments to this algorithm do not affect the bounding box returned for these elements.

2. IF［ clipped ＝ true ］∧［ 要素 上の clip-path の値 ≠ none ］ ：ボックス ← ボックス と［ 切り抜きパスを 座標空間 に換算した結果 ］との交差域を包含する最も狭い矩形 If clipped is true and the value of clip-path on element is not none, then set box to be the tightest rectangle in coordinate system space that contains the intersection of box and the clipping path.
3. RETURN ボックス を包含する最も狭い矩形 Return box.

矩形( 0, 0, 0, 0 ) と空図形との和領域は矩形( 0, 0, 0, 0 ) になる。 The union box with a value of (0, 0, 0, 0) and an empty shape is box.

8.11. オブジェクト限界ボックス単位

次の表の 1 列目に挙げる要素は、 座標値と長さを オブジェクト限界ボックスの割合分として（および, 一部の事例では百分率として）表出するオプションを提供する — 要素上で［ 同じ行の 2 列目に与える属性 ］を objectBoundingBox に設定することにより： The following elements offer the option of expressing coordinate values and lengths as fractions (and, in some cases, percentages) of the object bounding box, by setting a specified attribute to 'objectBoundingBox' on the given element:

［ gradient ／パタン ］用の適用先の要素は、その［ gradient ／パタン ］を［ fill または stroke ］プロパティにより参照しているグラフィックス要素が該当する（ テキスト要素を対象にする特別な規則については、 § オブジェクト限界ボックス単位とテキスト要素の論点を見よ）。 ［ 切り抜きパス ／ マスク ／ フィルタ ］用の適用先の要素は、［ コンテナ要素, グラフィックス要素 ］のどちらも該当し得る。 In the discussion that follows, the term applicable element is the element to which the given effect applies. For gradients and patterns, the applicable element is the graphics element which has its fill or stroke property referencing the given gradient or pattern. (For special rules concerning text elements, see the discussion of object bounding box units and text elements.) For clipping paths, masks and filters, the applicable element can be either a container element or a graphics element.

キーワード objectBoundingBox が利用されたときの効果は、［ 入れ子な変換行列のリスト ］に［ 新たな利用元座標系を作成する，補足的な変換行列 ］が挿入されたかのようになる： When keyword objectBoundingBox is used, then the effect is as if a supplemental transformation matrix were inserted into the list of nested transformation matrices to create a new user coordinate system.

• 新たな利用元座標系内の座標［ ( 0, 0 ) ／ ( 1,1 ) ］は、 適用先の要素のオブジェクト限界ボックスの［ ( 最小 X 値, 最小 Y 値 ) ／ ( 最大 X 値, 最大 Y 値 ) ］に対応付けられる。 First, the (minx,miny) and (maxx,maxy) coordinates are determined by the extends of the object bounding box of the applicable element.Then, coordinate (0,0) in the new user coordinate system is mapped to the (minx,miny) corner of the tight bounding box within the user coordinate system of the applicable element and coordinate (1,1) in the new user coordinate system is mapped to the (maxx,maxy) corner of the tight bounding box of the applicable element.＼
• ほとんどの状況においては、 次の変換行列が正しい効果を生産する ：[ ( 最大 X 値 − 最小 X 値 ) 0 0 ( 最大 Y 値 − 最小 Y 値 ) ( 最小 X 値 ) ( 最小 Y 値 ) ] In most situations, the following transformation matrix produces the correct effect: • [ (maxx-minx) 0 0 (maxy-miny) minx miny ]

［ gradient ベクター／パタンタイル／フィルタ領域／マスク法領域 ］を定義する属性に利用された百分率は、 対応する割合分（比率）と同じ値を表現する （例： 50% は 0.5 と同じを意味する）。 ［ pattern ／ clipPath ／ mask ／ filter ］要素の内容に利用された百分率は、［ § 単位にて定義した，百分率用の処理規則 ］に則って扱われる。 When percentages are used with attributes that define the gradient vector, the pattern tile, the filter region or the masking region, a percentage represents the same value as the corresponding decimal value (e.g., 50% means the same as 0.5). If percentages are used within the content of a ‘pattern’, ‘clipPath’, ‘mask’ or ‘filter’ element, these values are treated according to the processing rules for percentages as defined in Units.

オブジェクト限界ボックス単位の［ 割合分／百分率 ］として表出される値用には、 どの数量値も指定できる。 特に，［ 0 〜 1 に入らない割合分／ 0% 〜 100% に入らない百分率 ］も指定できる。 Any numeric value can be specified for values expressed as a fraction or percentage of object bounding box units. In particular, fractions less are zero or greater than one and percentages less than 0% or greater than 100% can be specified.

キーワード objectBoundingBox は、 適用先の要素の幾何が［ 横幅, 縦幅 ］どちらかが 0 の場合には，利用されるべきでない — 水平または垂直な線の事例など。 ストローク幅が 0 でないことに因り，そのような線が太さがあるように見えようが、 ストローク幅は限界ボックスの計算では無視されるので。 そのような適用先の要素に objectBoundingBox を指定された場合、 所与の効果（例：gradient やフィルタ）は，無視されることになる。 Keyword objectBoundingBox should not be used when the geometry of the applicable element has no width or no height, such as the case of a horizontal or vertical line, even when the line has actual thickness when viewed due to having a non-zero stroke width since stroke width is ignored for bounding box calculations. When the geometry of the applicable element has no width or height and objectBoundingBox is specified, then the given effect (e.g., a gradient or a filter) will be ignored.

8.12. SVG 内容の生来なサイズ法プロパティ

CSS で整形されたホスト文書に SVG が内包される所では、 その具象オブジェクトサイズを，既定のサイズ法アルゴリズム [css-images-3] を利用して計算するものとする — 次の入力を与える下で： To enable inclusion of SVG in host documents formatted with CSS, a concrete object size must be calculated. The concrete object size must be calculated using the Default Sizing Algorithm defined in CSS Images 3 [css-images-3], with the following inputs:

• 以下における［ 横幅 ／ 縦幅 ］は、内包される svg 要素上の［ width ／ height ］サイズ法プロパティ用の使用値を表すとする。 指定されてない［ width ／ height ］の使用値は、 初期値 auto になる。 ↓
• 指定サイズは、［ 横幅, 縦幅 ］から決定するものとする。 The specified size must be determined from the used values for the width and height sizing properties of the ‘svg’ element.

• 生来な寸法も、［ 横幅, 縦幅 ］から決定するものとする。 生来な寸法の［ 横幅／縦幅 ］を決定するときには、［ auto ／ 百分率長さ ］は利用してはならない 【既定のサイズ法アルゴリズムにおいて、無いものと扱う】 。 The intrinsic dimensions must also be determined from the width and height sizing properties. If either width or height are not specified, the used value is the initial value 'auto'. 'auto' and percentage lengths must not be used to determine an intrinsic width or intrinsic height.

  注記： ビットマップ画像形式に対しては — 生来な寸法は画像ファイル内に元々あるので — 指定サイズは，画像を拡縮する必要に応じてホスト文書内で定義される。 内来的に拡縮可能である SVG は、 生来な寸法を指定サイズから転用する。 したがって， svg 要素の［ width ／ height ］サイズ法プロパティに指定された長さは、［ 生来な寸法, 指定サイズ ］とも制御し，ホスト文書内に SVG 画像を配置するときに利用される。 With bitmap image formats, the intrinsic dimensions are fixed in the image file, and the specified size is defined in the host document as needed to scale the image. SVG, being inherently scalable, adapts the intrinsic width and intrinsic height to be the width and height of the specified size. Therefore, when specified as a length, the width and height sizing properties of the ‘svg’ element control the intrinsic dimensions of the SVG image and the specified size that is used when placing the SVG image in a host document.

• 生来な縦横比は、 次のアルゴリズムを利用して計算するものとする — 結果が null の場合、 生来な縦横比は無い： The intrinsic aspect ratio must be calculated using the following algorithm. If the algorithm returns null, then there is no intrinsic aspect ratio.

  1. IF［［ 横幅, 縦幅 ］とも絶対的【確定的】な値である ］ ：RETURN 横幅 ÷ 縦幅 If the width and height sizing properties on the ‘svg’ element are both absolute values: • return width / height
  2. IF［ SVG ビューが作動中である ］ ：RETURN 作動中な SVG ビューにより定義される viewbox の ( 横幅 ÷ 縦幅 ) If an SVG View is active: • let viewbox be the viewbox defined by the active SVG View • return viewbox.width / viewbox.height
  3. IF［ svg 要素上に viewBox 属性は正しく指定されている ］ ：要素の viewbox の ( 横幅 ÷ 縦幅 ) If the ‘viewBox’ on the ‘svg’ element is correctly specified: • let viewbox be the viewbox defined by the ‘viewBox’ attribute on the ‘svg’ element • return viewbox.width / viewbox.height
  4. RETURN null return null
• 【 既定のサイズ法アルゴリズムは，既定のオブジェクトサイズも入力にとるが、 ここには言及されていない。 】

この節に定義するふるまいは，CSS に特有であるが、 他のホスト文脈にも転用されてよい。 どのホスト文脈も、 SVG 表示域をサイズするときは，生来な縦横比を — それが可用な所では — 尊重するものとする。 The behaviour defined in this section is specific to CSS, but may be adapted to other host contexts. In all host contexts, the intrinsic aspect ratio, where available, must be respected when sizing the SVG viewport.

<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" height="5cm">
  ...
</svg>

<svg xmlns="http://www.w3.org/2000/svg"
     width="100%" height="50%" viewBox="0 0 200 200">
  ...
</svg>

<svg xmlns="http://www.w3.org/2000/svg"
     width="10cm" viewBox="0 0 200 200">
  ...
</svg>

<svg xmlns="http://www.w3.org/2000/svg"
     width="75%" height="10cm" viewBox="0 0 200 200">
  ...
</svg>

新たな auto 値用にもっと例を追加するか？ 例： David Vest 氏が供された いくつかの例 など。 Add more examples for the new auto value? E.g some of the examples provided by David Vest.

8.13. ベクター効果

ときには、オブジェクトに変形が適用されようが，オブジェクトの［ 外形線の横幅を保つ ／ 元の位置を固定する ］ことが関心事になる。 例えば、ある地図において 2px 幅の線は道路を表現していて，利用者が地図の中へズームしたときも道路の 2px 幅を保つことや、 グラフィック図表上の紹介文内で【他は動かさずに】パンするのを可能にすることなど。 Sometimes it is of interest to let the outline of an object keep its original width or to let the position of an object fix no matter which transforms are applied to it. For example, in a map with a 2px wide line representing roads it is of interest to keep the roads 2px wide even when the user zooms into the map, or introductory notes on the graphic chart in which panning is possible.

そのような効果を［ 特別な座標変換と, グラフィック絵図 ］に関して提供するため、 SVG Tiny 1.2 は vector-effect プロパティを導入した。 SVG Tiny 1.2 は non-scaling-stroke のふるまいのみを導入したが、 このバージョンでは，いくつかの効果も追加で導入する。 さらには、これらの効果は組み合せでも指定できるので，より多様な効果を示す。 SVG 言語の将来バージョンは、 このプロパティを通して，より強力なベクター効果を許容することになる。 To offer such effects regarding special coordinate transformations and graphic drawings, SVG Tiny 1.2 introduced the vector-effect property. Although SVG Tiny 1.2 introduced only non-scaling stroke behavior, this version introduces a number of additional effects. Furthermore, since these effects can be specified in combination, they show more various effects. And, future versions of the SVG language will allow for more powerful vector effects through this property.

vector-effect 用の［ non-scaling-stroke, none ］以外の値は、 実装の欠如に因り SVG 2 から落とされるリスク下にある。 それらを現在指定されるものとして実装するときの実用性に関して，実装期間にて実装者からのフィードバックが要請される。 Values of vector-effect other than non-scaling-stroke and none are at risk of being dropped from SVG 2 due to a lack of implementations. Feedback from implementers is requested, regarding the practicality of implementing them as currently specified, during the implementation period.

【 原文による値の構文は，以下の記述と整合していないので、 この訳では修正している。 】

none

ベクター効果は適用しないものと指定する。 すなわち、 SVG 1.1 による既定の描画のふるまい — 先ず図形の幾何を指定した塗りでフィルしてから，指定した塗りで外形線をストロークする — を利用する。 Specifies that no vector effect shall be applied, i.e. the default rendering behaviour from SVG 1.1 is used which is to first fill the geometry of a shape with a specified paint, then stroke the outline with a specified paint.

non-scaling-stroke

塗りに対するベクター効果のこの記述を見よ。 【ストローク幅は、 CTM が変化しようが変化しない。】 Please refer to this description of vector effect on painting.

non-scaling-size

次の特性を備える拘束付き変換により，［ この要素とその子孫 ］に向けて，特別な利用元座標系を指定する。 利用元座標系の拡縮率は、 ホスト座標空間からの CTM が変化しようが変化しない。 しかしながら，［ 回転／斜傾 ］の抑止は指定しない。 また、利用元座標系の配置の固定化も指定しない。 non-scaling-size は，利用元座標系の拡縮を抑止するので、 non-scaling-stroke の特性も備える。 次節にて，変換公式とふるまいの例を指示する。 Specifies special user coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The scale of the user coordinate system do not change in spite of change of CTMs from a host coordinate space. However, it does not specify the suppression of rotation and skew. Also, it does not specify the fixation of placement of user coordinate system. Since non-scaling-size suppresses scaling of user coordinate system, it also has the characteristic of non-scaling-stroke. The transformation formula and the example behavior are indicated to the following chapter.

non-rotation

次の特性を備える拘束付き変換により，［ この要素とその子孫 ］に向けて，特別な利用元座標系を指定する。 利用元座標系の［ 回転／斜傾 ］は、 ホスト座標空間からの CTM が変化しようが抑止される。 しかしながら，拡縮の抑止は指定しない。 また、利用元座標系の配置の固定化も指定しない。 次節にて，変換公式とふるまいの例を指示する。 Specifies special user coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The rotation and skew of the user coordinate system is suppressd in spite of change of CTMs from a host coordinate space. However, it does not specify the suppression of scaling. Also, it does not specify the fixation of placement of user coordinate system. The transformation formula and the example behavior are indicated to the following chapter.

fixed-position

次の特性を備える拘束付き変換により，［ この要素とその子孫 ］に向けて，特別な利用元座標系を指定する。 利用元座標系の配置は、 ホスト座標空間からの CTM が変化しようが固定される。 しかしながら，［ 回転／斜傾／拡縮 ］の抑止は指定しない。 要素に fixed-position 効果がある下で transform プロパティもある場合、 そのプロパティは，この効果用に消費される。 transform プロパティが表す行列の並進成分［ e, f ］は、固定された利用元座標系の原点を転送するために利用される。 次節にて，変換公式とふるまいの例を指示する。 Specifies special user coordinate system toward this element and its descendant by constrained transformations with the following characteristics. The placement of user coordinate system is fixed in spite of change of CTMs from a host coordinate space. However, it does not specify the suppression of rotation, skew and scaling. When the element that has fixed-position effect and also has transform property, that property is consumed for this effect. The shift components e and f of matrix of transform property are used to transfer the origin of fixed user coordinate system. The transformation formula and the example behavior are indicated to the following chapter.

これらの値は併用でき、 それにより，それぞれの特性を同時に備える効果を指定できる。 These values can be enumerated. Thereby, the effect which has these characteristics simultaneously can be specified.

vector-effect 用の ホスト座標空間 は、最も遠い先祖の SVG 表示域の表示域座標系である。 The host coordinate space for vector-effect is the viewport coordinate system of the furthest ancestral SVG viewport.

注記： SVG の将来バージョンは、 機器座標系を指定する仕方を許容し得る。 Note: Future versions of SVG may allow ways to specify the device coordinate system.

<circle vector-effect="値" transform="translate(e f)" cx="Ux" cy="Ux" r=".."/>

8.13.3. ベクター効果の例

vector-effect non-scaling-stroke による例： Below is an example of the non-scaling-stroke vector-effect.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="6cm" height="4cm" viewBox="0 0 600 400" 
     viewport-fill="rgb(255,150,200)">

  <desc>
non-scaling-stroke の例
Example non-scaling stroke</desc>
  <rect x="1" y="1" width="598" height="398" fill="none" stroke="black"/>
  
  <g transform="scale(9,1)">
    <line stroke="black" stroke-width="5" x1="10" y1="50" x2="10" y2="350"/>
    <line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5" 
        x1="32" y1="50" x2="32" y2="350"/>
    <line vector-effect="none" stroke="black" stroke-width="5" 
        x1="55" y1="50" x2="55" y2="350"/>
  </g>

</svg>

non-scaling-stroke 以外の各種ベクター効果, それらの組み合せによる例を以下に示す。 先ず、これらに利用される SVG ソースコードは： Below is an example of the none vector-effect (no vector effect).Before changing CTMAfter changing CTMSource code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50,-50,500,500" height="500" width="500">

  <rect x="-50" y="-50" width="500" height="500" stroke="orange" stroke-width="3" fill="none"/>

  <!-- 
入れ子な利用元座標系は、
この transform 属性により変形される
Nested user coordinate system is transformed by this transform attribute -->
  <g transform="matrix(2.117,0.3576,-0.3576,1.47,0,0) translate(-50,-50)">
    <svg viewBox="-50,-50,500,500" height="500" width="500">
      <!-- 
比較用の基準格子を示す，この svg の利用元座標系上のグラフ用紙
Graph paper on the this svg's base user coordinate system -->
      <g stroke="green" stroke-width="1" fill="none">
        <!-- 順に：
x 軸, y 軸,
座標系の原点を示す緑の小円,
x 軸の向きを示す緑の矢印,
格子の罫線
 -->
        <path d="M-100,000 h500 M000,-100 v500 "/>
        <circle cx="0" cy="0" r="10"/>
        <path fill="green" stroke="none" d="M0,-3 L30,-3 25,-10 50,0 25,10 30,3 0,3z"/>
        <path stroke-dasharray="5,5" d="
M-100,100 h500
M-100,200 h500
M-100,300 h500
M-100,400 h500
M-100,500 h500
M100,-100 v500
M200,-100 v500
M300,-100 v500
M400,-100 v500
M500,-100 v500"/>
      </g>
        <!-- 
各種ベクター効果を適用する赤い矢印の基準格子における原点を示す緑の小円
 -->
        <circle cx="150" cy="150" r="7"/>

      <!-- 
ベクター効果を備える図
Figure having vector effect -->
      <!-- 
太く赤い右向き矢印と, その原点に置かれた小さな四角
A thick red right arrow and small rectangle on this figure's nested user coordinate system origin -->
      <path
            id="ve"
            vector-effect="…"
            stroke="red" stroke-width="3" fill="none"
            transform="translate(150,150)"
            d="M-50,-50 L50,-50 50,-100 150,0 50,100 50,50 -50,50 -50,-50z M5 0 L0 -5 -5 0 0 5z"/>
    </svg>
  </g>
</svg>

上の vector-effect="…" に各種値をあてがった場合の効果を以下に示す：

値	CTM が変更される前	CTM が変更された後
none （ベクター効果なし）
non-scaling-size Below is an example of the non-scaling-size.Before changing CTM After changing CTM
non-rotation Below is an example of the non-rotation.Before changing CTM After changing CTM
non-scaling-size non-rotation Below is an example of the non-scaling-size non-rotation.Before changing CTM After changing CTM
fixed-position Below is an example of the fixed-position.Before changing CTM After changing CTM
non-scaling-size fixed-position Below is an example of the non-scaling-size fixed-position.Before changing CTM After changing CTM
non-rotation fixed-position Below is an example of the non-rotation fixed-position.Before changing CTM After changing CTM
non-scaling-size non-rotation fixed-position Below is an example of the non-scaling-size non-rotation fixed-position.Before changing CTM After changing CTM

8.14. DOM インタフェース

[Exposed=Window]
interface SVGTransform {

  // Transform Types
  const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
  const unsigned short SVG_TRANSFORM_MATRIX = 1;
  const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
  const unsigned short SVG_TRANSFORM_SCALE = 3;
  const unsigned short SVG_TRANSFORM_ROTATE = 4;
  const unsigned short SVG_TRANSFORM_SKEWX = 5;
  const unsigned short SVG_TRANSFORM_SKEWY = 6;

  readonly attribute unsigned short type;
  [SameObject] readonly attribute DOMMatrix matrix;
  readonly attribute float angle;

  undefined setMatrix(optional DOMMatrix2DInit matrix = {});
  undefined setTranslate(float tx, float ty);
  undefined setScale(float sx, float sy);
  undefined setRotate(float angle, float cx, float cy);
  undefined setSkewX(float angle);
  undefined setSkewY(float angle);
};

[Exposed=Window]
interface SVGTransformList {
  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  undefined clear();
  SVGTransform initialize(SVGTransform newItem);
  getter SVGTransform getItem(unsigned long index);
  SVGTransform insertItemBefore(SVGTransform newItem, unsigned long index);
  SVGTransform replaceItem(SVGTransform newItem, unsigned long index);
  SVGTransform removeItem(unsigned long index);
  SVGTransform appendItem(SVGTransform newItem);
  setter undefined (unsigned long index, SVGTransform newItem);

  /* 
他のリストインタフェースに共通しない追加のメソッド
Additional methods not common to other list interfaces. */
  SVGTransform createSVGTransformFromMatrix(optional DOMMatrix2DInit matrix = {});
  SVGTransform? consolidate();
};

[Exposed=Window]
interface SVGAnimatedTransformList {
  [SameObject] readonly attribute SVGTransformList baseVal;
  [SameObject] readonly attribute SVGTransformList animVal;
};

[Exposed=Window]
interface SVGPreserveAspectRatio {

  // Alignment Types
  const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
  const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;

  // Meet-or-slice Types
  const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
  const unsigned short SVG_MEETORSLICE_MEET = 1;
  const unsigned short SVG_MEETORSLICE_SLICE = 2;

  attribute unsigned short align;
  attribute unsigned short meetOrSlice;
};

[Exposed=Window]
interface SVGAnimatedPreserveAspectRatio {
  [SameObject] readonly attribute SVGPreserveAspectRatio baseVal;
  [SameObject] readonly attribute SVGPreserveAspectRatio animVal;
};