SVG文書片 は 'svg' 要素内に含まれる任意個数のSVG要素によって構成される。
An SVG document fragment consists of any number of SVG elements contained within an 'svg' element.
SVG文書片は空のもの(即ち 'svg' 内に何も含んでいないもの)や、 'rect' などの グラフィックス要素 をただ一つ含むごく単純なものから、 コンテナ要素 と グラフィックス要素 から構築される複雑で深い入れ子構造を持つものまである。
An SVG document fragment can range from an empty fragment (i.e., no content inside of the 'svg' element), to a very simple SVG document fragment containing a single SVG graphics element such as a 'rect', to a complex, deeply nested collection of container elements and graphics elements.
SVG文書片はそれ自身が独立したファイルまたはリソースとなれる。その場合は SVG文書 になる。あるいは、親となるXML文書に文書片としてインラインに埋め込むこともできる。
An SVG document fragment can stand by itself as a self-contained file or resource, in which case the SVG document fragment is an SVG document, or it can be embedded inline as a fragment within a parent XML document.
親のXML文書に文書片として埋め込まれた単純なSVG内容の例を下に示す。XML名前空間の利用により 'svg' 要素と 'ellipse' 要素がSVG名前空間に属することを指示していることに注意:
The following example shows simple SVG content embedded inline as a fragment within a parent XML document. Note the use of XML namespaces to indicate that the 'svg' and 'ellipse' elements belong to the SVG namespace:
<?xml version="1.0" standalone="yes"?> <parent xmlns="http://example.org" xmlns:svg="http://www.w3.org/2000/svg"> <!-- 親の内容はここに --> <svg:svg width="4cm" height="8cm" version="1.1"> <svg:ellipse cx="2cm" cy="4cm" rx="2cm" ry="1cm" /> </svg:svg> <!-- ... --> </parent>
少し複雑な例(いくつかの矩形が含まれている)。独立した外部依存のないSVG文書になっている:
This example shows a slightly more complex (i.e., it contains multiple rectangles) stand-alone, self-contained SVG document:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>4個の別々の矩形 </desc> <rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/> <rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/> <rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/> <rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/> <!-- 'rect' 要素でキャンバスの境界を表示 --> <rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
'svg' 要素はSVG内容の中に現れてもよい。これがSVG文書片内に他のSVG文書片を埋め込むことを可能にする仕組である。
'svg' elements can appear in the middle of SVG content. This is the mechanism by which SVG document fragments can be embedded within other SVG document fragments.
SVG内容中の 'svg' 要素のもう一つの用途は新しいビューポートを確立させることである( 新しいビューポートの確立 を見よ)。
Another use for 'svg' elements within the middle of SVG content is to establish a new viewport. (See Establishing a new viewport.)
いずれにせよ、全てのSVG要素がSVG名前空間に属していることが識別されるようにするためには、「XML名前空間」勧告("Namespaces in XML" Recommendation) [XML-NS] に従って、SVG名前空間宣言が与えられなければならない。以下はSVG名前空間宣言として可能な記法である。名前空間接頭辞のない xmlns 属性を 'svg' 要素に指定した場合、その可視範囲にある全ての要素に対する既定の名前空間がSVGになる:
In all cases, for compliance with the "Namespaces in XML" Recommendation [ XML-NS], an SVG namespace declaration must be provided so that all SVG elements are identified as belonging to the SVG namespace. The following are possible ways to provide a namespace declaration. An xmlns attribute without a namespace prefix could be specified on an 'svg' element, which means that SVG is the default namespace for all elements within the scope of the element with the xmlns attribute:
<svg xmlns="http://www.w3.org/2000/svg"...> <rect .../> </svg>
xmlns
属性で名前空間接頭辞を付けた場合(例えば
xmlns:svg="http://www.w3.org/2000/svg"
)、対応する名前空間は既定の名前空間にはならず、全要素に対し名前空間接頭辞を明示しなければならない:
If a namespace prefix is specified on the xmlns attribute (e.g.,
xmlns:svg="http://www.w3.org/2000/svg"), then the corresponding namespace is not the default namespace, so an explicit namespace prefix must be assigned to the elements:
<svg:svg xmlns:svg="http://www.w3.org/2000/svg"...> <svg:rect .../> </svg:svg>
名前空間接頭辞は祖先要素に指定することも可能である( 上の例 に示されている)。詳細は「XML名前空間」勧告 [XML-NS] を参照のこと。
Namespace prefixes can be specified on ancestor elements (illustrated in the above example). For more information, refer to the "Namespaces in XML" Recommendation [ XML-NS].
<!-- svg: SVG Document Element ......................... --> <!ENTITY % SVG.svg.extra.content "" > <!ENTITY % SVG.svg.element "INCLUDE" > <![%SVG.svg.element;[ <!ENTITY % SVG.svg.content "( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class; %SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class; %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class; %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class; %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class; %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class; %SVG.Font.class; %SVG.svg.extra.content; )*" > <!ELEMENT %SVG.svg.qname; %SVG.svg.content; > <!-- end of SVG.svg.element -->]]> <!ENTITY % SVG.svg.attlist "INCLUDE" > <![%SVG.svg.attlist;[ <!ATTLIST %SVG.svg.qname; %SVG.xmlns.attrib; %SVG.Core.attrib; %SVG.Conditional.attrib; %SVG.Style.attrib; %SVG.Presentation.attrib; %SVG.DocumentEvents.attrib; %SVG.GraphicalEvents.attrib; %SVG.External.attrib; x %Coordinate.datatype; #IMPLIED y %Coordinate.datatype; #IMPLIED width %Length.datatype; #IMPLIED height %Length.datatype; #IMPLIED viewBox %ViewBoxSpec.datatype; #IMPLIED preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet' zoomAndPan ( disable | magnify ) 'magnify' version %Number.datatype; #FIXED '1.1' baseProfile %Text.datatype; #IMPLIED contentScriptType %ContentType.datatype; 'text/ecmascript' contentStyleType %ContentType.datatype; 'text/css' > <!-- end of SVG.svg.attlist -->]]> |
属性定義:
Attribute definitions:
SVG文書が他の文書の部品として参照されることが予期される場合、 viewBox 属性を 最も外側のsvg要素 に指定するとよい。この属性はSVG文書を任意のビューポートに適宜倍率を変えてはめ込む簡便な方法を提供する。
If an SVG document is likely to be referenced as a component of another document, the author will often want to include a viewBox attribute on the outermost 'svg' element of the referenced document. This attribute provides a convenient way to design SVG documents to scale-to-fit into an arbitrary viewport.
'g' 要素は互いに関連する グラフィックス要素 をグループ化するための コンテナ要素 である。
The 'g' element is a container element for grouping together related graphics elements.
'desc' 要素と 'title' 要素をグループ化と併用することにより、文書構造と意味内容を伝えられるようになる。構造に富んだ文書はスピーチとして, 点字として, あるいはグラフィックとして出力可能になり、 アクセシビリティ を促進する。
Grouping constructs, when used in conjunction with the 'desc' and 'title' elements, provide information about document structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.
グループ化された要素に対しても、個々のオブジェクトと同様に id 属性を使って名前を付けることができる。名前付きのグループはアニメーションや再利用など様々な場面で必要になる。
A group of elements, as well as individual objects, can be given a name using the id attribute. Named groups are needed for several purposes such as animation and re-usable objects.
例:
An example:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="5cm" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>それぞれが2つの矩形からなる2つのグループ </desc> <g id="group1" fill="red" > <rect x="1cm" y="1cm" width="1cm" height="1cm" /> <rect x="3cm" y="1cm" width="1cm" height="1cm" /> </g> <g id="group2" fill="blue" > <rect x="1cm" y="3cm" width="1cm" height="1cm" /> <rect x="3cm" y="3cm" width="1cm" height="1cm" /> </g> <!-- 'rect' 要素でキャンバスの境界を表示 --> <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
'g' 要素は、他の 'g' 要素を任意の階層にわたって入れ子にすることができる。下の例のように:
A 'g' element can contain other 'g' elements nested within it, to an arbitrary depth. Thus, the following is possible:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>グループは入れ子にできる </desc> <g> <g> <g> </g> </g> </g> </svg>
'g' 内に含まれないどんな要素も、あたかも単独でグループをなすものとして(少なくとも概念的には)扱われる。
Any element that is not contained within a 'g' is treated (at least conceptually) as if it were in its own group.
<!ENTITY % SVG.g.extra.content "" > <!ENTITY % SVG.g.element "INCLUDE" > <![%SVG.g.element;[ <!ENTITY % SVG.g.content "( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class; %SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class; %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class; %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class; %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class; %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class; %SVG.Font.class; %SVG.g.extra.content; )*" > <!ELEMENT %SVG.g.qname; %SVG.g.content; > <!-- end of SVG.g.element -->]]> <!ENTITY % SVG.g.attlist "INCLUDE" > |
SVGにおいては、他のオブジェクトへの URI参照 [URI] の広範囲な利用が可能である。例えば矩形を線型グラデーションで塗りつぶす場合、次の様に最初に 'linearGradient' 要素を定義して ID を与える:
SVG makes extensive use of URI references [ URI] to other objects. For example, to fill a rectangle with a linear gradient, you first define a 'linearGradient' element and give it an ID, as in:
<linearGradient id="MyGradient">...</linearGradient>
次に、矩形の 'fill' プロパティに先程の線型グラデーションへの参照を与える:
You then reference the linear gradient as the value of the 'fill' property for the rectangle, as in:
<rect style="fill:url(#MyGradient)"/>
URI参照は次の書式で与えられる: ( エラータ : XPointer 関連はこの仕様から取り除かれたので、この節の XPointer 関連の記述(削除部としてマークアップされている箇所)も削除。)
URI references are defined in either of the following forms:
<URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#" <elementID> ]-または- <URI-reference> = [ <absoluteURI> | <relativeURI> ] [ "#xpointer(id(" <elementID> "))" ]
ここで <elementID> は参照先の要素の ID である。
where <elementID> is the ID of the referenced element.
(上の2つの書式(即ち
#<elementID>
と
#xpointer(id(<elementID>))
)は「XMLポインタ言語(XPointer)」
[XPTR]
の書式に従っていることに注意。SVG 1.0のUAは XPointer の書式のうちこれら2書式のみサポートしていれば十分である。)
(Note that the two forms above (i.e., #<elementID> and #xpointer(id(<elementID>))) are formulated in syntaxes compatible with "XML Pointer Language (XPointer)" [ XPTR]. These two formulations of URI references are the only XPointer formulations that are required in SVG 1.0 user agents.)
SVGは2種類のURI参照をサポートする:
SVG supports two types of URI references:
次の規則がURI参照に適用される:
The following rules apply to the processing of URI references:
参照元と有効な参照先の種類として許容される要素とプロパティを以下に列挙する:
The following list describes the elements and properties that allow URI references and the valid target types for those references:
次の規則が無効なURI参照に適用される:
The following rules apply to the processing of invalid URI references:
参照先の要素は可能な限り 'defs' 要素内に定義することが推奨される。常に参照として利用される要素は、 'altGlyphDef', 'clipPath', 'cursor', 'filter', 'linearGradient', 'marker', 'mask', 'pattern', 'radialGradient', 'symbol' である。これらの要素は 'defs' 要素内で定義した方が文書の中身が理解し易くなり、アクセシビリティも向上する。
It is recommended that, wherever possible, referenced elements be defined inside of a 'defs' element. Among the elements that are always referenced: 'altGlyphDef', 'clipPath', 'cursor', 'filter', 'linearGradient', 'marker', 'mask', 'pattern', 'radialGradient' and 'symbol'. Defining these elements inside of a 'defs' element promotes understandability of the SVG content and thus promotes accessibility.
URI参照はXLink [XLINK] 名前空間の href 属性で指定される。既定の接頭辞 'xlink:' がXLink名前空間の属性に利用される場合、その属性名は xlink:href となる。この属性には利用したいリソース(またはリソース片)へのURI参照を指定する。
A URI reference is specified within an href attribute in the XLink [ XLINK] namespace. If the default prefix of 'xlink:' is used for attributes in the XLink namespace, then the attribute will be specified as xlink:href. The value of this attribute is a URI reference for the desired resource (or resource fragment).
href 属性の値は [RFC2396] で定義されるURI参照か、後で述べるエスケープ処理が施されたものでなければならない。この処理はURI参照がURIリゾルバに渡される時点で適用される。
The value of the href attribute must be a URI reference as defined in [ RFC2396], or must result in a URI reference after the escaping procedure described below is applied. The procedure is applied when passing the URI reference to a URI resolver.
一部の文字はたとえ XML で許されているとしても URI参照に含まれてはならない。含まれてならない文字は ASCII 以外の全ての文字と [RFC2396] の2.4節に書かれた例外文字の全てである。但し [RFC2732] で合法化された、番号記号(#), パーセント(%), 角括弧([, ])を除く。合法でない文字は次の様にしてエスケープされねばならない:
Some characters are disallowed in URI references, even if they are allowed in XML; the disallowed characters include all non-ASCII characters, plus the excluded characters listed in Section 2.4 of [ RFC2396], except for the number sign (#) and percent sign (%) and the square bracket characters re-allowed in [ RFC2732]. Disallowed characters must be escaped as follows:
全ての合法でない文字は1バイト以上の UTF-8 [RFC2279] に変換される。
Each disallowed character is converted to UTF-8 [ RFC2279] as one or more bytes.
合法でない文字に対応する全てのバイトはURIエスケープ文字にされる(即ち HH をバイトの16進表記とするとき、%HH)。
Any bytes corresponding to a disallowed character are escaped with the URI escaping mechanism (that is, converted to %HH, where HH is the hexadecimal notation of the byte value).
元々の文字は変換された結果に置き換えられる。
The original character is replaced by the resulting character sequence.
アプリケーションにとって値がURI参照であるかどうかをいちいちチェックするのは非現実的なことなので、この仕様は [RFC2396] に従っているだけであり、SVGアプリケーションがこのような適合性のテストを受ける必要があることを強いるわけではない。 (Because it is impractical for any application to check that a value is a URI reference, this specification follows the lead of RFC2396 in this matter and imposes no such conformance testing requirement on SVG applications - 訳者はこの文の意図を把握できていません:URI参照のチェックと適合性テストとの関係が理解できていません。)
Because it is impractical for any application to check that a value is a URI reference, this specification follows the lead of [ RFC2396] in this matter and imposes no such conformance testing requirement on SVG applications.
URI参照が相対参照ならば使用される前に [XML-Base] で述べられている方法で絶対参照が導出されねばならない。
If the URI reference is relative, its absolute version must be computed by the method of [ XML-Base] before use.
(
エラータ
:次は削除)
XMLリソースへの参照の場合、URI参照に使われている文書片識別子(もしあれば)の書式は XPointer
[XPTR]
の仕様に従う。
For locators into XML resources, the format of the fragment identifier (if any) used within the URI reference is specified by the XPointer specification [ XPTR].
参照先のリソースについての補足的な情報を追加的なXLink属性で指定できる。これらの追加属性は次の実体として DTD に含まれている。3つの実体定義は xlink:show の値が異なるだけであり、最初の2つは値 other 、あとの1つは値 embed をとる。最初の2つの実体定義はリソースを参照するほとんどの要素で用いられるものである。3番目の実体定義は要素 'use', 'image', 'feImage' で用いられる。
Additional XLink attributes can be specified that provide supplemental information regarding the referenced resource. These additional attributes are included in the DTD in the following entities. The three entity definitions differ only in the value of xlink:show, which has the value other in the first two entities and the value embed in the third. The first two entity definitions are used in most element definitions which reference resources. The third entity definition is used by elements 'use', 'image' and 'feImage'.
<!ENTITY % SVG.XLink.extra.attrib "" > <!ENTITY % SVG.XLink.attrib "%XLINK.xmlns.attrib; %XLINK.pfx;type ( simple ) #FIXED 'simple' %XLINK.pfx;href %URI.datatype; #IMPLIED %XLINK.pfx;role %URI.datatype; #IMPLIED %XLINK.pfx;arcrole %URI.datatype; #IMPLIED %XLINK.pfx;title CDATA #IMPLIED %XLINK.pfx;show ( other ) 'other' %XLINK.pfx;actuate ( onLoad ) #FIXED 'onLoad' %SVG.XLink.extra.attrib;" > <!ENTITY % SVG.XLinkRequired.extra.attrib "" > <!ENTITY % SVG.XLinkRequired.attrib "%XLINK.xmlns.attrib; %XLINK.pfx;type ( simple ) #FIXED 'simple' %XLINK.pfx;href %URI.datatype; #REQUIRED %XLINK.pfx;role %URI.datatype; #IMPLIED %XLINK.pfx;arcrole %URI.datatype; #IMPLIED %XLINK.pfx;title CDATA #IMPLIED %XLINK.pfx;show ( other ) 'other' %XLINK.pfx;actuate ( onLoad ) #FIXED 'onLoad' %SVG.XLinkRequired.extra.attrib;" > <!ENTITY % SVG.XLinkEmbed.extra.attrib "" > <!ENTITY % SVG.XLinkEmbed.attrib "%XLINK.xmlns.attrib; %XLINK.pfx;type ( simple ) #FIXED 'simple' %XLINK.pfx;href %URI.datatype; #REQUIRED %XLINK.pfx;role %URI.datatype; #IMPLIED %XLINK.pfx;arcrole %URI.datatype; #IMPLIED %XLINK.pfx;title CDATA #IMPLIED %XLINK.pfx;show ( embed ) 'embed' %XLINK.pfx;actuate ( onLoad ) #FIXED 'onLoad' %SVG.XLinkEmbed.extra.attrib;" > <!ENTITY % SVG.XLinkReplace.extra.attrib "" > <!ENTITY % SVG.XLinkReplace.attrib "%XLINK.xmlns.attrib; %XLINK.pfx;type ( simple ) #FIXED 'simple' %XLINK.pfx;href %URI.datatype; #REQUIRED %XLINK.pfx;role %URI.datatype; #IMPLIED %XLINK.pfx;arcrole %URI.datatype; #IMPLIED %XLINK.pfx;title CDATA #IMPLIED %XLINK.pfx;show ( new | replace ) 'replace' %XLINK.pfx;actuate ( onRequest ) #FIXED 'onRequest' %SVG.XLinkReplace.extra.attrib;" > |
いかなる場合でも、上記XLink属性のいずれかをSVG内容において利用する際には、「XML名前空間」勧告 [XML-NS] に適合させるために、明示的なXLink名前空間宣言が与えられなければならない。このようなXLink名前空間宣言を与える簡単な方法の一つは、XLink属性を利用する内容における 最も外側のsvg要素 にXLink名前空間のための xmlns 属性を含めることである。例えば:
In all cases, for compliance with the "Namespaces in XML" Recommendation [ XML-NS], an explicit XLink namespace declaration must be provided whenever one of the above XLink attributes is used within SVG content. One simple way to provide such an XLink namespace declaration is to include an xmlns attribute for the XLink namespace on the outermost 'svg' element for content that uses XLink attributes. For example:
<svg xmlns:xlink="http://www.w3.org/1999/xlink"...> <image xlink:href="foo.png" .../> </svg>
'defs' 要素は被参照要素のためのコンテナ要素である。可読性と アクセシビリティ の要求から、参照される可能性のある要素は可能ならこの要素内にて定義することが推奨される。
The 'defs' element is a container element for referenced elements. For understandability and accessibility reasons, it is recommended that, whenever possible, referenced elements be defined inside of a 'defs'.
'defs' 要素の内容モデルは 'g' 要素と全く同じである。したがって 'g' 要素の子になれる全ての要素は 'defs' 要素の子になれ、逆もまた真である。
The content model for 'defs' is the same as for the 'g' element; thus, any element that can be a child of a 'g' can also be a child of a 'defs', and vice versa.
'defs' 要素の子孫の要素は直接描画されることはない。これらはあたかも 'defs' 要素が 'g' 要素だったとしたときに 'display' プロパティが none に指定されているかのごとく、描画木の一部分とみなされない。しかしながら、 'defs' 要素の子孫は元々の木にいつでも存在しており、他の要素からの参照は常に可能である。したがって、 'display' プロパティが 'defs' 要素またはその子孫のどこかにあったとしても、他の要素からの参照を妨げることはない。
Elements that are descendants of a 'defs' are not rendered directly; they are prevented from becoming part of the rendering tree just as if the 'defs' element were a 'g' element and the 'display' property were set to none. Note, however, that the descendants of a 'defs' are always present in the source tree and thus can always be referenced by other elements; thus, the value of the 'display' property on the 'defs' element or any of its descendants does not prevent those elements from being referenced by other elements.
<!ENTITY % SVG.defs.extra.content "" > <!ENTITY % SVG.defs.element "INCLUDE" > <![%SVG.defs.element;[ <!ENTITY % SVG.defs.content "( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class; %SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class; %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class; %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class; %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class; %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class; %SVG.Font.class; %SVG.defs.extra.content; )*" > <!ELEMENT %SVG.defs.qname; %SVG.defs.content; > <!-- end of SVG.defs.element -->]]> <!ENTITY % SVG.defs.attlist "INCLUDE" > <![%SVG.defs.attlist;[ <!ATTLIST %SVG.defs.qname; %SVG.Core.attrib; %SVG.Conditional.attrib; %SVG.Style.attrib; %SVG.Presentation.attrib; %SVG.GraphicalEvents.attrib; %SVG.External.attrib; transform %TransformList.datatype; #IMPLIED > |
ストリーミング環境においてUAの効率的な実行を促すためには、SVG内容作成者は参照元の要素の祖先要素の直接の子として 'defs' 要素を置き、その中にローカルURI参照により参照される子要素すべてを置くことが奨励される。例を挙げると:
To provide some SVG user agents with an opportunity to implement efficient implementations in streaming environments, creators of SVG content are encouraged to place all elements which are targets of local URI references within a 'defs' element which is a direct child of one of the ancestors of the referencing element. For example:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg"> <desc>祖先要素の 'defs' 子要素内におけるローカルURI参照。</desc> <defs> <linearGradient id="Gradient01"> <stop offset="20%" stop-color="#39F" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> </defs> <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#Gradient01)" /> <!-- 'rect' 要素でキャンバスの境界を表示 --> <rect x=".01cm" y=".01cm" width="7.98cm" height="2.98cm" fill="none" stroke="blue" stroke-width=".02cm" /> </svg>
上の文書では 'svg' 要素が線型グラデーションを含む 'defs' 要素を直接の子として持ち、かつ線型グラデーションを参照する 'rect' 要素の祖先に位置している。このように、上の文書は上記指針に沿っている。
In the document above, the linear gradient is defined within a 'defs' element which is the direct child of the 'svg' element, which in turn is an ancestor of the 'rect' element which references the linear gradient. Thus, the above document conforms to the guideline.
コンテナ要素 や グラフィックス要素 には個別に 'desc' 要素、またはテキストのみの説明を与える 'title' 要素、あるいはそれらの両方を指定することができる。SVG文書片が視覚メディアにSVGとして描画される場合、 'desc' と 'title' 要素はグラフィックの一部としては出力されない。しかしながら、例えばポインティング装置で触れると現れるツールチップとして 'title' 要素を表示させることもUAには可能である。視覚、聴覚両方について代替表現は可能であり、 'path' などのグラフィックス要素を表示するかわりに 'desc' および 'title' 要素を表現することは十分考えられる。このようなことは(場合によっては利用者の)スタイルシートを変更することで容易に実現できる。深い階層構造を持つような場合や、あるいは 'use' 要素の参照を辿るような場合を考えると、どこまで深く説明文を掘り下げるかの制御を利用者にゆだねた方が望ましい場面は多々ある。
Each container element or graphics element in an SVG drawing can supply a 'desc' and/or a 'title' description string where the description is text-only. When the current SVG document fragment is rendered as SVG on visual media, 'desc' and 'title' elements are not rendered as part of the graphics. User agents may, however, for example, display the 'title' element as a tooltip, as the pointing device moves over particular elements. Alternate presentations are possible, both visual and aural, which display the 'desc' and 'title' elements but do not display 'path' elements or other graphics elements. This is readily achieved by using a different (perhaps user) style sheet. For deep hierarchies, and for following 'use' element references, it is sometimes desirable to allow the user to control how deep they drill down into descriptive text.
<!ENTITY % SVG.desc.extra.content "" > <!ENTITY % SVG.desc.element "INCLUDE" > <![%SVG.desc.element;[ <!ENTITY % SVG.desc.content "( #PCDATA %SVG.desc.extra.content; )*" > <!ELEMENT %SVG.desc.qname; %SVG.desc.content; > <!-- end of SVG.desc.element -->]]> <!ENTITY % SVG.desc.attlist "INCLUDE" > <![%SVG.desc.attlist;[ <!ATTLIST %SVG.desc.qname; %SVG.Core.attrib; %SVG.Style.attrib; > |
<!ENTITY % SVG.title.extra.content "" > <!ENTITY % SVG.title.element "INCLUDE" > <![%SVG.title.element;[ <!ENTITY % SVG.title.content "( #PCDATA %SVG.title.extra.content; )*" > <!ELEMENT %SVG.title.qname; %SVG.title.content; > |
以下に例を挙げる。通常の処理ではUAは 'g' 要素内の 'desc' と 'title' 要素を除いた残りの部分のみを表示する。
The following is an example. In typical operation, the SVG user agent would not render the 'desc' and 'title' elements but would render the remaining contents of the 'g' element.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <g> <title> 地域別売上高 </title> <desc> これは地域別売上高を表す棒グラフである。 </desc> <!-- ベクターデータで定義される棒グラフ --> </g> </svg>
説明文とタイトル要素は他の名前空間でマークアップされたテキストを含めることができる:
Description and title elements can contain marked-up text from other namespaces. Here is an example:
<?xml version="1.0" standalone="yes"?> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc xmlns:mydoc="http://example.org/mydoc"> <mydoc:title>これは例示用SVGファイル</mydoc:title> <mydoc:para>全体的な説明で <mydoc:emph>mydoc</mydoc:emph> 名前空間 によるマークアップを利用。</mydoc:para> </desc> <g> <!-- 絵図はここに --> </g> </svg>
文書作成者は独立したSVG文書の 最も外側のsvg要素 に対し常に 'title' 要素を子要素として与えるべきである。 'svg' 要素の子要素としての 'title' 要素はSVG文書片の内容を確認することに役立つ。利用者はしばしば文脈の外から文書を参照するので、作者は文脈に則したタイトルを提供するべきである。「序文」といった文脈情報に乏しいタイトルより、「中世の養蜂業・序文」の様にタイトルをつけるべきである。 UAは 最も外側のsvg要素 に 'title' 子要素があれば、アクセシビリティに配慮して必ず利用者に示されるようにすべきである。このような仕組の実装はUA側に託されている(例えば、音声によるキャプション)。
Authors should always provide a 'title' child element to the outermost 'svg' element within a stand-alone SVG document. The 'title' child element to an 'svg' element serves the purposes of identifying the content of the given SVG document fragment. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as "Introduction", which doesn’t provide much contextual background, authors should supply a title such as "Introduction to Medieval Bee-Keeping" instead. For reasons of accessibility, user agents should always make the content of the 'title' child element to the outermost 'svg' element available to users. The mechanism for doing so depends on the user agent (e.g., as a caption, spoken).
多くのSVGの要素(特にコンテナ要素とテキスト要素)のDTD定義では 'desc' と 'title' 子要素の配置や数に制限を設けていない。この融通性はコンテナ要素に対する一貫性を持った内容モデルが開発されるまでの一時的な措置である。一部のコンテナ要素は混成内容を許容し、望まれる制約をXMLの混成内容の規則 [XML-MIXED] が受け入れてくれないからである。将来版のSVG言語の表現はDTDよりも表出的になり、より制約された混成内容規則を持てるようになるであろう。全ての要素に対し、高々1つの 'desc' と高々1つの 'title' を子要素として持ち、それらが( 'metadata' 要素と文字データを除く)他の全ての子要素より先に位置することが強く推奨される。UAは処理の際に複数の 'desc' や 'title' からの選択を迫られた場合、最初のものを選ぶべきである(例えばツールチップにどのテキストを用いるかなど)。
The DTD definitions of many of SVG's elements (particularly, container and text elements) place no restriction on the placement or number of the 'desc' and 'title' sub-elements. This flexibility is only present so that there will be a consistent content model for container elements, because some container elements in SVG allow for mixed content, and because the mixed content rules for XML [ XML-MIXED] do not permit the desired restrictions. Representations of future versions of the SVG language might use more expressive representations than DTDs which allow for more restrictive mixed content rules. It is strongly recommended that at most one 'desc' and at most one 'title' element appear as a child of any particular element, and that these elements appear before any other child elements (except possibly 'metadata' elements) or character data content. If user agents need to choose among multiple 'desc' or 'title' elements for processing (e.g., to decide which string to use for a tooltip), the user agent shall choose the first one.
'symbol' 要素はグラフィックのひな型オブジェクトを定義し、 'use' 要素によってインスタンス化される。
The 'symbol' element is used to define graphical template objects which can be instantiated by a 'use' element.
'symbol' 要素は、繰り返し用いられることにより文書に構造と意味内容を加えることに利用される。構造に富んだ文書はグラフィック, 読み上げ, あるいは点字による出力が可能になり アクセシビリティ が向上する。
The use of 'symbol' elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as braille, and thus promote accessibility.
'symbol' と 'g' の根本的な相違は:
The key distinctions between a 'symbol' and a 'g' are:
'marker'
要素と
'pattern'
要素は
'symbol'
要素と密接に関連する。
Closely related to the 'symbol' element are the
'marker' and
'pattern' elements.
<!ENTITY % SVG.symbol.extra.content "" > <!ENTITY % SVG.symbol.element "INCLUDE" > <![%SVG.symbol.element;[ <!ENTITY % SVG.symbol.content "( %SVG.Description.class; | %SVG.Animation.class; %SVG.Structure.class; %SVG.Conditional.class; %SVG.Image.class; %SVG.Style.class; %SVG.Shape.class; %SVG.Text.class; %SVG.Marker.class; %SVG.ColorProfile.class; %SVG.Gradient.class; %SVG.Pattern.class; %SVG.Clip.class; %SVG.Mask.class; %SVG.Filter.class; %SVG.Cursor.class; %SVG.Hyperlink.class; %SVG.View.class; %SVG.Script.class; %SVG.Font.class; %SVG.symbol.extra.content; )*" > <!ELEMENT %SVG.symbol.qname; %SVG.symbol.content; > |
'symbol' 要素は決して直接描画されることはなく、 'use' 要素からの参照以外に使い道はない。 'display' プロパティは 'symbol' 要素には適用されない。すなわち、 'symbol' 要素は 'display' プロパティの値が none 以外であっても直接描画されることはなく、 'symbol' 要素自身あるいは祖先において 'display' プロパティの値が none であっても参照による利用が可能である。
'symbol' elements are never rendered directly; their only usage is as something that can be referenced using the 'use' element. The 'display' property does not apply to the 'symbol' element; thus, 'symbol' elements are not directly rendered even if the 'display' property is set to a value other than none, and 'symbol' elements are available for referencing even when the 'display' property on the 'symbol' element or any of its ancestors is set to none.
どのような 'svg', 'symbol', 'g', 'use' 要素あるいは グラフィックス要素 であっても、それらは 'use' 要素によるひな型としての再利用(即ちインスタンス化)の対象になる。 'use' 要素は文書の与えられた場所において他の要素を参照し、そのグラフィック内容を取り込み、そして描画される。
Any 'svg', 'symbol', 'g', graphics element or other 'use' is potentially a template object that can be re-used (i.e., "instanced") in the SVG document via a 'use' element. The 'use' element references another element and indicates that the graphical contents of that element is included/drawn at that given point in the document.
'image' 要素とは異なり、 'use' 要素は文書全体を参照することはできない。
Unlike 'image', the 'use' element cannot reference entire files.
'use' 要素は省略可能な次の属性: x, y, width, height を持つ。これらは参照先の要素のグラフィック内容を現在の座標系の矩形領域に写像するために利用される。
The 'use' element has optional attributes x, y, width and height which are used to map the graphical contents of the referenced element onto a rectangular region within the current coordinate system.
'use' 要素による効果は、あたかも参照先の要素の内容がDOM木において - その 'use' 要素を親とする別個の非公開木として、かつ 'use' 要素の全ての祖先がその木の祖先になるように - 末端まで複製されたかのようにふるまう。複製されたDOM木は非公開なので、SVG文書オブジェクトモデル(DOM)においては 'use' 要素とその属性が存在するだけであり、参照先の要素の内容が 'use' 要素の子としては現れることはない。
The effect of a 'use' element is as if the contents of the referenced element were deeply cloned into a separate non-exposed DOM tree which had the 'use' element as its parent and all of the 'use' element's ancestors as its higher-level ancestors. Because the cloned DOM tree is non-exposed, the SVG Document Object Model (DOM) only contains the 'use' element and its attributes. The SVG DOM does not show the referenced element's contents as children of 'use' element.
CSSによるスタイル付け をサポートするUAにおいては、この概念的な非公開DOM木の中への参照先の要素とその子孫の末端までの複製は、CSSカスケード [CSS2-CASCADE] によりもたらされる参照先の要素とその内容の全てのプロパティの値の複製も意味する。CSS2セレクタの適用については、元の(即ち参照先の)要素については正式な文書構造の一部なので適用される一方、(概念的な)複製木については正式な文書構造の一部ではないので適用されない。
For user agents that support Styling with CSS, the conceptual deep cloning of the referenced element into a non-exposed DOM tree also copies any property values resulting from the CSS cascade [ CSS2-CASCADE] on the referenced element and its contents. CSS2 selectors can be applied to the original (i.e., referenced) elements because they are part of the formal document structure. CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.
しかしながら、プロパティ継承においては、参照先の要素がテキストそのままとして 'use' 要素下に末端の子孫まで複製されているものとみなされ、 'use' 要素とその祖先要素のプロパティを継承し、複製木内のインスタンス化された要素は参照先の要素の元々の親のプロパティを継承しない。
Property inheritance, however, works as if the referenced element had been textually included as a deeply cloned child of the 'use' element. The referenced element inherits properties from the 'use' element and the 'use' element's ancestors. An instance of a referenced element does not inherit properties from the referenced element's original parents.
もしイベント属性が参照先の要素にあてがわれている場合、そのイベントの実際の標的は「インスタンス化された木」内の対応する SVGElementInstance オブジェクトになる。
If event attributes are assigned to referenced elements, then the actual target for the event will be the SVGElementInstance object within the "instance tree" corresponding to the given referenced element.
非公開木におけるイベント処理は、 SVGElementInstance オブジェクトへ配送されることを除けば、あたかも参照先の要素がテキストのまま 'use' 要素下に末端の子孫まで複製されたかのように処理される。イベントの標的とcurrentTarget 属性は、参照先の部分木の中のイベントの標的に対応する SVGElementInstance と現在の標的要素に設定される。イベントは通常の木のごとく、木の非公開部分も公開部分も通って伝播する:最初はルート要素から 'use' 要素へ、そして非公開部分をイベントの標的まで辿り(捕獲過程 - capture phase)、標的でバブル化し、再び非公開部分を通って 'use' 要素へ、そして通常の木をルート要素まで浮上して行く(浮上過程 - bubbling phase)。
The event handling for the non-exposed tree works as if the referenced element had been textually included as a deeply cloned child of the 'use' element, except that events are dispatched to the SVGElementInstance objects. The event's target and currentTarget attributes are set to the SVGElementInstance that corresponds to the target and current target elements in the referenced subtree. An event propagates through the exposed and non-exposed portions of the tree in the same manner as it would in the regular document tree: first going from the root element to the 'use' element and then through non-exposed tree elements in the capture phase, followed by the target phase at the target of the event, then bubbling back through non-exposed tree to the use element and then back through regular tree to the root element in bubbling phase.
一つの要素に対応する全ての SVGElementInstance オブジェクトはイベントリスナのリストを共有する。どのオブジェクトがイベントリスナを呼び出したかはイベントの currentTarget 属性で知ることができる。
An element and all its corresponding SVGElementInstance objects share an event listener list. The currentTarget attribute of the event can be used to determine through which object an event listener was invoked.
'visibility' プロパティの振るまいはここでのプロパティ継承モデルに従う。したがって 'use' 要素で 'visibility:hidden' と指定されていたとしても参照先の内容が描画されなくなるわけではない。 'use' 要素が 'visibility:hidden' と指定されていて、参照先の要素が 'visibility:hidden' または 'visibility:inherit' と指定されているならばその要素は見えなくなる。しかしながら、参照先の要素がかわりに 'visibility:visible' と指定されていた場合、たとえ 'use' 要素で 'visibility:hidden' と指定されていたとしてもその要素は見えることになる。
The behavior of the 'visibility' property conforms to this model of property inheritance. Thus, specifying 'visibility:hidden' on a 'use' element does not guarantee that the referenced content will not be rendered. If the 'use' element specifies 'visibility:hidden' and the element it references specifies 'visibility:hidden' or 'visibility:inherit', then that one element will be hidden. However, if the referenced element instead specifies 'visibility:visible', then that element will be visible even if the 'use' element specifies 'visibility:hidden'.
参照先の要素におけるアニメーションはそのインスタンスでも有効である。
Animations on a referenced element will cause the instances to also be animated.
'use' 要素における視覚上の効果はあたかも 'use' 要素が以下のようにして生成される内容に置き換えられたかのようにふるまう (訳注:原文があまりにも冗長なので下の訳では再構成した) :
A 'use' element has the same visual effect as if the 'use' element were replaced by the following generated content:
CSSによるスタイル付け をサポートするUAにおいては、生成された 'g' 要素はCSSカスケード [CSS2-CASCADE] により「カスケードされた」 'use' 要素のプロパティ値を一緒に運ぶ。加えて、参照先のリソースのコピー(末端までの複製)はオリジナルの(つまり、参照先の)要素の「カスケードされた」プロパティ値も一緒に運ぶ。したがって class 属性および style 属性と組み合わせて用いられる様々なCSSセレクタによる効果は、実際上、生成された内容において「カスケードされた」プロパティ値を伝達する機能上同値な style 属性に置き換えらる。
For user agents that support Styling with CSS, the generated 'g' element carries along with it the "cascaded" property values on the 'use' element which result from the CSS cascade [ CSS2-CASCADE]. Additionally, the copy (deep clone) of the referenced resource carries along with it the "cascaded" property values resulting from the CSS cascade on the original (i.e., referenced) elements. Thus, the result of various CSS selectors in combination with the class and style attributes are, in effect, replaced by the functional equivalent of a style attribute in the generated content which conveys the "cascaded" property values.
Example Use01 に 'rect' を利用する単純な 'use' 要素を示す:
Example Use01 below has a simple 'use' on a 'rect'.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use01 - 'rect' を利用する単純な 'use'</desc> <defs> <rect id="MyRect" width="60" height="10"/> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use x="20" y="10" xlink:href="#MyRect" /> </svg>
![]() |
視覚効果においては次と同じである:
The visual effect would be equivalent to the following document:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use01-GeneratedContent - 'rect' を利用する単純な 'use'</desc> <!-- 'defs' 部は省略 --> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <!-- 'use' を置き換える生成内容はここから --> <g transform="translate(20,10)"> <rect width="60" height="10"/> </g> <!-- 生成内容はここまで --> </svg>
Example Use02 に 'symbol' を利用する 'use' 要素を示す:
Example Use02 below has a 'use' on a 'symbol'.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use02 - 'symbol' を利用する 'use'</desc> <defs> <symbol id="MySymbol" viewBox="0 0 20 20"> <desc>MySymbol - 格子状に並ぶ4矩形</desc> <rect x="1" y="1" width="8" height="8"/> <rect x="11" y="1" width="8" height="8"/> <rect x="1" y="11" width="8" height="8"/> <rect x="11" y="11" width="8" height="8"/> </symbol> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use x="45" y="10" width="10" height="10" xlink:href="#MySymbol" /> </svg>
![]() |
視覚効果においては次と同じである:
The visual effect would be equivalent to the following document:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use02-GeneratedContent - 'symbol' を利用する 'use'</desc> <!-- 'defs' 部は省略 --> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <!-- 'use' を置き換える生成内容はここから --> <g transform="translate(45, 10)" > <!-- ここからは参照先の 'symbol'。 'symbol' は x,y,width,height=0,0,100%,100% に設定された 'svg' に置き換わる--> <svg width="10" height="10" viewBox="0 0 20 20"> <rect x="1" y="1" width="8" height="8"/> <rect x="11" y="1" width="8" height="8"/> <rect x="1" y="11" width="8" height="8"/> <rect x="11" y="11" width="8" height="8"/> </svg> <!-- ここまでが参照先の 'symbol' --> </g> <!-- ここまでが生成内容 --> </svg>
Example Use03 に 'use' 要素が transform 属性を持つときどのような効果が生ずるかを示す:
Example Use03 illustrates what happens when a 'use' has a transform attribute.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>Example Use03 - 'transform' 属性を持つ 'use' </desc> <defs> <rect id="MyRect" x="0" y="0" width="60" height="10"/> </defs> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <use xlink:href="#MyRect" transform="translate(20,2.5) rotate(10)" /> </svg>
![]() |
視覚効果においては次と同じである:
The visual effect would be equivalent to the following document:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="10cm" height="3cm" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use03-GeneratedContent - 'transform' 属性を持つ 'use' </desc> <!-- 'defs' 部は省略 --> <rect x=".1" y=".1" width="99.8" height="29.8" fill="none" stroke="blue" stroke-width=".2" /> <!-- 'use' を置き換える生成内容はここから --> <g transform="translate(20,2.5) rotate(10)"> <rect x="0" y="0" width="60" height="10"/> </g> <!-- 生成内容はここまで --> </svg>
Example Use04 に 'use' 要素に対する種々のCSSによるスタイル付けの適用を示す:
Example Use04 illustrates a 'use' element with various methods of applying CSS styling.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="3cm" viewBox="0 0 1200 300" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example Use04 - 'use' に対するCSSによるスタイル付け</desc>
<defs style=" /* 規則 9 */ stroke-miterlimit: 10" >
<path id="MyPath" d="M300 50 L900 50 L900 250 L300 250"
class="MyPathClass"
style=" /* 規則 10 */ stroke-dasharray:300,100" />
</defs>
<style type="text/css">
<![CDATA[
/* 規則 1 */ #MyUse { fill: blue }
/* 規則 2 */ #MyPath { stroke: red }
/* 規則 3 */ use { fill-opacity: .5 }
/* 規則 4 */ path { stroke-opacity: .5 }
/* 規則 5 */ .MyUseClass { stroke-linecap: round }
/* 規則 6 */ .MyPathClass { stroke-linejoin: bevel }
/* 規則 7 */ use > path { shape-rendering: optimizeQuality }
/* 規則 8 */ g > path { visibility: hidden }
]]>
</style>
<rect x="0" y="0" width="1200" height="300"
style="fill:none; stroke:blue; stroke-width:3"/>
<g style=" /* 規則 11 */ stroke-width:40">
<use id="MyUse" xlink:href="#MyPath"
class="MyUseClass"
style="/* 規則 12 */ stroke-dashoffset:50" />
</g>
</svg>
![]() |
視覚効果においては下に挙げるものと同じである。スタイル規則のうち一部(規則 1-6, 規則 10-12)は生成内容に反映され、それ以外(規則 7-9)は反映されないことを確認されたい。生成内容に反映されない規則とは:
The visual effect would be equivalent to the following document. Observe that some of the style rules above apply to the generated content (i.e., rules 1-6, 10-12), whereas others do not (i.e., rules 7-9). The rules which do not affect the generated content are:
例証のための便宜上、下の生成内容では有効なセレクタを 'style' 属性としてインライン化している。
In the generated content below, the selectors that yield a match have been transferred into inline 'style' attributes for illustrative purposes.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="12cm" height="3cm" viewBox="0 0 1200 300" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example Use04-GeneratedContent - 'use' に対するCSSによるスタイル付け</desc> <!-- 'style' 部と 'defs' 部は省略 --> <rect x="0" y="0" width="1200" height="300" style="fill:none; stroke:blue; stroke-width:3"/> <g style="/* 規則 11 */ stroke-width:40"> <!-- 'use' を置き換える生成内容はここから --> <g style="/* 規則 1 */ fill:blue; /* 規則 3 */ fill-opacity:.5; /* 規則 5 */ stroke-linecap:round; /* 規則 12 */ stroke-dashoffset:50" > <path d="M300 50 L900 50 L900 250 L300 250" style="/* 規則 2 */ stroke:red; /* 規則 4 */ stroke-opacity:.5; /* 規則 6 */ stroke-linejoin: bevel; /* 規則 10 */ stroke-dasharray:300,100" /> </g> <!-- 生成内容はここまで --> </g> </svg>
'use' 要素が他の 'use' 要素もしくは 'use' 要素を内容に持つ他の要素を参照する場合、上で述べた末端までの複製処理は再帰的に行われる。しかしながら、参照による連鎖が直接的か間接的かを問わず循環した場合は、 参照と 'defs' 要素 で述べたようにエラーとみなされる。
When a 'use' references another element which is another 'use' or whose content contains a 'use' element, then the deep cloning approach described above is recursive. However, a set of references that directly or indirectly reference a element to create a circular dependency is an error, as described in References and the 'defs' element.
<!ENTITY % SVG.use.extra.content "" > <!ENTITY % SVG.use.element "INCLUDE" > <![%SVG.use.element;[ <!ENTITY % SVG.use.content "(( %SVG.Description.class; )*, ( %SVG.Animation.class; %SVG.use.extra.content; )*)" > <!ELEMENT %SVG.use.qname; %SVG.use.content; > <!-- end of SVG.use.element -->]]> <!ENTITY % SVG.use.attlist "INCLUDE" > <![%SVG.use.attlist;[ <!ATTLIST %SVG.use.qname; %SVG.Core.attrib; %SVG.Conditional.attrib; %SVG.Style.attrib; %SVG.Presentation.attrib; %SVG.GraphicalEvents.attrib; %SVG.XLinkEmbed.attrib; %SVG.External.attrib; x %Coordinate.datatype; #IMPLIED y %Coordinate.datatype; #IMPLIED width %Length.datatype; #IMPLIED height %Length.datatype; #IMPLIED transform %TransformList.datatype; #IMPLIED > |
属性定義:
Attribute definitions:
'image' 要素はファイルの完全な中身を現在の利用座標系の与えられた矩形領域に描画させることを指示する。 'image' 要素はPNGやJPEGなどのラスター画像のファイルあるいは、MIMEタイプが "image/svg+xml" のファイルを参照することができる。 適合SVGビューア は少なくともPNG, JPEG, SVG形式のファイルをサポートする必要がある。
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.
'image' 要素の処理結果は必ず4チャンネルRGBAである。 'image' 要素が3チャンネル(RGB)のみを持っているラスター画像のファイルを参照する場合はアルファ値が一様に1にされた4チャンネルRGBAに変換される。1チャンネルのみのラスター画像の場合は3つの色チャンネル(RGB)の値が元の1チャンネルの値から計算され、アルファチャンネルが一様に1にされた4チャンネルRGBAに変換される。
The result of processing an 'image' is always a four-channel RGBA result. When an 'image' element references a raster image file such as 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 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.
'image' 要素は新規のビューポートを 新しいビューポートの確立 で述べられるようにして確立する。ビューポートの境界は属性 x, y, width, height で指定される。参照先の画像の配置や伸縮率は 'image' 要素の preserveAspectRatio 属性で制御される。
An 'image' element establishes a new viewport for the referenced file as described in Establishing a new viewport. The bounds for the new viewport are defined by attributes x, y, width and height. The placement and scaling of the referenced image are controlled by the preserveAspectRatio attribute on the 'image' element.
'image' 要素がSVG画像を参照する場合、SVG画像のルート要素の preserveAspectRatio 属性, clip, overflow プロパティは無視される(x, y, width, height 属性が無視されるのと同じように)。そのかわり、参照する 'image' 要素の preserveAspectRatio 属性, clip, overflow プロパティが、SVG画像をどのようにビューポートにはめ込み、どのようにクリッピングするかしないかを決定する。
When an 'image' element references an SVG image the preserveAspectRatio attribute as well as the clip and overflow properties on the root element in the referenced SVG image are ignored (in the same manner as the x, y, width and height attributes are ignored). Instead, the preserveAspectRatio attribute on the referencing 'image' element defines how the SVG image content is fitted into the viewport and the clip and overflow properties on the 'image' element define how the SVG image content is clipped (or not) relative to the viewport.
preserveAspectRatio 属性を評価するときに利用される viewBox 属性の値は参照先の内容で定義される。明白な viewBox を持つ内容(例えば viewBox 属性が 最も外側のsvg要素 に指定されているSVGファイル)ならば、その値が利用される。ほとんどのラスター画像(PNG, JPEG)では画像の大きさが利用される(即ち 'image' 要素は暗黙の viewBox の値: "0, 0, ラスター画像の幅, ラスター画像の高さ" を持つ)。値が指定されていない場合(例えば viewBox 属性が 最も外側のsvg要素 に指定されていないSVGファイル) preserveAspectRatio 属性は無視され、ビューポートの x, y 属性による変換のみが内容の表示に用いられる。
The value of the ' viewBox' attribute to use when evaluating the preserveAspectRatio attribute is defined by the referenced content. For content that clearly identifies a viewBox (e.g. an SVG file with the ' viewBox' attribute on the outermost svg element) that value should be used. For most raster content (PNG, JPEG) the bounds of the image should be used (i.e. the 'image' element has an implicit 'viewBox' of "0 0 raster-image-width raster-image-height"). Where no value is readily available (e.g. an SVG file with no ' viewBox' attribute on the outermost 'svg' element) the preserveAspectRatio attribute is ignored, and only the translate due to the ' x' & ' y' attributes of the viewport is used to display the content.
例えば image 要素がPNGやJPEGを参照し、
preserveAspectRatio="xMinYMin meet"
と指定されているならば、ラスターにおける縦横比は保たれる(画像の座標系から現在の利用座標系へのX軸方向とY軸方向の伸縮率は等しくなる)。ラスターは
'image'
要素の属性
x,
y,
width,
height
で定まるビューポートに収まる範囲内まで可能な限り大きくされ、ラスターの左上端はビューポートの左上端に合わせられる。もし
preserveAspectRatio
の値が 'none'であれば画像の縦横比は維持されない。画像はラスターの左上端が座標
(x,
y)
に、ラスターの右下端が座標
(x +
width,
y +
height)
に正確に揃うようにはめ込まれる。
'image'
要素に参照されるリソースは独自の走査解読木と(リソースがXMLならば)文書オブジェクトモデルを持った別個の文書を表現する。したがってその画像へのプロパティ継承は無い。
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 fitted 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).
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.
'use' 要素とは異なり、 'image' 要素はSVGファイル内の要素を参照することはできない。
Unlike 'use', the 'image' element cannot reference elements within an SVG file.
<!ENTITY % SVG.Image.extra.class "" > <!ENTITY % SVG.Image.class "| %SVG.image.qname; %SVG.Image.extra.class;" > <!-- image: Image Element .............................. --> <!ENTITY % SVG.image.extra.content "" > <!ENTITY % SVG.image.element "INCLUDE" > <![%SVG.image.element;[ <!ENTITY % SVG.image.content "(( %SVG.Description.class; )*, ( %SVG.Animation.class; %SVG.image.extra.content; )*)" > <!ELEMENT %SVG.image.qname; %SVG.image.content; > <!-- end of SVG.image.element -->]]> <!ENTITY % SVG.image.attlist "INCLUDE" > <![%SVG.image.attlist;[ <!ATTLIST %SVG.image.qname; %SVG.Core.attrib; %SVG.Conditional.attrib; %SVG.Style.attrib; %SVG.Viewport.attrib; %SVG.Color.attrib; %SVG.Opacity.attrib; %SVG.Graphics.attrib; %SVG.ColorProfile.attrib; %SVG.Clip.attrib; %SVG.Mask.attrib; %SVG.Filter.attrib; %SVG.GraphicalEvents.attrib; %SVG.Cursor.attrib; %SVG.XLinkEmbed.attrib; %SVG.External.attrib; x %Coordinate.datatype; #IMPLIED y %Coordinate.datatype; #IMPLIED width %Length.datatype; #REQUIRED height %Length.datatype; #REQUIRED preserveAspectRatio %PreserveAspectRatioSpec.datatype; 'xMidYMid meet' transform %TransformList.datatype; #IMPLIED > |
属性定義:
Attribute definitions:
例:
An example:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <desc>このグラフィックは外部の画像へリンクする </desc> <image x="200" y="200" width="100px" height="100px" xlink:href="myimage.png"> <title>My image</title> </image> </svg>
SVGの 'switch' 要素は requiredFeatures, requiredExtensions, systemLanguage 属性を用いてUAの能力や利用者の言語環境に応じて代替表示をさせるための機能を提供する。
SVG contains a 'switch' element along with attributes requiredFeatures, requiredExtensions and systemLanguage to provide an ability to specify alternate viewing depending on the capabilities of a given user agent or the user's language.
<!ENTITY % SVG.Conditional.extra.attrib "" > <!ENTITY % SVG.Conditional.attrib "requiredFeatures %FeatureList.datatype; #IMPLIED requiredExtensions %ExtensionList.datatype; #IMPLIED systemLanguage %LanguageCodes.datatype; #IMPLIED %SVG.Conditional.extra.attrib;" > |
requiredFeatures, requiredExtensions, systemLanguage 属性は一種のテストのようなものであり、真または偽の値を返す。 'switch' 要素はその子要素のうちこれらの属性に対する評価が全て真であるような最初の子要素のみを描画する。これらの属性のうち与えられていないものがあれば、その属性についての評価は真であるものとみなされる。
Attributes requiredFeatures, requiredExtensions and systemLanguage act as tests and return either true or false results. The 'switch' renders the first of its children for which all of these attributes test true. If the given attribute is not specified, then a true value is assumed.
'display'プロパティと同様、これらの条件付き処理属性は要素の直接的描画にのみ影響し、( 'use' 要素などによる)要素から要素への参照には関与しない。
Similar to the 'display' property, conditional processing attributes only affect the direct rendering of elements and do not prevent elements from being successfully referenced by other elements (such as via a 'use').
ゆえに:
In consequence:
'switch' 要素はその直接の子要素に対し requiredFeatures, requiredExtensions, systemLanguage 属性を順に評価していき、最初に真となった子要素だけを描画する。他の要素は無視され、描画されない。子要素が 'g' であったとしても部分木全体が処理されるか無視される、言い換えれば描画されるかされないかのどちらかである。
The 'switch' element evaluates the requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then processes and renders the first child for which these attributes evaluate to true. All others will be bypassed and therefore not rendered. If the child element is a container element such as a 'g', then the entire subtree is either processed/rendered or bypassed/not rendered.
注意: 'display', 'visibility' プロパティの値は 'switch' 要素の処理には影響しない。特に、 'switch' 要素の子の 'display' を none に設定しても 'switch' 要素による真偽テストには無関係である。
Note that the values of properties 'display' and 'visibility' have no effect on 'switch' element processing. In particular, setting 'display' to none on a child of a 'switch' element has no effect on true/false testing associated with 'switch' element processing.
<!ENTITY % SVG.switch.extra.content "" > <!ENTITY % SVG.switch.element "INCLUDE" > <![%SVG.switch.element;[ <!ENTITY % SVG.switch.content "(( %SVG.Description.class; )*, ( %SVG.svg.qname; | %SVG.g.qname; | %SVG.use.qname; | %SVG.text.qname; | %SVG.Animation.class; %SVG.Conditional.class; %SVG.Image.class; %SVG.Shape.class; %SVG.Hyperlink.class; %SVG.Extensibility.class; %SVG.switch.extra.content; )*)" > <!ELEMENT %SVG.switch.qname; %SVG.switch.content; > <!-- end of SVG.switch.element -->]]> <!ENTITY % SVG.switch.attlist "INCLUDE" > <![%SVG.switch.attlist;[ <!ATTLIST %SVG.switch.qname; %SVG.Core.attrib; %SVG.Conditional.attrib; %SVG.Style.attrib; %SVG.Presentation.attrib; %SVG.GraphicalEvents.attrib; %SVG.External.attrib; transform %TransformList.datatype; #IMPLIED > |
この例についての詳細は 外部の型のオブジェクトの埋め込み を見よ。
For more information and an example, see Embedding foreign object types.
requiredFeatures の定義:
Definition of requiredFeatures:
この属性が与えられていないときは暗黙に真と評価される。この属性に null 文字列または空文字列が指定された場合、偽と評価される。
If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute requiredFeatures, the attribute returns "false".
requiredFeatures は通常 'switch' 要素と伴に用いられる。 requiredFeatures が他の局面で用いられた場合、その要素を描画するか/しないかの単純なスイッチとなる。
requiredFeatures is often used in conjunction with the 'switch' element. If the requiredFeatures is used in other situations, then it represents a simple switch on the given element whether to render the element or not.
requiredExtensions 属性は必要な言語拡張のリストを指定する。言語拡張はこの仕様で定められている特色機能の範囲外であり、UAの機能の範疇である。個々の言語拡張は URI参照 で指定される。
The requiredExtensions attribute defines a list of required language extensions. Language extensions are capabilities within a user agent that go beyond the feature set defined in this specification. Each extension is identified by a URI reference.
requiredExtensionsの定義:
Definition of requiredExtensions:
与えられた URI参照 が空白を含む場合、エスケープされなければならない。
If a given URI reference contains white space within itself, that white space must be escaped.
この属性が与えられていないときは暗黙に真と評価される。この属性に null 文字列または空文字列が指定された場合、偽と評価される。
If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute requiredExtensions, the attribute returns "false".
requiredExtensions は通常 'switch' 要素と伴に用いられる。 requiredExtensions が他の局面で用いられた場合、その要素を描画するか/しないかの単純なスイッチとなる。
requiredExtensions is often used in conjunction with the 'switch' element. If the requiredExtensions is used in other situations, then it represents a simple switch on the given element whether to render the element or not.
拡張のURI名はスクリプトの書き手が異なるバージョンを区別できるよう
"http://example.org/SVGExtensionXYZ/1.0"
などのようにバージョン情報を含めるべきである。
The URI names for the extension should include versioning information, such as "http://example.org/SVGExtensionXYZ/1.0", so that script writers can distinguish between different versions of a given extension.
この属性の値は [RFC3066] で定義された言語名のコンマ区切りのリストである。
The attribute value is a comma-separated list of language names as defined in [ RFC3066].
利用者の環境で設定されている言語の一つが、この属性で指定された言語(の文字列)、あるいはその接頭辞(接頭辞に続く最初のタグ区切り文字が "-")に完全に一致すれば真と評価される。
Evaluates to "true" if one of the languages indicated by user preferences exactly equals one of the languages given in the value of this parameter, or if one of the languages indicated by user preferences exactly equals a prefix of one of the languages given in the value of this parameter such that the first tag character following the prefix is "-".
他の場合は偽と評価される。
Evaluates to "false" otherwise.
注意:この一致規則の利用が、利用者がなんらかのタグの言語を理解するならば、そのタグを接頭子とするすべてのタグの言語についても理解できることが成立するものとして、言語へ言語タグが割り当てられていることを導くわけではない。
Note: This use of a prefix matching rule does not imply that language tags are assigned to languages in such a way that it is always true that if a user understands a language with a certain tag, then this user will also understand all languages with tags for which this tag is a prefix.
この接頭子一致規則は単純にこのような使われ方を許容するものである。
The prefix rule simply allows the use of prefix tags if this is the case.
実装における注意:言語について利用者の嗜好による設定を可能にする場合、実装者は「利用者が上記の言語一致規則の詳細について知らない」ということを念頭に置いて、適切なガイドを提供すべきである。例えば、利用者は「 "en-gb" を選択しておけば全ての英語文書は英国英語でなくとも利用できる」と考えるかもしれない。言語設定のユーザーインターフェースでは「最良の言語一致のためには("en-gb" に加えて)"en" も追加すべきである」ということを示唆してやるべきである。
Implementation note: When making the choice of linguistic preference available to the user, implementers should take into account the fact that users are not familiar with the details of language matching as described above, and should provide appropriate guidance. As an example, users may assume that on selecting "en-gb", they will be served any kind of English document if British English is not available. The user interface for setting user preferences should guide the user to add "en" to get the best matching behavior.
複数人による同時視聴を意図した内容のために複数の言語を含めてもよい。例えば、オリジナルのマオリ語に加えて同時に英語も表現できる内容は次のように書かれるであろう:
Multiple languages MAY be listed for content that is intended for multiple audiences. For example, content that is presented simultaneously in the original Maori and English versions, would call for:
<text systemLanguage="mi, en"><!-- content
goes here --></text>
しかしながら、systemLanguageテスト属性の付いたオブジェクトに複数の言語が用意されているからといって、複数の言語の視聴者に向けたものであるとは限らない。例えば「英語第一講」といった日本語読者向けであることが明白な初心者向けの言語入門など。このような場合、systemLanguageテスト属性は "ja" のみを含むべきである。
However, just because multiple languages are present within the object on which the systemLanguage test attribute is placed, this does not mean that it is intended for multiple linguistic audiences. An example would be a beginner's language primer, such as "A First Lesson in Latin," which is clearly intended to be used by an English-literate audience. In this case, the systemLanguage test attribute should only include "en".
文書作成者への注意:文書作成者は 'switch' 要素に含まれている複数の代替言語のオブジェクトがどれも表示されない可能性を考慮に入れておくべきである。したがって 'switch' 要素の最後に、いかなる場合でも受け入れられる「万能選手」を含めることが推奨される。
Authoring note: Authors should realize that if several alternative language objects are enclosed in a 'switch', and none of them matches, this may lead to situations where no content is displayed. It is thus recommended to include a "catch-all" choice at the end of such a 'switch' which is acceptable in all cases.
systemLanguage 属性では、 アニメーション:不可
For the systemLanguage attribute: Animatable: no.
この属性が与えられていないときは暗黙に真と評価される。この属性に null 文字列または空文字列が指定された場合、偽と評価される。
If the attribute is not present, then its implicit return value is "true". If a null string or empty string value is given to attribute systemLanguage, the attribute returns "false".
systemLanguage は通常 'switch' 要素と伴に用いられる。 systemLanguage が他の局面で用いられた場合、その要素を描画するか/しないかの単純なスイッチとなる。
systemLanguage is often used in conjunction with the 'switch' element. If the systemLanguage is used in other situations, then it represents a simple switch on the given element whether to render the element or not.
直接的に描画されない要素に対するテスト属性の適用性を以下に列挙する。
The following list describes the applicability of the test attributes to the elements that do not directly produce rendering.
文書はしばしば他のファイル(他のウェブリソース)を参照して描画の一部として利用する。文書作成者にとっては、他のリソースの存在が文書の正当性に欠かせないかどうかを指定できることが望ましい。
Documents often reference and use the contents of other files (and other Web resources) as part of their rendering. In some cases, authors want to specify that particular resources are required for a document to be considered correct.
externalResourcesRequired 属性は全てのコンテナ要素と、他の外部リソースを含む、あるいは含むことが予想される要素に利用できる。参照先の外部リソースが、与えられたコンテナ要素/グラフィックス要素の正当な描画に欠かせないかどうかをこの属性で指定できる。
Attribute externalResourcesRequired is available on all container elements and to all elements which potentially can reference external resources. It specifies whether referenced resources that are not part of the current document are required for proper rendering of the given container element or graphics element.
属性定義:
Attribute definition:
この属性は、スタイルシート, カラープロファイル( カラープロファイル記述 を見よ), 'font-face' 要素による URI参照 で指定されるフォント, CSS @font-face で指定されるフォントを含む、全ての種類のリソース参照に適用できる。特に externalResourcesRequired="true" と設定された要素が存在する場合、全てのスタイルシートが利用可能でなければならない。なぜなら、どのスタイルシートも要素の描画に影響し得るからである。
This attribute applies to all types of resource references, including style sheets, color profiles (see Color profile descriptions) and fonts specified by a URI reference using a 'font-face' element or a CSS @font-face specification. In particular, if an element sets externalResourcesRequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element.
externalResourcesRequired 属性は(属性値の継承の意味で)継承できないが、コンテナ要素に使用された場合は含まれる全ての要素に適用される。
Attribute externalResourcesRequired is not inheritable (from a sense of attribute value inheritance), but if set on a container element, its value will apply to all elements within the container.
コンテナ要素で externalResourcesRequired="true" を指定すると、コンテナの内容の漸進的な表示が無効になる。 ( エラータ :コンテナが外部リソースを参照する要素を含む限りにおいて。) SVG内容を生成するツール類は、 最も外側のsvg要素 に無分別に externalResourcesRequired="true" を指定するようなことをできるだけ避けるべきであり、外部リソースの存在が描画の正しさに特に欠かせないような特定のグラフィックス要素やコンテナ要素に対してのみ、 externalResourcesRequired="true" を指定する方が良い。
Because setting externalResourcesRequired="true" on a container element can have the effect of disabling progressive display of the contents of that container, tools that generate SVG content are cautioned against using simply setting externalResourcesRequired="true" on the outermost 'svg' element on a universal basis. Instead, it is better to specify externalResourcesRequired="true" on those particular graphics elements or container elements which specify need the availability of external resources in order to render properly.
externalResourcesRequired では、 アニメーション:不可
For externalResourcesRequired: Animatable: no.
id と xml:base 属性は全てのSVG要素で利用できる:
The id and xml:base attributes are available on all SVG elements:
属性定義:
Attribute definitions:
文字データ内容を含み得る要素は xml:lang 属性と xml:space 属性を持つことができる:
Elements that might contain character data content have attributes xml:lang and xml:space:
<!ENTITY % SVG.id.attrib "id ID #IMPLIED" > <!ENTITY % SVG.base.attrib "xml:base %URI.datatype; #IMPLIED" > <!ENTITY % SVG.lang.attrib "xml:lang %LanguageCode.datatype; #IMPLIED" > <!ENTITY % SVG.space.attrib "xml:space ( default | preserve ) #IMPLIED" > <!ENTITY % SVG.Core.extra.attrib "" > <!ENTITY % SVG.Core.attrib "%SVG.id.attrib; %SVG.base.attrib; %SVG.lang.attrib; %SVG.space.attrib; %SVG.Core.extra.attrib;" > |
属性定義:
Attribute definitions:
Core 属性モジュールは全ての要素に付加できる中核的な属性の集合 Core.attrib を定義する。
| コレクション名 | コレクションに含まれる属性 |
|---|---|
| Core.attrib | id, xml:base, xml:lang, xml:space |
| 要素 | 属性 | 内容モデル |
|---|---|---|
| svg | Core.attrib, Conditional.attrib, Style.attrib, x, y, width, height, viewBox, preserveAspectRatio, zoomAndPan, version, baseProfile, contentScriptType, contentStyleType, External.attrib, Presentation.attrib, GraphicalEvents.attrib, DocumentEvents.attrib | (Description.class | Structure.class | Shape.class | Image.class | View.class | Conditional.class | Hyperlink.class | Text.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | Animation.class | ColorProfile.class)* |
| g | Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform | (Description.class | Structure.class | Shape.class | Image.class | View.class | Conditional.class | Hyperlink.class | Text.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | Animation.class | ColorProfile.class)* |
| defs | Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform | (Description.class | Structure.class | Shape.class | Image.class | View.class | Conditional.class | Hyperlink.class | Text.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | Animation.class | ColorProfile.class)* |
| desc | Core.attrib, Style.attrib | (PCDATA)* |
| title | Core.attrib, Style.attrib | (PCDATA)* |
| metadata | Core.attrib | (PCDATA)* |
| symbol | Core.attrib, Style.attrib, External.attrib, viewBox, preserveAspectRatio, Presentation.attrib, GraphicsElementEventAttrs | (Description.class | Structure.class | Shape.class | Image.class | View.class | Conditional.class | Hyperlink.class | Text.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | Animation.class | ColorProfile.class)* |
| use | Core.attrib, Style.attrib, Conditional.attrib, transform, x, y, width, height, XLinkEmbed.attrib, Presentation.attrib, GraphicsElementEventAttrs | (Description.class | Animation.class)* |
| 要素 | 属性 | 内容モデル |
|---|---|---|
| svg | Core.attrib, Conditional.attrib, Style.attrib, x, y, width, height, viewBox, preserveAspectRatio, zoomAndPan, version, baseProfile, External.attrib, Presentation.attrib, GraphicalEvents.attrib, DocumentEvents.attrib | (Description.class | Structure.class | Shape.class | Image.class | View.class | Conditional.class | Hyperlink.class | Text.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | Animation.class | ColorProfile.class)* |
| g | Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform | (Description.class | Structure.class | Shape.class | Image.class | View.class | Conditional.class | Hyperlink.class | Text.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | Animation.class | ColorProfile.class)* |
| defs | Core.attrib, Conditional.attrib, Style.attrib, External.attrib, Presentation.attrib, GraphicalEvents.attrib, transform | (Description.class | Structure.class | Shape.class | Image.class | View.class | Conditional.class | Hyperlink.class | Text.class | Script.class | Style.class | Marker.class | Clip.class | Mask.class | Gradient.class | Pattern.class | Filter.class | Cursor.class | Font.class | Animation.class | ColorProfile.class)* |
| desc | Core.attrib, Style.attrib | (PCDATA)* |
| title | Core.attrib, Style.attrib | (PCDATA)* |
| metadata | Core.attrib | (PCDATA)* |
| use | Core.attrib, Style.attrib, Conditional.attrib, transform, x, y, width, height, XLinkEmbed.attrib, Presentation.attrib, GraphicsElementEventAttrs | (Description.class | Animation.class)* |
Container 属性モジュールは Container.attrib 属性セットを定義する。
| コレクション名 | コレクションに含まれる属性 |
|---|---|
| Container.attrib | enable-background |
| 要素 | 属性 | 内容モデル |
|---|---|---|
| switch | Core.attrib, Conditional.attrib, External.attrib, Style.attrib, transform, Presentation.attrib, GraphicalEvents.attrib | (Description.class | Shape.class | Text.class | Structure.class | Image.class | Hyperlink.class | Extensibility.class | Animation.class)* |
Conditional Processing モジュールは Conditional.class 内容セットを定義する。
| 内容セット名 | 内容セットに含まれる要素 |
|---|---|
| Conditional.class | switch |
Conditional Processing モジュールは Conditional.attrib 属性セットを定義する。
| コレクション名 | コレクションに含まれる属性 |
|---|---|
| Conditional.attrib | requiredFeatures, requiredExtensions, systemLanguage |
| 要素 | 属性 | 内容モデル |
|---|---|---|
| image | Core.attrib, XLinkEmbed.attrib, Conditional.attrib, Style.attrib, External.attrib, GraphicalEvents.attrib, preserveAspectRatio, Paint.attrib, Opacity.attrib, Graphics.attrib, Cursor.attrib, Filter.attrib, Mask.attrib, GraphicalEvents.attrib, Clip.attrib, Profile.attrib, Viewport.attrib, transform, x, y, width, height | (Description.class | Animation.class)* |
次に挙げるインターフェースが以下で定義される: SVGDocument, SVGSVGElement, SVGGElement, SVGDefsElement, SVGDescElement, SVGTitleElement, SVGSymbolElement, SVGUseElement, SVGElementInstance, SVGElementInstanceList, SVGImageElement, SVGSwitchElement, GetSVGDocument
'svg' 要素がXHTML文書 [XHTML] などの他の名前空間の文書の部品としてインラインに埋め込まれている場合、 SVGDocument オブジェクトは存在せず、そのかわりに文書オブジェクト階層におけるルートオブジェクトは HTMLDocument オブジェクトなどの異なる型の文書オブジェクトになる。
一方で、独立SVGファイル(即ち MIMEタイプ "image/svg+xml" のファイル)を表示しているときの様に、XML文書階層におけるルート要素が 'svg' 要素である場合は SVGDocument オブジェクトが実際に存在する。この場合、 SVGDocument オブジェクトは文書オブジェクトモデル階層のルートオブジェクトになる。
XHTML文書が 'object' 要素を持ち、その href 属性がSVG文書(即ち MIMEタイプ "image/svg+xml" のファイルであり、したがってそのルート要素が 'svg' 要素)を参照しているときの様に、SVG文書が参照により埋め込まれている場合は2つの別々のDOM階層が存在することになる。一つは参照している文書のもの(例えばXHTML文書)であり、もう一つは参照先のSVG文書のものになる。後者におけるルートオブジェクトは SVGDocument オブジェクトである。
SVGDocument インターフェースは、 [DOM1] 仕様の 文書オブジェクトモデル(HTML)レベル1 で述べられている HTMLDocument インターフェースと類似した属性とメソッドのリストを含んでいる。
interface SVGDocument :
Document,
events::DocumentEvent {
readonly attribute DOMString title;
readonly attribute DOMString referrer;
readonly attribute DOMString domain;
readonly attribute DOMString URL;
readonly attribute SVGSVGElement rootElement;
};
SVGSVGElement インターフェースは 'svg' 要素に対応する基本的なインターフェースである。このインターフェースは、行列演算や視覚描画装置における再描画の時間的制御能力など、有用であり多方面で共通して利用される様々なメソッドを含む。
SVGSVGElement は ViewCSS と DocumentCSS を拡張し、プロパティの計算値へのアクセスとDOM2で述べられているスタイルシートの上書きを提供する。
interface SVGSVGElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGLocatable,
SVGFitToViewBox,
SVGZoomAndPan,
events::EventTarget,
events::DocumentEvent,
css::ViewCSS,
css::DocumentCSS {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
attribute DOMString contentScriptType;
// raises DOMException on setting
attribute DOMString contentStyleType;
// raises DOMException on setting
readonly attribute SVGRect viewport;
readonly attribute float pixelUnitToMillimeterX;
readonly attribute float pixelUnitToMillimeterY;
readonly attribute float screenPixelToMillimeterX;
readonly attribute float screenPixelToMillimeterY;
attribute boolean useCurrentView;
// raises DOMException on setting
readonly attribute SVGViewSpec currentView;
attribute float currentScale;
// raises DOMException on setting
readonly attribute SVGPoint currentTranslate;
unsigned long suspendRedraw ( in unsigned long max_wait_milliseconds );
void unsuspendRedraw ( in unsigned long suspend_handle_id )
raises( DOMException );
void unsuspendRedrawAll ( );
void forceRedraw ( );
void pauseAnimations ( );
void unpauseAnimations ( );
boolean animationsPaused ( );
float getCurrentTime ( );
void setCurrentTime ( in float seconds );
NodeList getIntersectionList ( in SVGRect rect, in SVGElement referenceElement );
NodeList getEnclosureList ( in SVGRect rect, in SVGElement referenceElement );
StaticNodeList getIntersectionList ( in SVGRect rect, in SVGElement referenceElement );
StaticNodeList getEnclosureList ( in SVGRect rect, in SVGElement referenceElement );
boolean checkIntersection ( in SVGElement element, in SVGRect rect );
boolean checkEnclosure ( in SVGElement element, in SVGRect rect );
void deselectAll ( );
SVGNumber createSVGNumber ( );
SVGLength createSVGLength ( );
SVGAngle createSVGAngle ( );
SVGPoint createSVGPoint ( );
SVGMatrix createSVGMatrix ( );
SVGRect createSVGRect ( );
SVGTransform createSVGTransform ( );
SVGTransform createSVGTransformFromMatrix ( in SVGMatrix matrix );
Element getElementById ( in DOMString elementId );
};
typedef StaticNodeList NodeList;
StaticNodeList は、その名が示すとおり、静的であり、活性状態ではないことを除いて [DOM2] で定義される NodeList と全く同じである様に実装しなければならない。
| DOMException |
NO_MODIFICATION_ALLOWED_ERR:読み出し専用の属性値の変更を試みたときにレイズされる。
|
| DOMException |
NO_MODIFICATION_ALLOWED_ERR:読み出し専用の属性値の変更を試みたときにレイズされる。
|
この 'svg' 要素に対応する(暗黙または明示的な)ビューポートの位置と大きさ。UAが実際に内容を描画しているときの位置と大きさを表現する。位置と大きさは親要素の座標系における単位無しの値を表す。親要素が存在しない(即ち 'svg' 要素が文書木のルート)場合、このSVG文書が他の文書の一部として埋め込まれているならば(例えばHTMLの 'object' 要素により)、親の文書の座標系における単位無しの値を表す(もし親がCSSまたはXSLによるレイアウトを利用している場合は、単位無しの値はCSS2仕様で述べられるように現在のCSSまたはXSLビューポートの画素単位による値を表現する)。親要素が座標系を持たない場合、UAはこの属性に対し適切な既定値を与えるべきである。
オブジェクト自身とその内容は共に読み出し専用である。
| DOMException |
NO_MODIFICATION_ALLOWED_ERR:読み出し専用の属性値の変更を試みたときにレイズされる。
|
オブジェクト自身とその内容は共に読み出し専用である。
| DOMException |
NO_MODIFICATION_ALLOWED_ERR:読み出し専用の属性値の変更を試みたときにレイズされる。
|
| in unsigned long max_wait_milliseconds | 装置への再描画を止める時間の長さをミリ秒で指定する。60秒以上の値は60秒に抑えられる。 |
| unsigned long | suspendRedraw() 呼び出しに対する一意的なIDとして働く数。この値は対応する unsuspendRedraw() 呼び出しに渡されなければならない。 |
| in unsigned long suspend_handle_id | 取り消したい suspendRedraw() 呼び出しに対応するID。この値は前の suspendRedraw() 呼び出しで返された数でなければならない。 |
| DOMException |
NOT_FOUND_ERR:無効な
suspend_handle_id
(即ち対応する休止状態を維持している
suspendRedraw()
が無い)が与えられた場合にレイズされる。
|
| boolean | このSVG文書片が休止状態かどうかを表す真偽値。 |
| float | 現在の時刻(秒)。 |
| in float seconds | 新しく設定する現在の時刻を現在のSVG文書片の開始時間からの秒数で与える。 |
| in SVGRect rect | テストする矩形。値は現在の 'svg' 要素の初期座標系におけるもの。 | |
| in SVGElement referenceElement | null でないならば、描画順序において与えられた要素より下位にある要素のみが返される。 |
| NodeList | 描画内容が与えられた矩形と交わる要素のリスト。( エラータ :戻り値の型は StaticNodeList に変更) |
| in SVGRect rect | テストする矩形。値は現在の 'svg' 要素の初期座標系におけるもの。 | |
| in SVGElement referenceElement | null でないならば、描画順序において与えられた要素より下位にある要素のみが返される。 |
| NodeList | 描画内容が与えられた矩形に完全に囲まれる要素のリスト。 ( エラータ :戻り値の型は StaticNodeList に変更) |
| in SVGElement element | テストされる要素。 | |
| in SVGRect rect | テストする矩形。値は現在の 'svg' 要素の初期座標系におけるもの。 |
| boolean | 与えられた要素が与えられた矩形と交わるかどうかを表す真偽値。 |
| in SVGElement element | テストされる要素。 | |
| in SVGRect rect | テストする矩形。値は現在の 'svg' 要素の初期座標系におけるもの。 |
| boolean | 与えられた要素が与えられた矩形に完全に囲まれるかどうかを表す真偽値。 |
| SVGNumber | SVGNumber オブジェクト。 |
| SVGLength | SVGLength オブジェクト。 |
| SVGAngle | SVGAngle オブジェクト。 |
| SVGPoint | SVGPoint オブジェクト。 |
| SVGMatrix | SVGMatrix オブジェクト。 |
| SVGRect | SVGRect オブジェクト。 |
| SVGTransform | SVGTransform オブジェクト。 |
| in SVGMatrix matrix | 変換行列。 |
| SVGTransform | SVGTransform オブジェクト。 |
| in DOMString elementId | 要素に対し一意的な id の値。 |
| Element | 合致した要素。 |
SVGGElement インターフェースは 'g' 要素に対応する。
interface SVGGElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {};
SVGDefsElement インターフェースは 'defs' 要素に対応する。
interface SVGDefsElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {};
SVGDescElement インターフェースは 'desc' 要素に対応する。
interface SVGDescElement :
SVGElement,
SVGLangSpace,
SVGStylable {};
SVGTitleElement インターフェースは 'title' 要素に対応する。
interface SVGTitleElement :
SVGElement,
SVGLangSpace,
SVGStylable {};
SVGSymbolElement インターフェースは 'symbol' 要素に対応する。
interface SVGSymbolElement :
SVGElement,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGFitToViewBox,
events::EventTarget {};
SVGUseElement インターフェースは 'use' 要素に対応する。
interface SVGUseElement :
SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGElementInstance instanceRoot;
readonly attribute SVGElementInstance animatedInstanceRoot;
};
各 'use' 要素に対し、SVG DOMは SVGElementInstance 型のオブジェクトからなる非公開木(「インスタンス木」)を維持管理する。 SVGElementInstance は、インスタンス木における一つのノードを表現する。 'use' 要素に対応する SVGUseElement オブジェクトの instanceRoot 属性がインスタンス木のルートオブジェクトを指す。
'use' 要素が 'rect' などの単純なグラフィックス要素を参照する場合、ただ一つの SVGElementInstance オブジェクトが存在し、この SVGElementInstance オブジェクトの correspondingElement 属性は参照先の 'rect' 要素に対応する SVGRectElement である。
'use' 要素が2つの 'rect' 要素を含む 'g' 要素を参照している場合、インスタンス木には3つの SVGElementInstance オブジェクト: correspondingElement が 'g' に対する SVGGElement オブジェクトになっているルートの SVGElementInstance オブジェクト、および correspondingElement が SVGRectElement オブジェクトになっている2つの SVGElementInstance 子オブジェクトが存在する。
参照先のオブジェクト自身が 'use' 要素であるか、あるいは参照先のオブジェクト内に 'use' 子要素がある場合、インスタンス木は完全な木を形成するために間接参照により再帰的に拡張される。例えば、 'use' 要素が 'g' を参照し、 'g' 要素自身が 'use' を含み、その 'use' が 'rect' 要素を参照している場合、最初の(最も外側の) 'use' のインスタンス木は次のような SVGElementInstance オブジェクトの階層から構成される:
SVGElementInstance #1 (parentNode=null, firstChild=#2, correspondingElement is the 'g') SVGElementInstance #2 (parentNode=#1, firstChild=#3, correspondingElement is the other 'use') SVGElementInstance #3 (parentNode=#2, firstChild=null, corresponding Element is the 'rect')
interface SVGElementInstance : events::EventTarget {
readonly attribute SVGElement correspondingElement;
readonly attribute SVGUseElement correspondingUseElement;
readonly attribute SVGElementInstance parentNode;
readonly attribute SVGElementInstanceList childNodes;
readonly attribute SVGElementInstance firstChild;
readonly attribute SVGElementInstance lastChild;
readonly attribute SVGElementInstance previousSibling;
readonly attribute SVGElementInstance nextSibling;
};
SVGElementInstanceList インターフェースは、中身の定義と制約が隠ぺいされた、 SVGElementInstance オブジェクトの抽象化されたリストを表現する。
interface SVGElementInstanceList {
readonly attribute unsigned long length;
SVGElementInstance item ( in unsigned long index );
};
リストの index 番目のノードを返す。 index がリスト内のノード数以上の場合は null を返す。
| in unsigned long index | リストの項目の添字。 |
| SVGElementInstance | SVGElementInstanceList の index 番目の SVGElementInstance オブジェクト。添字が範囲外の場合は null を返す。 |
SVGImageElement インターフェースは 'image' 要素に対応する。
interface SVGImageElement :
SVGElement,
SVGURIReference,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {
readonly attribute SVGAnimatedLength x;
readonly attribute SVGAnimatedLength y;
readonly attribute SVGAnimatedLength width;
readonly attribute SVGAnimatedLength height;
readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
};
SVGSwitchElement インターフェースは 'switch' 要素に対応する。
interface SVGSwitchElement :
SVGElement,
SVGTests,
SVGLangSpace,
SVGExternalResourcesRequired,
SVGStylable,
SVGTransformable,
events::EventTarget {};
XHTML文書が 'object' 要素を持ち、その href 属性(またはそれと等価な属性)がSVG文書を参照している(即ちMIMEタイプが "image/svg+xml" の文書であり、したがってルート要素が 'svg' 要素)ときのように、SVG文書が参照により埋め込まれている場合、参照元の要素(例えばHTMLの 'object' あるいは類似の参照要素)に対し GetSVGDocument インターフェースを実装することがSVG-UAに要求される。
interface GetSVGDocument {
SVGDocument getSVGDocument ( )
raises( DOMException );
};
参照先のSVG文書に対する SVGDocument オブジェクトを返す。
| SVGDocument | 参照先のSVG文書に対する SVGDocument オブジェクト。 |
| DOMException |
NOT_SUPPORTED_ERR:SVGDocument オブジェクトが利用できない/存在しない。
|