SVG は文書の多くのパラメタの記述に スタイル付けプロパティ を利用する。 スタイル付けプロパティは SVG 内容のグラフィックス要素がどのように描画されるかを定義する。 SVG におけるスタイル付けプロパティは、次に挙げるものに利用される： SVG uses styling properties to describe many of its document parameters. Styling properties define how the graphics elements in the SVG content are to be rendered. SVG uses styling properties for the following:
SVG はその多くのスタイル付けプロパティを CSS [CSS2] および XSL [XSL] と共有する。 SVG 固有の規則がこの仕様で明示されている場合を除き、 CSS および XSL と共有するプロパティの正式な定義は CSS2 仕様 [CSS2] で与えられる。 SVG shares many of its styling properties with CSS [CSS2] and XSL [XSL]. Except for any additional SVG-specific rules explicitly mentioned in this specification, the normative definition of properties that are shared with CSS and XSL is the definition of the property from the CSS2 specification [CSS2].
次に挙げるプロパティが CSS と SVG で共有される。 これらのほとんどは XSL でも定義されている： The following properties are shared between CSS2 and SVG. Most of these properties are also defined in XSL:
以下の SVG プロパティは CSS2 で定義されていない。 これらの完全かつ正式な定義はこの仕様に含まれる： The following SVG properties are not defined in CSS2. The complete normative definitions for these properties are found in this specification:
スタイル付けプロパティの要約された一覧は プロパティ索引 を見よ。 A table that lists and summarizes the styling properties can be found in the Property Index.
スタイル付けにはそれぞれ異なった目的を果たすための様々な利用がある。 よく利用される３つの筋書きを挙げる： SVG has many usage scenarios, each with different needs. Here are three common usage scenarios:
SVG 内容が（スタイルシート言語に依存しない）交換用の形式として利用される： SVG content used as an exchange format (style sheet language-independent):
ソフトウェアツール間で SVG 内容を確実に共用できることが主要な目的になる場合がある。 特定のスタイルシート言語がすべての実装でサポートされることは保証されないので、 SVG 内容をスタイルシート言語抜きで指定できることが要求される。 In some usage scenarios, reliable interoperability of SVG content across software tools is the main goal. Since support for a particular style sheet language is not guaranteed across all implementations, it is a requirement that SVG content can be fully specified without the use of a style sheet language.
XSLT から出力される SVG 内容： SVG content generated as the output from XSLT:
XSLT は任意の XML 内容をストリーム入力として、複雑な変換を適用し，出力として SVG 内容を生成する能力を提供する [XSLT] 。 XSLT を利用すればデータベースから抽出された XML データをグラフィック表現に変換することができる。 XSLT から完全な SVG 内容を生成できることが要求される。 XSLT offers the ability to take a stream of arbitrary XML content as input, apply potentially complex transformations, and then generate SVG content as output [XSLT]. XSLT can be used to transform XML data extracted from databases into an SVG graphical representation of that data. It is a requirement that fully specified SVG content can be generated from XSLT.
CSS2 によりスタイル付けされた SVG 内容： SVG content styled with CSS:
CSS はスタイル付けプロパティを XML 内容（ SVG 内容も含まれる）にあてがうための宣言的言語であり、広く一般に実装されている [CSS2] 。 CSS は特能の組み合わせ, 単純性, 経済性を表現し、 SVG の多くの応用に非常に適したものである。 CSS によるスタイル付けが SVG 内容に適用できることが要求される。 CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG [CSS2]. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. It is a requirement that CSS styling can be applied to SVG content.
スタイル付けプロパティを SVG 要素にあてがうには、以下の２つの方法がある： Styling properties can be assigned to SVG elements in the following two ways:
呈示属性（プレゼンテーション属性） Presentation attributes
SVG の 呈示属性 を用いて，スタイル付けプロパティをあてがうことができる。 この仕様で定義されている各スタイル付けプロパティに対し，対応する XML 呈示属性があり、関連するすべての SVG 要素で利用できる。 呈示属性についての詳細は、 呈示属性を用いてプロパティを指定する にてとりあげる。 Styling properties can be assigned using SVG's presentation attributes. For each styling property defined in this specification, there is a corresponding XML presentation attribute available on all relevant SVG elements. Detailed information on the presentation attributes can be found in Specifying properties using the presentation attributes.
呈示属性はスタイルシート言語とは独立なので、上記筋書き１（すなわちツール間での共用）が適用できる。 XSLT から XML 属性に値を与えることは素直にできることなので、呈示属性は上記筋書き２（すなわち XSLT から SVG を生成すること）にもうってつけである。 （下の XSL によるスタイル付け を見よ） The presentation attributes are style sheet language independent and thus are applicable to usage scenario 1 above (i.e., tool interoperability). Because it is straightforward to assign values to XML attributes from XSLT, the presentation attributes are well-suited to usage scenario 2 above (i.e., SVG generation from XSLT). (See Styling with XSL below.)
適合 SVG インタープリタ と 適合 SVG ビューア には SVG の呈示属性のサポートが要求される。 Conforming SVG Interpreters and Conforming SVG Viewers are required to support SVG's presentation attributes.
CSS スタイルシート CSS Stylesheets
上記筋書き３をサポートするには、 SVG 内容が CSS によりスタイル付けできなければならない。 詳細は CSS によるスタイル付け を見よ。 To support usage scenario 3 above, SVG content can be styled with CSS. For more information, see Styling with CSS.
素の（すなわちテキストベースの） XML 内容に対する CSS によるスタイル付けをサポートする 適合 SVG インタープリタ と 適合 SVG ビューア には、 SVG 内容に対する CSS によるスタイル付けのサポートも要求される。 Conforming SVG Interpreters and Conforming SVG Viewers that support CSS styling of generic (i.e., text-based) XML content are required to also support CSS styling of SVG content.
この仕様で定義される各スタイル付けプロパティ（ プロパティ索引 を見よ）に対し、対応する同じ名前の XML 属性（ 呈示属性 ）が存在し，関連するすべての SVG 要素で利用できる。 例えば SVG には、図形の内部をどのように塗るかを定義する fill プロパティがある。 対応する同じ名前の呈示属性（すなわち fill ）を与えられた要素の fill プロパティの値の指定に利用できる。 For each styling property defined in this specification (see Property Index), there is a corresponding XML attribute (the presentation attribute) with the same name that is available on all relevant SVG elements. For example, SVG has a ‘fill’ property that defines how to paint the interior of a shape. There is a corresponding presentation attribute with the same name (i.e., ‘fill’) that can be used to specify a value for the ‘fill’ property on a given element.
次の例に、呈示属性 fill, stroke を用いて fill, stroke プロパティを rect に指定する方法を示す。 矩形は赤色のフィルと青色のストロークになる： The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘fill’ and ‘stroke’ presentation attributes. The rectangle will be filled with red and outlined with blue:
<?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 xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<rect x="200" y="100" width="600" height="300"
fill="red" stroke="blue" stroke-width="3"/>
</svg>
呈示属性には次に挙げる利点がある： The presentation attributes offer the following advantages:
呈示属性を利用する SVG 内容は、 CSS のようなスタイルシート言語でスタイル付けされた SVG 内容（ CSS によるスタイル付け を見よ）と比較して，潜在的限界を持つことがある。 場合によっては（ XSLT スタイルシートによって意味論に満ちた XML ソースファイルから SVG 内容が生成される様な場合など）、下に述べる限界はあてはまらないかもしれない。 以下に述べる潜在的限界が呈示属性にも該当するかどうかは、状況に依存する。 In some situations, SVG content that uses the presentation attributes has potential limitations versus SVG content that is styled with a style sheet language such as CSS (see Styling with CSS). In other situations, such as when an XSLT style sheet generates SVG content from semantically rich XML source files, the limitations below may not apply. Depending on the situation, some of the following potential limitations may or may not apply to the presentation attributes:
CSS をサポートする UA においては、呈示属性は 非 CSS による呈示上のヒントの優先順位 ([CSS2], 6.4.4 節) に従って、対応するスタイル規則に変換された上で，文書のスタイルシートに追加されなければならない。 この追加においては、概念的には，呈示属性は、一連の文書作成者スタイルシートの最初のものになる，新たな文書作成者スタイルシートに挿入される。 すなわち CSS2 カスケード の過程においては、呈示属性は，あたかも対応する CSS スタイル規則に置換された上で，文書作成者のスタイルシートの先頭に詳細度（ specificity ）がゼロとして置かれたかのように働く。 このことは、一般的に呈示属性は，文書作成者による他の CSS スタイル規則や style 属性よりも優先度が低いことを意味する。 For user agents that support CSS, the presentation attributes must be translated to corresponding CSS style rules according to rules described in Precedence of non-CSS presentational hints ([CSS2], section 6.4.4), with the additional clarification that the presentation attributes are conceptually inserted into a new author style sheet which is the first in the author style sheet collection. The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or ‘style’ attributes.
CSS をサポートしない UA においては、いかなる CSS スタイル規則も style 属性も，無視されなければならない。 この場合、 CSS2 カスケードは適用されない。 （しかし、プロパティの継承は適用される。 プロパティ継承 を見よ。） User agents that do not support CSS must ignore any CSS style rules defined in CSS style sheets and ‘style’ attributes. In this case, the CSS cascade does not apply. (Inheritance of properties, however, does apply. See Property inheritance.)
呈示属性においては、 !important 宣言 ([CSS2], 6.4.2 節) は無効である。 An !important declaration ([CSS2], section 6.4.2) within a presentation attribute definition is an invalid value.
呈示属性のアニメーションは、対応するプロパティのアニメーションと等価である。 したがって、 attributeType="XML" の呈示属性と，対応する attributeType="CSS" のプロパティによるアニメーションの効果は、等価になる（ attributeType を見よ）。 Animation of presentation attributes is equivalent to animating the corresponding property. Thus, the same effect occurs from animating the presentation attribute with attributeType="XML" as occurs with animating the corresponding property with attributeType="CSS" (see ‘attributeType’).
XSL スタイルシート [XSLT] [XSLT2] は、 XML 内容をどのようなものに変換するか（通常は他の XML だが）を定義する。 XSLT が SVG に関連して利用される場合、 XSL スタイルシートの入力と出力が両方とも SVG 内容の場合もあれば, SVG 内容でない入力に対して SVG 内容を出力する場合もある。 XSL style sheets [XSLT] [XSLT2] define how to transform XML content into something else, usually other XML. When XSLT is used in conjunction with SVG, sometimes SVG content will serve as both input and output for XSL style sheets. Other times, XSL style sheets will take non-SVG content as input and generate SVG content as output.
外部 XSL スタイルシートを用いて SVG 内容を別の SVG 内容へ変換する例を示す（ 外部スタイルシートへの参照 を見よ）。 スタイルシートはすべての矩形に対し， fill プロパティを赤色に, stroke プロパティを青色に設定する： The following example uses an external XSL style sheet to transform SVG content into modified SVG content (see Referencing external style sheets). The style sheet sets the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:
mystyle.xsl
<?xml version="1.0" standalone="no"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg">
<xsl:output
method="xml"
encoding="utf-8"
doctype-public="-//W3C//DTD SVG 1.1//EN"
doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"/>
<!-- 最上位の 'svg' 要素にバージョンを追加 -->
<xsl:template match="/svg:svg">
<xsl:copy>
<xsl:copy-of select="@*"/>
<xsl:attribute name="version">1.1</xsl:attribute>
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>
<!-- すべての 'rect' 要素にスタイル付けを追加 -->
<xsl:template match="svg:rect">
<xsl:copy>
<xsl:copy-of select="@*"/>
<xsl:attribute name="fill">red</xsl:attribute>
<xsl:attribute name="stroke">blue</xsl:attribute>
<xsl:attribute name="stroke-width">3</xsl:attribute>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
mystyle.xsl により変換される SVG ファイル
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.xsl" type="application/xml"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="10cm" height="5cm">
<rect x="2cm" y="1cm" width="6cm" height="3cm"/>
</svg>
mystyle.xsl が適用された後の SVG 内容
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="10cm" height="5cm" version="1.1">
<rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red" stroke="blue" stroke-width="3"/>
</svg>
CSS をサポートする SVG の実装においては、次のサポートが要求される： SVG implementations that support CSS are required to support the following:
次の例に、すべての矩形に対し， fill および stroke プロパティをそれぞれ赤色と青色に設定する，外部 CSS スタイルシートの利用を示す： The following example shows the use of an external CSS style sheet to set the ‘fill’ and ‘stroke’ properties on all rectangles to red and blue, respectively:
mystyle.css
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
mystyle.css を参照する SVG ファイル
<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<rect x="200" y="100" width="600" height="300"/>
</svg>
CSS スタイルシートは、 style 要素内に記述して， SVG 内容に埋め込むこともできる。 前の例と同じ結果を得る内部 CSS スタイルシートを次の例に示す： CSS style sheets can be embedded within SVG content inside of a ‘style’ element. The following example uses an internal CSS style sheet to achieve the same result as the previous 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 xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<defs>
<style type="text/css"><![CDATA[
rect {
fill: red;
stroke: blue;
stroke-width: 3
}
]]></style>
</defs>
<rect x="200" y="100" width="600" height="300"/>
</svg>
CSS スタイルシートを
CDATA
ブロック（<![CDATA[ ... ]]>）の中に置いていることに注意。
内部スタイルシートを CDATA ブロックで括ることはときに必要になる。
XML 構文解析器から誤認される ">" などの文字も含められるからである。
XML 構文解析器から誤認される文字が使われていなくとも、内部スタイルシートを CDATA ブロックの中に置くことは強く推奨される。
Note how the CSS style sheet is placed within a CDATA construct (i.e., <![CDATA[ ... ]]>). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as ">", which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.
CSS をサポートする実装には CSS インラインスタイルのサポートも要求される。 HTML の style 属性と同様に， CSS インラインスタイルは、 SVG の style 属性内にて，セミコロンで区切られた "name : value" 形式のプロパティ宣言のリストとして記述される。 style 属性内のプロパティ宣言は、 CSS スタイル規則に従わなければならないことに注意。 style 属性を見よ。 Implementations that support CSS are also required to support CSS inline style. Similar to the ‘style’ attribute in HTML, CSS inline style can be declared within a ‘style’ attribute in SVG by specifying a semicolon-separated list of property declarations, where each property declaration has the form "name: value". Note that property declarations inside the ‘style’ attribute must follow CSS style rules, see The 'style' attribute.
次の例に、 style 属性を利用して rect に対して fill および stroke プロパティをあてがう方法を示す。 前の例と同様、矩形は内部を赤色に, 外形線を青色に塗られる： The following example shows how the ‘fill’ and ‘stroke’ properties can be specified on a ‘rect’ using the ‘style’ attribute. Just like the previous example, the rectangle will be filled with red and outlined with blue:
<?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 xmlns="http://www.w3.org/2000/svg" version="1.1"
width="10cm" height="5cm" viewBox="0 0 1000 500">
<rect x="200" y="100" width="600" height="300"
style="fill: red; stroke: blue; stroke-width: 3"/>
</svg>
CSS スタイルシートをサポートする UA は、次に挙げる CSS2 の機能をサポートしなければならない。 In an SVG user agent that supports CSS style sheets, the following facilities from CSS2 must be supported:
【 † すなわち，文書内に元々存在しない内容を対象にするもの（ CSS2 の後継レベルの CSS 用語では “擬似クラス” ではなく “疑似要素” と呼ばれる） 】
CSS によりスタイル付けされる SVG 内容に ICC カラープロファイルも適用できるようにするため、 SVG ではカラープロファイルを定義するための ＠規則 ([CSS2], 4.1.6 節) として @color-profile が定義される。 SVG defines an @color-profile at-rule ([CSS2], section 4.1.6) for defining color profiles so that ICC color profiles can be applied to CSS-styled SVG content.
相対 URI と外部 CSS スタイルシートについての注記： CSS2 仕様によれば ([CSS2], 4.3.4 節) 、スタイルシート内の（ 統一リソース識別子 (URI) ： 一般構文 ([RFC3986]) に定められている）相対 URI は、スタイルシートの基底 URI を基に解決されるのであって，参照する文書の基底 URI を基にするのではない。 Note the following about relative URIs and external CSS style sheets: The CSS2 specification says ([CSS2], section 4.3.4) that relative URIs (as defined in Uniform Resource Identifiers (URI): Generic Syntax [RFC3986]) within style sheets are resolved such that the base URI is that of the style sheet, not that of the referencing document.
呈示属性 によるプロパティ宣言は XML [XML10] で記述され、大文字と小文字は区別される。 対して、 CSS スタイルシートや style 属性内で指定される CSS プロパティ宣言では，一般的に 少数の例外を除いて文字の大小は区別されない ([CSS2], 4.1.3 節) 。 Property declarations via presentation attributes are expressed in XML [XML10], which is case-sensitive. CSS property declarations specified either in CSS style sheets or in a ‘style’ attribute, on the other hand, are generally case-insensitive with some exceptions ([CSS2], section 4.1.3).
呈示属性は XML 属性として記述されるので、文字の大小は区別され，
SVG DTD
で指定される名前に完全に一致していなければならない（ DTD の中の、すべての呈示属性に展開される SVG.Presentation.attrib の項を見よ）。
呈示属性を
fill
プロパティの値の指定に用いる場合、属性は fill="…" と指定されなければならず， FILL="…" や Fill="…" は不可である。
font-style="italic" の中の italic のようなキーワード値も文字の大小は区別され、仕様で定められているものと同じ文字の大小の並びで指定されなければならない。
例えばキーワード sRGB は小文字の "s", 大文字の "RGB" の並びでなければならない。
Because presentation attributes are expressed as XML attributes, presentation attributes are case-sensitive and must match the exact name as specified in the DTD (see the SVG.Presentation.attrib entity in the DTD, which expands to all of the presentation attributes). When using a presentation attribute to specify a value for the ‘fill’ property, the presentation attribute must be be specified as fill="…" and not fill="…" or Fill="…". Keyword values, such as italic in font-style="italic", are also case-sensitive and must be specified using the exact case used in the specification which defines the given keyword. For example, the keyword sRGB must have lowercase "s" and uppercase "RGB".
CSS スタイルシートや style 属性におけるプロパティ宣言は CSS 規則に従うので、文字の大小に関しては概ね寛容である。 しかしながら，スタイル付けプロパティを表現する異なった方法間における一貫性を促すため、文書作成者には，この CSS の利便性に頼らず，関連仕様で定義されている厳密なプロパティ名（通常は小文字とハイフンのみ）と呈示属性に使用されているものと同一の文字の大小の並びによるキーワードを使用することが強く推奨される。 Property declarations within CSS style sheets or in a ‘style’ attribute must only conform to CSS rules, which are generally more lenient with regard to case sensitivity. However, to promote consistency across the different ways for expressing styling properties, it is strongly recommended that authors use the exact property names (usually, lowercase letters and hyphens) as defined in the relevant specification and express all keywords using the same case as is required by presentation attributes and not take advantage of CSS's ability to ignore case.
SVG は CSS と XSL で共通の様々な関連するプロパティと手法、加えて多くの処理規則の意味論を共有する。 SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules.
SVG は以下の機能を CSS と XSL とで共有する： SVG shares the following facilities with CSS and XSL:
外部スタイルシートは XML 文書とスタイルシートとの結び付け 1.0 [XML-SS] による仕組を利用して参照される。 External style sheets are referenced using the mechanism documented in Associating Style Sheets with XML documents Version 1.0 [XML-SS].
スタイルシートは style 要素を用いて SVG 内容に直接埋めこむことができる。 SVG の style 要素は対応する HTML の要素と同一の属性を持つ（ HTML の style 要素 参照）。 The ‘style’ element allows style sheets to be embedded directly within SVG content. SVG's ‘style’ element has the same attributes as the corresponding element in HTML (see HTML's ‘style’ element).
属性定義
スタイルデータの構文はスタイルシート言語に基づく。 The syntax of style data depends on the style sheet language.
一部のスタイルシート言語においては、 style 属性内より style 要素の中で，より広範囲の規則が許され得る。 例えば CSS の場合、規則の宣言は style 要素内では許容されるが style 属性内では許容されない。 Some style sheet languages might allow a wider variety of rules in the ‘style’ element than in the ‘style’. For example, with CSS, rules can be declared within a ‘style’ element that cannot be declared within a ‘style’ attribute.
style 要素の例が上に示されている（ 例 を見よ）。 An example showing the ‘style’ element is provided above (see example).
属性定義
class 属性は、一つ以上のクラス名を要素に指定する。 要素はこれらのクラスに属すると言ってもよい。 複数の要素インスタンスが同じクラス名を共有してもよい。 class 属性にはいくつかの役割がある： The ‘class’ attribute assigns one or more class names to an element. The element may be said to belong to these classes. A class name may be shared by several element instances. The ‘class’ attribute has several roles:
以下は文書のメッセージをマークアップする目的で text 要素を class 属性と伴に利用する例である。 メッセージは英語とフランス語の両方で表示される。 In the following example, the ‘text’ element is used in conjunction with the ‘class’ attribute to markup document messages. Messages appear in both English and French versions.
<!-- 英語メッセージ --> <text class="info" lang="en">Variable declared twice</text> <text class="warning" lang="en">Undeclared variable</text> <text class="error" lang="en">Bad syntax for variable name</text> <!-- フランス語メッセージ --> <text class="info" lang="fr">Variable déclarée deux fois</text> <text class="warning" lang="fr">Variable indéfinie</text> <text class="error" lang="fr">Erreur de syntaxe pour variable</text>
CSS によるスタイル付け をサポートする SVG-UA の場合、次のスタイル規則により "info" メッセージは緑色に, "warning" メッセージは黄色に, "error" メッセージは赤色に表示される： In an SVG user agent that supports CSS styling, the following CSS style rules would tell visual user agents to display informational messages in green, warning messages in yellow, and error messages in red:
text.info { color: green }
text.warning { color: yellow }
text.error { color: red }
style 属性はスタイル規則を要素ごとに指定できるようにする。 CSS によるスタイル付けが利用される場合、要素の style 属性に "名前 : 値" 形式のプロパティ宣言をセミコロンで区切って記述することにより， CSS インラインスタイルを指定することができる。 プロパティ宣言は CSS スタイル規則に従わなければならないので、 CSS 定義の プロパティ で（ゼロでない） <length> 値を持つもの（例えば 'font-size' ）には，単位が付与されていなければならない。 CSS 定義のプロパティの一覧は SVG のスタイル付けプロパティ を見よ。 The ‘style’ attribute allows per-element style rules to be specified directly on a given element. When CSS styling is used, CSS inline style is specified by including semicolon-separated property declarations of the form "name : value" within the ‘style’ attribute. Property declarations must follow CSS style rules thus CSS defined properties (e.g. 'font-size') when having a <length> value must include a unit (for non-zero values). See SVG's styling properties for a list of CSS defined properties.
属性定義
スタイル属性は個々の SVG 要素ごとに指定してよい。 同じスタイルがいくつもの要素で利用されている場合、文書作成者は style 要素を利用して情報を再編成すべきである。 最適な柔軟性を得るためには、文書作成者は外部スタイルシートを作成すべきである。 The style attribute may be used to apply a particular style to an individual SVG element. If the style will be reused for several elements, authors should use the ‘style’ element to regroup that information. For optimal flexibility, authors should define styles in external style sheets.
style 属性の例は上に示されている（ 例 を見よ）。 An example showing the ‘style’ attribute is provided above (see example).
svg 要素の contentStyleType 属性は文書片において既定となるスタイルシート言語を指定する。 The ‘contentStyleType’ attribute on the ‘svg’ element specifies the default style sheet language for the given document fragment.
CSS は（スタイル要素およびスタイル属性の中の）インラインによるスタイル付けに広く利用されている言語であり， contentStyleType が省略された際の既定の言語でもあるので、実際上 contentStyleType の UA からのサポートも少ない。 XSL スタイルシートは概して外部になる。 新たなスタイルシート言語が普及した場合、 style 属性を利用せず，利用する言語を style 要素の type 属性で簡便に宣言することが予想される。 Since the only widely deployed language used for inline styling (in style elements and style attributes) is CSS, and since that is already the default language if contentStyleType is omitted, in practice contentStyleType is not well supported in user agents. XSL style sheets are typically external. If a new style sheet language becomes popular, it might not use style attributes and could easily declare which language is in use with the type attribute on the style element.
従って contentStyleType の利用は廃止予定にあり、新たな内容はこれを利用すべきではない。 contentStyleType は将来版の SVG 仕様からは取り除かれる可能性がある。 The use of contentStyleType is therefore deprecated; new content should not use it. Future versions of the SVG specification may remove contentStyleType.
UA が CSS をサポートしていようといまいと、 SVG におけるプロパティの継承は CSS2 仕様で定義されたプロパティ継承規則に従う。 プロパティ継承の正式な定義は CSS2 仕様の 継承 ([CSS2], 6.2 節) に従う。 Whether or not the user agent supports CSS, property inheritance in SVG follows the property inheritance rules defined in the CSS2 specification. The normative definition for property inheritance is the Inheritance section of the CSS2 specification ([CSS2], section 6.2).
プロパティが親の値を継承できるかどうかは各プロパティの定義に示す。 The definition of each property indicates whether the property can inherit the value of its parent.
SVG では CSS2 と同様、ほとんどの要素は 算出値 ([CSS2], 6.1.2 節) を継承する。 算出値以外の何かが継承される場合については、プロパティ定義が規則を定める。 利用単位, 画素単位（例えば 20px ）, 絶対的な値により指定された値の場合、算出値は 指定値 ([CSS2], 6.1.1 節) に等しい。 一定の相対的な単位により指定された値（すなわち em, ex, 百分率）の場合、算出値はその単位が比較対象とする値の単位を持つ。 したがって，親要素の font-size が 10pt で現在の要素の font-size が 120% ならば、その算出値は 12pt になる。 比較対象の値にいかなる SVG 標準の単位（すなわち CSS 単位あるいは利用単位）も指定されていない場合（例えば百分率が現在のビューポートやオブジェクトの限界ボックスに対して指定されているようなとき）、算出値は利用単位となる。 In SVG, as in CSS2, most elements inherit computed values ([CSS2], section 6.1.2). For cases where something other than computed values are inherited, the property definition will describe the inheritance rules. For specified values ([CSS2], section 6.1.1) which are expressed in user units, in pixels (e.g., 20px) or in absolute values, the computed value equals the specified value. For specified values which use certain relative units (i.e., em, ex and percentages), the computed value will have the same units as the value to which it is relative. Thus, if the parent element has a ‘font-size’ of 10pt and the current element has a ‘font-size’ of 120%, then the computed value for ‘font-size’ on the current element will be 12pt. In cases where the referenced value for relative units is not expressed in any of the standard SVG units (i.e., CSS units or user units), such as when a percentage is used relative to the current viewport or an object bounding box, then the computed value will be in user units.
注記： SVG に備わっている特質として、要素のプロパティに先祖要素と異なる値があてがわれているにも関わらず，先祖にあてがわれたプロパティが影響することがある。 例えば先祖要素に clip-path （クリッピングパス）プロパティが指定されているとき、その子孫において clip-path プロパティの値が none に指定されていても，先祖のクリッピングパスが子孫に適用される。 何故なら SVG の意味論に基づけば、与えられた要素に適用されるクリッピングパスは，要素自身とその先祖要素すべてに指定されたクリッピングパスの共通部分になるからである。 ここで重要な考え方は、まず最初にプロパティに値があてがわれる（プロパティ継承も含めて）ことである。 各要素のプロパティに値があてがわれた後、 UA は各プロパティの意味論を適用する。 その結果として、先祖要素にあてがわれたプロパティが子孫の描画に影響することが起こり得る。 Note that SVG has some facilities wherein a property which is specified on an ancestor element might effect its descendant element, even if the descendant element has a different assigned value for that property. For example, if a ‘clip-path’ property is specified on an ancestor element, and the current element has a ‘clip-path’ of none, the ancestor's clipping path still applies to the current element because the semantics of SVG state that the clipping path used on a given element is the intersection of all clipping paths specified on itself and all ancestor elements. The key concept is that property assignment (with possible property inheritance) happens first. After properties values have been assigned to the various elements, then the user agent applies the semantics of each assigned property, which might result in the property assignment of an ancestor element affecting the rendering of its descendants.
スタイルシートの可視／有効範囲は以下で定義される： The following define the scope/range of style sheets:
UA は SVG 名前空間の要素に適用される 視覚メディア ([CSS2], 7.3.1 節) 用の UA スタイルシート ([CSS2], 6.4 節) [CSS2-CASCADE-RULES] を維持管理することになる。 下の UA スタイルシートは CSS の構文で記述されている。 しかしながら、たとえ UA が CSS スタイルシートをサポートしていなくても，この既定のスタイルシートに基づくふるまいのサポートは要求される： The user agent shall maintain a user agent style sheet ([CSS2], section 6.4) for elements in the SVG namespace for visual media ([CSS2], section 7.3.1). The user agent style sheet below is expressed using CSS syntax; however, user agents are required to support the behavior that corresponds to this default style sheet even if CSS style sheets are not supported in the user agent:
svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }
上の UA スタイルシートの最初の行は、列挙された要素に対し，新たな 初期クリッピングパス を 初期ビューポート の境界に確立することを指示している。 これらの要素は 新たにビューポートを確立する要素 である。 （詳細は SVG における overflow プロパティの利用についての記述を見よ。） The first line of the above user agent style sheet will cause the initial clipping path to be established at the bounds of the initial viewport. Furthermore, it will cause new clipping paths to be established at the bounds of the listed elements, all of which are elements that establish a new viewport. (Refer to the description of SVG's use of the ‘overflow’ property for more information.)
上の UA スタイルシートの２行目は、 CSS2 による レイアウト ([CSS2], 9 章) 過程において， svg 要素の width, height 属性を CSS2 の 'width', 'height' プロパティの既定値に用いることを指示している。 The second line of the above user agent style sheet will cause the ‘width’ and ‘height’ attributes on the ‘svg’ element to be used as the default values for the 'width' and 'height' properties during layout ([CSS2], chapter 9).
【 聴覚スタイルシートは、 CSS Speech Module に移行されることが予期されている。 】
聴覚メディアの目的のため、 SVG はスタイル付け可能な XML 文法を表現する。 CSS 聴覚スタイルシートをサポートする UA においては、 CSS2 の定義に従って， 聴覚スタイルプロパティ ([CSS2], 19 章) を適用できる。 For the purposes of aural media, SVG represents a stylable XML grammar. In user agents that support CSS aural style sheets, aural style properties ([CSS2], chapter 19) can be applied as defined in CSS2.
聴覚スタイルプロパティは、次の要素を含む文字データを内容に持つ，任意の SVG 要素に適用できる： desc, title, tspan, tref, altGlyph, textPath 。 聴覚スタイルシートをサポートする UA においては、以下の CSS2 プロパティを適用できる： Aural style properties can be applied to any SVG element that can contain character data content, including ‘desc’ ‘title’ ‘tspan’, ‘tref’, ‘altGlyph’ and ‘textPath’. On user agents that support aural style sheets, the following CSS2 properties can be applied:
| 聴覚プロパティ | [CSS2] における定義 |
|---|---|
| azimuth | 19.7 節 |
| cue | 19.5 節 |
| cue-after | 19.5 節 |
| cue-before | 19.5 節 |
| elevation | 19.7 節 |
| pause | 19.4 節 |
| pause-after | 19.4 節 |
| pause-before | 19.4 節 |
| pitch | 19.8 節 |
| pitch-range | 19.8 節 |
| play-during | 19.6 節 |
| richness | 19.8 節 |
| speak | 19.3 節 |
| speak-header | 17.7.1 節 |
| speak-numeral | 19.9 節 |
| speak-punctuation | 19.9 節 |
| speech-rate | 19.8 節 |
| stress | 19.8 節 |
| voice-family | 19.8 節 |
| volume | 19.2 節 |
聴覚スタイルシートに加えて、 DOM Level 2 Core [DOM2] をサポートする UA には、聴覚プロパティ対応する 文書オブジェクトモデル CSS ([DOM2STYLE], 2 章) で定義された DOM インタフェースのサポートが要求される（ DOM2 CSS オブジェクトモデルとの関係 を見よ） For user agents that support aural style sheets and also support DOM Level 2 Core [DOM2], the user agent is required to support the DOM interfaces defined in Document Object Model CSS ([DOM2STYLE], chapter 2) that correspond to aural properties. (See Relationship with DOM2 CSS object model.)
SVGStyleElement インタフェースは style 要素に対応する。 The SVGStyleElement interface corresponds to the ‘style’ element.
interface SVGStyleElement : SVGElement,
SVGLangSpace {
attribute DOMString type setraises(DOMException);
attribute DOMString media setraises(DOMException);
attribute DOMString title setraises(DOMException);
};