svg-embedded-ja.html

<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8">
<title>SVG 2 — Embedded Content （日本語訳）</title>


<link rel="stylesheet" href="common.css" type="text/css">
<link rel="stylesheet" href="common-svg.css" type="text/css">

<script src="common0.js"></script>
<script src="svg-common.js"></script>
<script src="common1.js" async></script>


<script type="text/plain" id="_source_data">

●●options
spec_title:SVG 2 — Embedded Content
spec_date:2019-09-23
trans_update:2019-09-24
source_checked:180820
abbr_url:SVGembedded
page_state_key:SVG
original_url:https://svgwg.org/svg2-draft/embedded.html
spec_status:ED
copyright:2019,use
site_nav:svg,paint,css
nav_prev:SVGtext
nav_next:SVGpainting
trans_1st_pub:2018-08-31


●●class_map
m:dom0

●●tag_map

●●original_id_map

●●mdn_urls
elementdef-foreignObject:SVG/Element/foreignObject
elementdef-image:SVG/Element/image

InterfaceSVGForeignObjectElement:API/SVGForeignObjectElement
InterfaceSVGImageElement:API/SVGImageElement

●●link_map


	m.height:#__svg__SVGForeignObjectElement__height
	m.width:#__svg__SVGForeignObjectElement__width
	m.x:#__svg__SVGForeignObjectElement__x
	m.y:#__svg__SVGForeignObjectElement__y

	mIe.crossOrigin:#__svg__SVGImageElement__crossOrigin
	m.height:#__svg__SVGImageElement__height
	m.preserveAspectRatio:#__svg__SVGImageElement__preserveAspectRatio
	m.width:#__svg__SVGImageElement__width
	m.x:#__svg__SVGImageElement__x
	m.y:#__svg__SVGImageElement__y


a.href:~SVGembedded#ImageElementHrefAttribute
a.preserveAspectRatio:~SVGcoords#PreserveAspectRatioAttribute
a.requiredExtensions:~SVGstruct#RequiredExtensionsAttribute
a.viewBox:~SVGcoords#ViewBoxAttribute
a.crossorigin:~SVGembedded#ImageElementCrossoriginAttribute


sec.~URL参照:~SVGlinking#URLReference

指定d~size:~CSSIMAGE#specified-size
具象-~obj~size:~CSSIMAGE#concrete-object-size
生来な寸法:~CSSIMAGE#natural-dimensions
生来な~size:~CSSIMAGE#natural-size
生来な縦横比:~CSSIMAGE#natural-aspect-ratio

絶対的に位置され:~CSSPOS#absolute-position
包含塊:~CSS2J#containing-block

	~SVGcoords#SizingSVGInCSS
	~SVGlinking#LinksIntoSVG
	~SVGlinking#processingURL
	~TR/2003/REC-MathML2-20031021/

●用語（外部

●●words_table1

●●words_table

	●幾何
拡げら:extendさ:~
拡がる:extendする:~
収まる:fitする:~
収納法:fitting:~
	寸法:dimensional
	~~区域:section
	一致する:align
	左上隅:top/left corner
	右下隅:bottom/right corner
	同心円状に:bulls-eye pattern

	●塗り／色／効果
ベタに:solidに:ベタ塗りで

	●呈示／UI／CSS
配置法:placement::~
断裁-:crop::~
切分ける:sliceする:切り分ける
折返す:wrapする:折り返す
生来:natural::~

	●仕様
勧める:adviseする:~
再帰:recursion:~
優先度法:prioritizing:~

	おそらく:maybe
	手を加えずに:compromise
	指す／指せる／~~参照:refer to
	~~倣う:align
	通例的でない:unusual
	~test用の:testing

	●未分類
	~tag名:tagname
真:true::~
係数:factor:~
式:expression:~
取込む:importする::取り込む
商用:commercial:~
内包-:include::~
	内包できるよう:allows for inclusion
隠され:hideされ:~
	〜名前空間に属する:-namespaced
	切る:turn off
	-:situation
	素片のみ:target-only
	来る:goes
	X
	Y
	大きい:large
	併用-:used in conjunction with
	名前空間に属する:NS
	選定-法:selecting
	検査-法:checking
	で整形された:-formatted
	~~部位:part

	●指示語
	一度限り:only once
	すなわち:mean
	最終的:final
	他の場合:else
	それもまた／ここでも:again
	種々の:various
	現時点では:at this time,
	いずれか:one of


●●images
＠svg-resources/
recursive-image｜height:113px｜｜.png

●●trans_metadata
<p>
~THIS_PAGEは、~W3Cにより編集者草案として公開された
<a href="https://svgwg.org/svg2-draft/Overview.html">SVG 2 仕様</a>
の
<a href="~SPEC_URL">§ Embedded Content</a>
を日本語に翻訳したものです。
~PUB
</p>

</script>
</head>
<body>

<header>
	<hgroup>
<h1>12. 埋め込み内容 — Embedded Content</h1>
	</hgroup>
</header>

<main id="MAIN" hidden>

	<section id="Overview">
<h2 title="Overview">12.1. 概観</h2>

<p>
埋込d内容は、~HTMLのそれと同じく［
文書の中に別の資源を取込む内容 ／
文書の中へ挿入される別の語彙からの内容
］である。
<!-- 
This is the same definition as HTML's embedded content.
~TR/html51/semantics-embedded-content.html#semantics-embedded-content
そのような “定義” は存在しない。
-->
◎
Embedded content is content that imports another resource into the document, or content from another vocabulary that is inserted into the document. This is the same definition as HTML's embedded content.
</p>

<p>
~SVGは、［
`image$e ／ `foreignObject$e
］要素を利用する埋込d内容を，~supportする。
◎
SVG supports embedded content with the use of ‘image’ and ‘foreignObject’ elements.
</p>

<p class="note">注記：
`image$e で埋込まれた内容は，外部~資源を~downloadする優先度法において
`Resource Hints^cite† と互換である。
【† その仕様は、今や `HTML$r `§ ~link＠~HTMLlinks$ 内に移動された。】
◎
Content embedded with ‘image’ is compatible with Resource Hints for prioritizing downloading of external resources.
</p>

	</section>
	<section id="Placement">
<h2 title="Placement of the embedded content">12.2. 埋込d内容の配置法</h2>

<p>
`x$p,
`y$p,
`width$p,
`height$p
幾何~propは、
`位置決め矩形@
と称される，埋込d内容が位置される矩形な領域を指定する。
`位置決め矩形$は、
要素の限界~boxとして利用される。
しかしながら，~graphicは、
`overflow$p ~propの値に依存して，
位置決め矩形を~overflowし得ることに注意。
◎
The x, y, width, and height geometry properties specify the rectangular region into which the embedded content is positioned (the positioning rectangle). The positioning rectangle is used as the bounding box of the element; note, however, that graphics may overflow the positioning rectangle, depending on the value of the overflow property.
</p>

<p>
埋込d内容が単独の参照先の資源からなる場合（例： `image$e ）、
`位置決め矩形$の寸法は
— すべての変形を適用した後の現在の座標系~内で —
埋込d~obj用の`指定d~size$を定義する。
~objの`具象-~obj~size$と最終的な位置は、
~CSS~layoutにおける置換d要素~用に定義される`既定の~sizing~algo$ `css-images-3$r
を利用して，決定されるモノトスル。
［
`object-fit$p, `object-position$p
］は、描画される~objの最終的な位置と~sizeに影響する
— その結果、~objは`位置決め矩形$を超えて拡げられ得る。
その事例においては、
`overflow$p ~propが，当の~objは`位置決め矩形$に切抜かれるべきかどうかを決定する。
◎
When the embedded content consists of a single referenced resource (e.g., an ‘image’), the dimensions of the positioning rectangle, in the current coordinate system after applying all transforms, define the specified size for the embedded object. A concrete object size and final position must be determined for the object using the Default Sizing Algorithm defined for replaced elements in CSS layout [css-images-3]. The object-fit and object-position affect the final position and size of the object, and may cause it to be extend beyond the positioning rectangle. In that case, the overflow property determines whether the rendered object should be clipped to its positioning rectangle.
</p>

<p>
埋込d内容が ある文書片からなるときは（例： `foreignObject$e ）、
`位置決め矩形$は［
~CSSを利用して子~内容を~lay-outするための`包含塊$
］の限界域を定義する。
包含塊の `scale^en 【何から何への？】は、
現在の座標系~内に定義される
— これは、明示的, 暗黙的（例： `viewBox$a ）を問わず，すべての座標系変換を含む。
［
`foreignObject$e ／
~SVG~layout属性を利用して位置される他の要素
］は、~CSS~layoutの目的においては，暗黙的に`絶対的に位置され$る。
結果として、絶対的に位置されたどの子~要素も，この包含塊に相対的に位置される。
ここでも、 `overflow$p ~propが，`位置決め矩形$の外側へ拡がる内容が隠されるかどうかを決定する。
◎
When the embedded content consists of a document fragment (e.g., a ‘foreignObject’), the positioning rectangle defines the bounds of a containing block for laying out the child content using CSS. The scale of the containing block is defined in the current coordinate system, including all explicit and implicit (e.g., ‘viewBox’) transformations. The ‘foreignObject’, or other element that is positioned using SVG layout attributes, is implicitly absolutely-positioned for the purposes of CSS layout. As a result, any absolutely-positioned child elements are positioned relative to this containing block. Again, the overflow property determines whether content that extends outside the positioning rectangle will be hidden.
</p>

<p>
［
`width$p ／ `height$p
］に対する値 0 は、
要素と その埋込d内容の描画を不能化する。
◎
A value of zero for either width or height disables rendering of the element and its embedded content.
</p>

<p>
［
`width$p ／ `height$p
］用の `auto^v 値は、
要素を［
参照先の資源の［
`生来な寸法$や`生来な縦横比$
］に基づいて，自動で~sizeする
］ために利用される。
自動で~sizeされる値の算出は、
~CSS~layoutにおける置換d要素~用に定義される`既定の~sizing~algo$ `css-images-3$r
に従う。
特に，参照先の資源に`生来な~size$が無い場合（寸法が定義されない画像~型など）、［
横幅 300px, 縦幅 150px
］と見做される。
◎
The 'auto' value for width or height is used to size the corresponding element automatically based on the intrinsic dimensions or intrinsic aspect ratio of the referenced resource. Computation of automatically-sized values follows the Default Sizing Algorithm defined for replaced elements in CSS layout [css-images-3]. In particular, when the referenced resource does not have an intrinsic size (such as image types with no defined dimensions), it is assumed to have a width of 300px and a height of 150px.
</p>

<p>
~CSSの位置決め~prop（例： `top^p や `margin^p ）は、
埋込d内容~要素を~SVG座標系~内に位置するときには効果を発揮しない
— しかしながら，［
`foreignObject$e ／ 埋込んでいる~HTML要素の子~要素
］を位置するときには利用され得る。
◎
CSS positioning properties (e.g. top and margin) have no effect when positioning the embedded content element in the SVG coordinate system. They can, however, be used to position child elements of a ‘foreignObject’ or HTML embedding element.
</p>

	</section>
	<section id="ImageElement">
<h2 title="The ‘image’ element">12.3. `image^e 要素</h2>

◎要素名 `image@e
◎分類 `~graphics要素$／`~graphicを参照する要素$／`描画-可能な要素$／`構造的に外部の要素$
◎内容 
任意個数, 任意順序の，次に挙げる要素
⇒＃
`~animation要素$,
`記述的~要素$,
`clipPath$e,
`mask$e,
`script$e,
`style$e
◎属性
`~ARIA属性$,
`中核~属性$,
`条件付き処理~属性$,
`大域~event属性$,
`文書~要素~event属性$,
`非推奨にされた~XLink属性$,
`呈示~属性$,
`preserveAspectRatio$a,
`href$a,
`crossorigin$a
◎幾何
`x$p, `y$p, `width$p, `height$p
◎界面 `SVGImageElement$I
◎表終

<p>
`image$e 要素は、［
現在の利用元~座標系の中の所与の矩形の中へ，~fileの完全な内容を描画する
］ことを指示する。
`image$e 要素は［
~PNGや~JPEGなどの~raster画像~file ／
~MIME型 `image/svg+xml^l を伴う~file
］を指せる。
`適合~SVG~viewer$は、
少なくとも［
~PNG, ~JPEG, ~SVG
］形式による~fileは~supportする必要がある。
~SVG~fileは、
現在の文書が［
~animationを~supportするならば `~secure~animate化~mode$ ／
静的ならば `~secure静的~mode$
］の下で処理するモノトスル。
◎
The ‘image’ element indicates that the contents of a complete file are to be rendered into a given rectangle within the current user coordinate system. The ‘image’ element can refer to raster image files such as PNG or JPEG or to files with MIME type of "image/svg+xml". Conforming SVG viewers need to support at least PNG, JPEG and SVG format files. SVG files must be processed in secure animated mode if the current document supports animation, or in secure static mode if the current document is static.
</p>

<div class="p">
<p>
`image$e 要素を処理した結果は、
常に 4 ~channel~RGBA画像になる。
参照-先の画像が~RGBA画像でない場合、
~objは，次を適用して~RGBAに変換したかのような効果になる：
</p>

<ul>
	<li>
~alpha~channelを欠く場合（多くの ~PNG／~JPEG ~fileなど）、
~alpha~channelを一様に 1 に設定する。
</li>
	<li>
色~channelを欠く単~channel（~grayscale）の場合、
その~channelを利用して~RGB~channelを算出する。
</li>
</ul>

<p class="trans-note">【
原文には、 2 ~channel（ ~grayscale ＋ ~alpha）の場合の取扱いが述べられていない。
この訳では、その事例にも適応するように手を加えている。
】</p>

◎
The result of processing an ‘image’ is always a four-channel RGBA result. When an ‘image’ element references an image (such as many PNG or JPEG files) which only has three channels (RGB), then the effect is as if the object were converted into a 4-channel RGBA image with the alpha channel uniformly set to 1. For a single-channel (grayscale) raster image, the effect is as if the object were converted into a 4-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1.
</div>

<p>
`preserveAspectRatio$a 属性は、
参照先の画像を
— `具象-~obj~size$の中へ収まるように —
どう拡縮して位置するかを決定する。
この具象-~obj~sizeは、
`image^e 要素の［
`位置決め矩形$, ［
`object-fit$p, `object-position$p
］~prop
］から決定される。
この属性を適用した結果は、
実際に画像~描画~用に利用される
`画像~描画~用の矩形@
を定義する。
参照先の画像が~SVGである場合、
`画像~描画~用の矩形$は，その描画~用に利用される`~SVG表示域$を定義する。
◎
The ‘preserveAspectRatio’ attribute determines how the referenced image is scaled and positioned to fit into the concrete object size determined from the positioning rectangle and the object-fit and object-position properties. The result of applying this attribute defines an image-rendering rectangle used for actual image rendering. When the referenced image is an SVG, the image-rendering rectangle defines the SVG viewport used for rendering that SVG.
</p>

<p class="note">注記：
`preserveAspectRatio$a の計算は，
`具象-~obj~size$を決定した`後^emに適用され、
その効果があるのは，その~sizeが埋込d画像の`生来な縦横比$に合致しない場合に限られる。
`object-fit$p に利用された値が［
具象-~obj~sizeを生来な縦横比に合致させる
］ものである場合（すなわち，既定の `fill^v 以外の値）、
`preserveAspectRatio$a 値による効果は無い
— `画像~描画~用の矩形$は、
~objを~CSSで拡縮して位置するときに決定されることになる。
したがって `preserveAspectRatio$a 属性は、［
`object-fit$p ／ `object-position$p
］のほとんどの値~用の~fallbackとして，安全に利用できる
— `object-fit$p 値に関わらず縦横比の制御を切るためには、
明示的に `none^v に設定されなければならない。
◎
The ‘preserveAspectRatio’ calculations are applied after determining the concrete object size, and only have an effect if that size does not match the intrinsic aspect ratio of the embedded image. If a value of object-fit is used that ensures that the concrete object size matches the intrinsic aspect ratio (i.e., any value other than the default fill), then the ‘preserveAspectRatio’ value will have no effect; the image-rendering rectangle will be that determined when scaling and positioning the object with CSS. The ‘preserveAspectRatio’ attribute can therefore be safely used as a fallback for most values of object-fit and object-position; it must be explicitly set to none to turn off aspect ratio control, regardless of object-fit value.
</p>

<p>
`preserveAspectRatio$a 属性を評価するときに利用する縦横比は、
参照先の内容の`生来な縦横比$により定義される。
この縦横比は、参照先の内容に応じて：
~SVG画像である場合は，
`~SVG内容の生来な~sizing~prop＠~SVGcoords#SizingSVGInCSS$が定義する ／
ほとんどの~raster画像（ ~PNG, ~JPEGなど）においては，画素~数による［
横幅, 縦幅
］が縦横比を定義する。
埋込d画像に`生来な縦横比$が無い場合（例：~SVG~fileのうち，`最外縁の~svg要素$用に `viewBox$a 属性も明示的な寸法も伴わないもの）、
`preserveAspectRatio$a 属性は無視され，
画像は `image$e 要素~上の`幾何~prop$により定義される`位置決め矩形$を~fillするように描かれる。
◎
The aspect ratio to use when evaluating the ‘preserveAspectRatio’ attribute is defined by the intrinsic aspect ratio of the referenced content. For an SVG file, the aspect ratio is defined in Intrinsic sizing properties of SVG content". For most raster content (PNG, JPEG) the pixel width and height of the image file define an intrinsic aspect ratio. Where the embedded image does not have an intrinsic aspect ratio (e.g. an SVG file with neither ‘viewBox’ attribute nor explicit dimensions for the outermost svg element) the ‘preserveAspectRatio’ attribute is ignored; the embedded image is drawn to fill the positioning rectangle defined by the geometry properties on the ‘image’ element.
</p>

<div class="example">
<p>
例えば、
`image^e 要素が~raster画像（~PNGや~JPEG）を参照していて，
`preserveAspectRatio$a の値が：
</p>
<ul>
	<li>
`xMinYMin meet^v の場合、
画像の縦横比は保全され
（すなわち、画像~座標から現在の利用元~空間~座標への拡縮-係数は，X, Y 軸で同じになる）、
画像は，次を確保しつつ，アリな限り大きい~sizeにされる
⇒
全体が［
要素~上の［
`x$p, `y$p, `width$p, `height$p
］属性により定義される表示域
］の中に収まる, かつ
画像の左上隅は この表示域の左上隅に一致する
</li>
	<li>
`none^v の場合、
画像の縦横比は保全されない。
画像は、その［
左上隅 ／ 右下隅
］が座標［
( `x$p, `y$p ) ／ ( `x$p ~PLUS `width$p, `y$p ~PLUS `height$p )
］に正確に一致するように収まることになる。
</li>
</ul>

◎
For example, if the image element referenced a PNG or JPEG and preserveAspectRatio="xMinYMin meet", then the aspect ratio of the raster would be preserved (which means that the scale factor from image's coordinates to current user space coordinates would be the same for both X and Y), the raster would be sized as large as possible while ensuring that the entire raster fits within the viewport, and the top/left of the raster would be aligned with the top/left of the viewport as defined by the attributes x, y, width and height on the ‘image’ element. If the value of ‘preserveAspectRatio’ was 'none' then aspect ratio of the image would not be preserved. The image would be fit such that the top/left corner of the raster exactly aligns with coordinate (x, y) and the bottom/right corner of the raster exactly aligns with coordinate (x+width, y+height).
</div>

<p>
~SVG画像を埋込んでいる `image$e 要素に対しては、
参照先の~SVG画像~内の根~要素~上の `preserveAspectRatio$a 属性は無視して，
代わりに値 `none^v にされていたかのように扱うモノトスル
（詳細は `preserveAspectRatio$a を見よ）。
これは、参照している `image$e 上の `preserveAspectRatio$a 属性に意図された効果が
— それが `none^v であっても —
発揮されることを確保する。
◎
For ‘image’ elements embedding an SVG image, the ‘preserveAspectRatio’ attribute on the root element in the referenced SVG image must be ignored, and instead treated as if it had a value of none. (see ‘preserveAspectRatio’ for details). This ensures that the ‘preserveAspectRatio’ attribute on the referencing ‘image’ has its intended effect, even if it is none.
</p>

<p class="note">注記：
`image$e 上の `preserveAspectRatio$a 属性の値が `none^v でないときには、
`image$e 要素の~propから決定される`画像~描画~用の矩形$は、
埋込d~SVGの`生来な縦横比$に正確に合致することになる。
したがって、
埋込d~SVGからの `preserveAspectRatio$a 属性を無視しても，
通例的には効果を発揮しない。
例外は、その画像の縦横比が要素の［
`width$p ／ `height$p
］属性~用の絶対的な値から決定され，
埋込d~SVGの `viewBox$a による縦横比に`合致しない^em場合である。
これは，通例的でない状況であり、
多くの理由から，作者は避けることを勧める。
◎
When the value of the ‘preserveAspectRatio’ attribute on the ‘image’ is not none, the image-rendering rectangle determined from the properties of the ‘image’ element will exactly match the embedded SVG's intrinsic aspect ratio. Ignoring the ‘preserveAspectRatio’ attribute from the embedded SVG will therefore not usually have any effect. The exception is if the aspect ratio of that image is determined from absolute values for the width and height attributes which do not match its ‘viewBox’ aspect ratio. This is an unusual situation that authors are advised to avoid, for many reasons.
</p>

<p>
~UA~stylesheetは、
`image$e 要素~上の `overflow$p ~propの値を `hidden^v に設定する。
したがって，作者から上書きされない限り、
画像は，幾何~propにより定義される`位置決め矩形$に切抜かれることになる。
◎
The user agent stylesheet sets the value of the overflow property on ‘image’ element to hidden. Unless over-ridden by the author, images will therefore be clipped to the positioning rectangle defined by the geometry properties.
</p>

<p>
~SVG画像を埋込んでいる `image$e 要素に対しては、
2 つの異なる `overflow$p 値が適用される：
◎
For ‘image’ elements embedding an SVG image, two different overflow values apply.＼
</p>
<ul>
	<li>
`image$e 要素~上に指定された値は、［
`画像~描画~用の矩形$は，`位置決め矩形$に切抜かれるかどうか
］を決定する。
◎
The value specified on the ‘image’ element determines whether the image-rendering rectangle is clipped to the positioning rectangle.＼
</li>
	<li>
参照先の~SVGの根~要素~上の値は、［
その~graphicは，`画像~描画~用の矩形$に切抜かれるかどうか
］を決定する。
◎
The value on the root element of the referenced SVG determines whether the graphics are clipped to the image-rendering rectangle.
</li>
</ul>

<p class="note">注記：
~SVG-2 にて新たに~~導入された。
以前の~versionの~SVGでは、
埋込d~SVG上の `overflow$p ~prop（および `clip$p ~propも）は，
無視することが要求されていた。
この新たな規則は、
【 `preserveAspectRatio$a の】 `slice^v 値により~overflowしている~layoutを
— 参照先の画像に備わる~overflow制御に手を加えずに —
安全に利用できることを確保する。
◎
New in SVG 2. Previous versions of SVG required that the overflow (and also clip) property on the embedded SVG be ignored. The new rules ensure that an overflowing slice layout can be safely used without compromising the overflow control from the referenced image.
</p>

<p>
作者は、
`§ ~SVG内容の中への~link法＠~SVGlinking#LinksIntoSVG$
にて定義される~media素片を利用して，埋込d~SVG画像の特定0の~viewの中へ~linkできる。
作者は、
`基本的な~media素片~識別子^em `media-frags$r を利用して，
~raster画像を特定の~~区域に断裁できる。
どちらの型の素片も，画像の［
`生来な寸法$／`生来な縦横比$
］に影響し得る。
◎
To link into particular view of an embedded SVG image, authors can use media fragments as defined in Linking into SVG content. To crop to a specific section of a raster image, authors can use Basic media fragments identifiers [Media Fragments URI 1.0 (basic)]. Either type of fragment may affect the intrinsic dimensions and/or intrinsic aspect ratio of the image.
</p>

<p>
`image$e 要素から参照される資源は、
別々な文書を表現する
— それは、（当の資源が~XMLであるならば）自前の構文解析-~treeと文書~obj~modelを生成する。
したがって、~propが資源を成す画像の中へ継承されることはない。
◎
The resource referenced by the ‘image’ element represents a separate document which generates its own parse tree and document object model (if the resource is XML). Thus, there is no inheritance of properties into the image.
</p>

<p>
`use$e と違って、
`image$e 要素は，~SVG~fileの中にある要素は参照できない。
◎
Unlike ‘use’, the ‘image’ element cannot reference elements within an SVG file.
</p>

<div class="annotation svg2-requirement">
<p>
~SVG-2 要件：
自動で~sizeされる画像を~supportする。
◎
SVG 2 Requirement:
Support auto-sized images.
</p>

<ul>
	<li>解決：
~SVG-2においても，自動で~sizeされる画像を許容する。
（`~~参照先＠https://www.w3.org/2011/10/27-svg-irc#T18-52-24$）
◎
Resolution:
We will allow auto-sized images in SVG 2.
</li>
	<li>目的：
横幅, 縦幅を設定する必要なく，~raster画像をそれらの自前の~sizeで利用することを許容する。
◎
Purpose:
To allow raster images to use their own size without the need to set width and height.
</li>
	<li>Owner:
Cameron (`3340$ACTION)
</li>
</ul>

</div>

<div class="annotation svg2-requirement">
<p>
~SVG-2 要件：
`image$e のある~~部位を表示-用に選定することを~supportする。
◎
SVG 2 Requirement:
Support selecting part of an ‘image’ for display.
</p>

<ul>
	<li>解決：
画像のどの~~部位を表示するか選定する手法を `image^e 用に備えることになる
— おそらく `image^e 上にも `viewBox^a を許容することにより。
（`~~参照先＠https://www.w3.org/2011/10/27-svg-irc#T18-45-13$）
◎
Resolution:
We will have a method for ‘image’ to select a part of an image to display, maybe by allowing ‘viewBox’ on it.
</li>
	<li>目的：
画像を手動で切分けることを作者に要求することなく，画像の一部の選定を許容する。
◎
Purpose:
To allow selection of part of an image without requiring the author to manually slice the image.
</li>
	<li>Owner:
Nobody
</li>
</ul>
</div>

<div class="annotation svg2-requirement">
<p>
~SVG-2 要件：
`object-fit$p, `object-position$p
~prop `css-images-3$r を~supportする。
◎
SVG 2 Requirement:
Support the ‘object-fit’ and ‘object-position’ properties from css-images-3.
</p>

<ul>
	<li>解決：
~SVG-2は CSS Images Module に依存することになる
（`~~参照先＠https://www.w3.org/2011/07/29-svg-minutes.html#item08$）
◎
Resolution:
SVG 2 will depend on CSS3 Image Values and CSS4 Image Values.
</li>
	<li>目的：
`preserveAspectRatio$a が供する［
画像の収納法を指定する仕方
］は、~CSSによるそれに~~倣うようにする。
◎
Purpose:
To align with the CSS way of specifying image fitting that ‘preserveAspectRatio’ provides.
</li>
	<li>Owner:
Cameron or Erik (no action)
</li>
</ul>
</div>

~attrdef

<dl class="attrdef-list">
	<dt>
◎属名 `crossorigin@a
◎属値 <span class="prod">[ `anonymous^v | `use-credentials^v ]?</span>
◎属初 （~HTMLによる この属性の定義を見よ）
◎属ア 可
◎表終
◎
Name 	Value 	Initial value 	Animatable
crossorigin 	[ anonymous | use-credentials ]? 	(see HTML definition of attribute) 	yes
</dt>
	<dd>
`crossorigin^a 属性は，`~CORS設定群~属性$であり、
他が指定されない限り， `HTML$r と同じ処理~規則に従う。
◎
The crossorigin attribute is a CORS settings attribute, and unless otherwise specified follows the same processing rules as in HTML [HTML].
</dd>
	<dt>
◎属名 `href@a
◎属値 `~URLt$
◎属初 （ナシ）
◎属ア 可
◎表終
◎
Name 	Value 	Initial value 	Animatable
href 	URL [URL] 	(none) 	yes
</dt>
	<dd>
描画する画像を識別する`~URL参照$sec。
`~URL参照~属性$, `非推奨にされた~XLink属性$
用に定義される共通な取扱いを~~参照。
◎
An URL reference identifying the image to render. Refer to the common handling defined for URL reference attributes and deprecated XLink attributes.
</dd>
	<dd>
~URLは、
`§ ~link法＠~SVGlinking#processingURL$
に述べるとおりに処理され，資源は~fetchされる。
◎
The URL is processed and the resource is fetched as described in the Linking chapter.
</dd>
</dl>

<div class="example">

<pre class="lang-xml">
&lt;?xml version="1.0" standalone="no"?&gt;
&lt;svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;desc&gt;<span class="comment">
この~graphicは、外部~画像へ~linkする
◎
This graphic links to an external image
</span>
  &lt;/desc&gt;
  &lt;image x="200" y="200" width="100px" height="100px"
         href="myimage.png"&gt;
    &lt;title&gt;My image&lt;/title&gt;
  &lt;/image&gt;
&lt;/svg&gt;
</pre>
</div>

<p>
画像~参照は常に完全な文書を指すので、
素片のみ【！target-only】の~URLは【参照-元と】同じ~fileへの~linkとして扱われ，
それもまた独立な埋込d画像として描画される。
この埋込d画像は~secure~modeの下で処理されるので、
無限~再帰を防止するため，画像の自前の埋込d参照は処理されない。
◎
Since image references always refer to a complete document, a target-only URL is treated as a link to the same file, which is rendered again as an independent embedded image. Since the embedded image is processed in a secure mode, its own embedded references are not processed, preventing infinite recursion.
</p>

<div class="example">
<pre class="lang-xml">
&lt;?xml version="1.0" standalone="no"?&gt;
&lt;svg width="5cm" height="3cm" viewBox="0 0 50 30" 
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;title&gt;Recursive SVG&lt;/title&gt;
  &lt;desc&gt;<span class="comment">
2 つの再帰的な画像~参照を伴う~SVG。
2 つの参照のうち、
一方は相対~URLとして~file名を利用し，
他方は `#target^c 素片のみを利用する。
埋込d画像は、
外部~file参照を~supportする処理~modeの下で~viewされたときには，
描画されるべきである
— しかしながら，再帰が起こるのは一度限りになるよう、
埋込d画像は，~secure~modeで処理されなければならない。
その外観は、
同心円状に入子にされた 3 個の~red真円になるべきである
— その最内縁の真円は、
`#target:target^css の~styleが~~効くため，ベタに~fillされる。
◎
An SVG with two recursive image reference to itself. One reference uses the file name as a relative URL, the other uses a target fragment only. When viewed in a processing mode that supports external file references, the embedded images should be rendered; however, the embedded image must be processed in secure mode, so the recursion only happens once. The appearance should be three nested red circles in a bulls-eye pattern; the innermost circle has solid fill because of target styles.
</span>
  &lt;/desc&gt;
  &lt;style type="text/css"&gt;
    #target:target {
      fill: red;
    }
  &lt;/style&gt;
  &lt;circle id="target" 
          stroke="red" stroke-width="5" fill="none"
          cx="50%" cy="50%" r="12" /&gt;
  &lt;image xlink:href="recursive-image.svg"
         x="25%" y="25%" width="50%" height="50%" /&gt;
  &lt;image xlink:href="#target"
         x="45%" y="45%" width="10%" height="10%" /&gt;
&lt;/svg&gt;
</pre>

<figure>
<p class="alt" hidden id="_dgm-recursive-image">
自身を埋込んで同心円状の~patternを作成している~SVG
◎
Example recursive-image — an SVG that embeds itself, creating a bulls-eye pattern
</p>
<figcaption>
例 `recursive-image^xl
◎
Example recursive-image
</figcaption></figure>

`embedded/recursive-image.svg^viewAs

</div>

	</section>
	<section id="ForeignObjectElement">
<h2 title="The ‘foreignObject’ element">12.4. `foreignObject^e 要素</h2>

◎要素名 `foreignObject@e
◎分類 `~graphics要素$／`描画-可能な要素$／`構造的に外部の要素$
◎内容 任意個数, 任意順序の，~~任意の要素, 文字~data
◎属性
`~ARIA属性$,
`中核~属性$,
`条件付き処理~属性$,
`大域~event属性$,
`文書~要素~event属性$,
`呈示~属性$
◎幾何
`x$p, `y$p, `width$p, `height$p
◎界面 `SVGForeignObjectElement$I
◎表終

<p>
~SVGは、［
他の型の内容を［
述べる／描画する
］ための，他の~XML言語
］と互換になるよう設計されている。
`foreignObject$e 要素は、
~SVG名前空間に属さない要素を内包できるようにする
— それは、他の~UA処理-を利用して，~SVG~graphicを成す領域の中に描画される。
内包された 外来な~graphicな内容は、
~SVG［
座標系変換, ~filter, 切抜き, ~masking, 組成
］の~subjectになる。
各種 例には、~SVG絵図の中に
`MathML＠~TR/2003/REC-MathML2-20031021/$ 式 `MathML3$r
を挿入するものや，~CSSで整形された［
~HTML~text ／ ~form入力
］が成す複階的な~blockを追加するものもある。
◎
SVG is designed to be compatible with other XML languages for describing and rendering other types of content. The ‘foreignObject’ element allows for inclusion of elements in a non-SVG namespace which is rendered within a region of the SVG graphic using other user agent processes. The included foreign graphical content is subject to SVG transformations, filters, clipping, masking and compositing. Examples include inserting a MathML expression into an SVG drawing [MathML3], or adding a block of complex CSS-formatted HTML text or form inputs.
</p>

<p class="note">注記：
~HTML構文解析器は、
`foreignObject$e の内側にある要素を~HTML文書片の内側にある要素と等価に扱う。
［
`svg^e ／ `math^e
］要素, および その子孫は、［
~SVG／~MathML
］名前空間に属するものとして構文解析されることになる
— 他のすべての~tagは、
~HTML名前空間に属するものとして構文解析されることになる。
◎
The HTML parser treats elements inside the ‘foreignObject’ equivalent to elements inside an HTML document fragment. Any svg or math element, and their descendents, will be parsed as being in the SVG or MathML namespace, respectively; all other tags will be parsed as being in the HTML namespace.
</p>

<p>
`foreignObject$e の中では、
~SVG名前空間に属する要素は描画されない
— ただし、
`foreignObject$e の子孫として定義された根 `svg$e 要素を含め，
適正に定義された~SVG素片~内は除く。
◎
SVG-namespaced elements within a ‘foreignObject’ will not be rendered, except in the situation where a properly defined SVG fragment, including a root ‘svg’ element is defined as a descendent of the ‘foreignObject’.
</p>

<p>
`foreignObject$e は［
`switch$e 要素, `requiredExtensions$a 属性
］と併用されてもヨイ
— ~UA~supportの有無について適正な検査-法を供して，~UA~supportが可用でない事例でも代替-描画を供するために。
◎
A ‘foreignObject’ may be used in conjunction with the ‘switch’ element and the ‘requiredExtensions’ attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.
</p>

<p class="note">注記：
この仕様は、［
`requiredExtensions$a 値が，いくつか異なる~XML言語~用の~supportに どう対応付けられるべきか
］は，定義しない
— 将来の仕様はそうするかもしれない。
◎
This specification does not define how ‘requiredExtensions’ values should be mapped to support for different XML languages; a future specification may do so.
</p>

<p>
~SVG~UAには、［
外来な埋込d~obj型を取扱うために，他の任意の~UAを呼出す能を~supportする
］ことは要求されない。
しかしながら，すべての適合~SVG~UAは `switch$e 要素を~supportする必要があり、［
`switch$e 要素の中の代替の一つとして，妥当な~SVG要素が現れる
］ときには，それを描画-可能であるモノトスル。
◎
It is not required that SVG user agent support the ability to invoke other arbitrary user agents to handle embedded foreign object types; however, all conforming SVG user agents would need to support the ‘switch’ element and must be able to render valid SVG elements when they appear as one of the alternatives within a ‘switch’ element.
</p>

<p>
その商用~Web~browserは、［
~CSSで整形される~HTML ／ ~MathML内容
］を
— その描画される内容は，当の~SVG素片内で定義される［
座標系変換, 組成
］の~subjectになるように —
~SVG内に埋込む能を~supportすることが期待される。
そのような能力は、現時点では，要件とされていない。
◎
It is expected that commercial Web browsers will support the ability for SVG to embed CSS-formatted HTML and also MathML content, with the rendered content subject to transformations and compositing defined in the SVG fragment. At this time, such a capability is not a requirement.
</p>

<div class="example">

<pre class="lang-xml">
&lt;?xml version="1.0" standalone="yes"?&gt;
&lt;svg width="4in" height="3in"
 xmlns = 'http://www.w3.org/2000/svg'&gt;
  &lt;desc&gt;<span class="comment">
この例は、
`switch^e 要素を利用して，
~XHTMLは~supportされていない場合には 段落の~fallback用に~graphicな表現を供する。
◎
This example uses the 'switch' element to provide a fallback graphical representation of an paragraph, if XMHTML is not supported.
</span>&lt;/desc&gt;
  &lt;!-- <span class="comment">
`switch^e 要素は、
~test用の属性を評価した結果が `真^i になる子~要素のうち，最初のものを処理することになる。
◎
The 'switch' element will process the first child element whose testing attributes evaluate to true.
</span> --&gt;
  &lt;switch&gt;
    &lt;!-- <span class="comment">
`requiredExtensions^a 属性を評価した結果が `真^i になる場合、
埋込d~XHTMLを処理する
（すなわち~UAは、~SVGの中に埋込まれた~XHTMLを~supportする）。
◎
Process the embedded XHTML if the requiredExtensions attribute evaluates to true (i.e., the user agent supports XHTML embedded within SVG).
</span> --&gt;
    &lt;foreignObject
      width="100" height="50"
      requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML"
    &gt;
      &lt;!-- <span class="comment">
~XHTML内容はここに来る
◎
XHTML content goes here
</span> --&gt;
      &lt;body xmlns="http://www.w3.org/1999/xhtml"&gt;
        &lt;p&gt;この段落は、行を折返すことが要求される。&lt;/p&gt;
      &lt;/body&gt;
    &lt;/foreignObject&gt;
    &lt;!-- <span class="comment">
他の場合、次の代替-~SVGを処理する。
`text^e 要素~上には~test用の属性は無いことに注意。
~test用の属性が供されていない場合、
~test用の属性が在って，評価した結果は `真^i になるかのようになる。
◎
Else, process the following alternate SVG. Note that there are no testing attributes on the 'text' element. If no testing attributes are provided, it is as if there were testing attributes and they evaluated to true.
</span> --&gt;
    &lt;text font-size="10"&gt;
      &lt;tspan x="10" y="10"&gt;この段落は、行を折返す&lt;/tspan&gt;
      &lt;tspan x="10" y="20"&gt;ことが要求される。&lt;/tspan&gt;
    &lt;/text&gt;
  &lt;/switch&gt;
&lt;/svg&gt;
</pre>
</div>
<!-- 

Here is a paragraph that requires word wrap

Here is a paragraph that
requires word wrap.

 -->

	</section>
	<section id="DOMInterfaces">
<h2 title="DOM interfaces">12.5. DOM ~interface</h2>

		<section id="InterfaceSVGImageElement">
<h3 title="Interface SVGImageElement">12.5.1. ~interface `SVGImageElement^I0</h3>

<p>
`SVGImageElement$I ~objは、
~DOM内で `image$e 要素を表現する。
◎
An SVGImageElement object represents an ‘image’ element in the DOM.
</p>

<pre class="idl">
[Exposed=Window]
interface `SVGImageElement^dfn : `SVGGraphicsElement$I {
  [SameObject] readonly attribute `SVGAnimatedLength$I `x$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `y$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `width$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `height$m;
  [SameObject] readonly attribute `SVGAnimatedPreserveAspectRatio$I `preserveAspectRatio$m;
  attribute DOMString? `crossOrigin$m;
};

`SVGImageElement$I includes `SVGURIReference$I;
</pre>

<dl class="idl-def">
	<dt>`x@m</dt>
	<dt>`y@m</dt>
	<dt>`width@m</dt>
	<dt>`height@m</dt>
	<dd>
順に［
`x$p, `y$p, `width$p, `height$p
］~propの［
算出d値, および それぞれに対応する呈示~属性
］を`反映する$。
◎
The x, y, width and height IDL attributes reflect the computed values of the x, y, width and height properties and their corresponding presentation attributes, respectively.
</dd>

	<dt>`preserveAspectRatio@m</dt>
	<dd>
`preserveAspectRatio$a 内容~属性を`反映する$。
◎
The preserveAspectRatio IDL attribute reflects the ‘preserveAspectRatio’ content attribute.
</dd>

	<dt>`crossOrigin@m</dt>
	<dd>
`crossorigin$a 内容~属性を`反映する$。
◎
The crossOrigin IDL attribute reflects the ‘crossorigin’ content attribute.
</dd>
</dl>

		</section>
		<section id="InterfaceSVGForeignObjectElement">
<h3 title="Interface SVGForeignObjectElement">12.5.2. ~interface `SVGForeignObjectElement^I0</h3>

<p>
`SVGForeignObjectElement$I ~objは、
~DOM内で `foreignObject$e を表現する。
◎
An SVGForeignObjectElement object represents a ‘foreignObject’ in the DOM.
</p>

<pre class="idl">
[Exposed=Window]
interface `SVGForeignObjectElement^dfn : `SVGGraphicsElement$I {
  [SameObject] readonly attribute `SVGAnimatedLength$I `x$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `y$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `width$m;
  [SameObject] readonly attribute `SVGAnimatedLength$I `height$m;
};
</pre>

<dl class="idl-def">
	<dt>`x@m</dt>
	<dt>`y@m</dt>
	<dt>`width@m</dt>
	<dt>`height@m</dt>
	<dd>
順に［
`x$p, `y$p, `width$p, `height$p
］~propの［
算出d値, および それぞれに対応する呈示~属性
］を`反映する$。
◎
The x, y, width and height IDL attributes reflect the computed values of the x, y, width and height properties and their corresponding presentation attributes, respectively.
</dd>
</dl>

		</section>
	</section>
</main>