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:
本来的にはっきり視覚的なパラメタであり、それら自身がスタイル付けに適するもの。この仕様の Example にはフィル, ストローク, 色や線の太さ, ダッシュスタイルなど、どのようにオブジェクトが「塗られる」かを定義するすべての属性の用例が含まれている。 Parameters which are clearly visual in nature and thus lend themselves to styling. Examples include all attributes that define how an object is "painted," such as fill and stroke colors, line widths and dash styles.
font-family や font-size などのテキストにスタイル付けを与えるパラメタ。 Parameters having to do with text styling such as 'font-family' and 'font-size'.
pointer-events や audio-level など、対話性とマルチメディア用途のパラメタ。 Parameters for interactivity and multimedia, such as 'pointer-events' and 'audio-level'.
SVG はその多くのスタイル付けプロパティを CSS [CSS2] および XSL [XSL] と共有する。 SVG 固有の規則がこの仕様で明示されている場合を除き、 CSS および XSL と共有するプロパティの正式な定義は CSS2 仕様 [CSS2] で与えられる。 注記： CSS 2 仕様はもう維持管理されていないので、実装者はより正確な詳細のためにその将来版の CSS 2.1 [CSS21] を参照することを望むかもしれない。 SVG 1.2 Tiny が CSS 2 を参照するのは、 W3C 勧告の中で仕様が十分成熟しきっているからである。 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 CSS 2 specification [CSS2]. Note: The CSS 2 specification is no longer maintained, and implementors may wish to refer instead to its future replacement, CSS 2.1 [CSS21], for more precise details. SVG 1.2 Tiny refers to CSS 2 due to the maturity of that specification on the W3C Recommendation track.
次に挙げるプロパティが CSS と SVG で共有される。 display は別として、これらのプロパティは XSL でも定められている： The following properties are shared between CSS 2 and SVG. Apart from 'display', these properties are also defined in XSL:
以下の SVGプロパティは CSS2 で定義されていない。これらの完全かつ正式な定義はこの仕様に含まれている： The following SVG properties are not defined in CSS 2. 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 にはそれぞれ異なる要求を満たすための様々な利用がある。よくある３つの筋書きを挙げる： 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 [XSLT] から出力される SVG 内容： SVG content generated as the output from XSLT [XSLT]:
XSLT は任意の XML 内容をストリーム入力として、複雑な変換を適用し、SVG 内容を出力として生成する能力を提供する。 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 can be used to transform XML data extracted for instance 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 [CSS2]:
CSS はスタイル付けプロパティを XML 内容（ SVG 内容も含まれる）に割当てるための宣言的言語であり、広く一般に実装されている。CSS は特色機能の組み合わせ, 単純性, 経済性を表現し、SVG の多くの応用に非常に適したものである。SVG Tiny 1.2 は SVG 内容に適用される CSS 選択子のサポートを要求しない。内容作成者は、SVG Tiny 1.2 UA からの利用を意図する文書のスタイル付けを外部の作成者によるスタイルシートに依存してはならない。 CSS is a widely implemented declarative language for assigning styling properties to XML content, including SVG. It represents a combination of features, simplicity and compactness that makes it very suitable for many applications of SVG. SVG Tiny 1.2 does not require support for CSS selectors applied to SVG content. Authors must not rely on external, author stylesheets to style documents that are intended to be used with SVG Tiny 1.2 user agents.
この仕様で定義されているスタイル付けプロパティのそれぞれに対し プロパティ索引 を見よ）、対応する同じ名前の 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 プロパティを指定する方法を示す。矩形は内部を赤色に、外形線を青色にされる： The following example shows how the 'fill' and 'stroke' properties can be assigned to a rectangle using the 'fill' and 'stroke' presentation attributes. The rectangle will be filled with red and outlined with blue:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
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 インタープリタ と 適合 SVG ビューア に要求されている。 Broad support. All versions of Conforming SVG Interpreters and Conforming SVG Viewers are required to support the presentation attributes.
単純性。 単に呈示属性の値を要素に与えるだけで要素とスタイル付けプロパティを結びつけられる。 Simplicity. Styling properties can be attached to elements by simply providing a value for the presentation attribute on the proper elements.
再スタイル付け。呈示属性を用いる SVG 内容は XSLT [XSLT] による出力ストリーム処理、またはCSSスタイル規則を追加して一部の呈示属性を上書きすることによる補足的スタイル付けと高い互換性を持っている。 Restyling. SVG content that uses the presentation attributes is highly compatible with downstream processing using XSLT [XSLT] or supplemental styling by adding CSS style rules to override some of the presentation attributes.
XSLT [XSLT] による簡易生成。 場合によっては、XSLTをスタイル付けが完全にされた SVG 内容の生成に利用できる。呈示属性は XSLT による SVG の簡易生成と互換性がある。 Convenient generation using XSLT [XSLT]. In some cases, XSLT can be used to generate fully styled SVG content. The presentation attributes are compatible with convenient generation of SVG from XSLT.
呈示属性を利用する SVG 内容は、CSS のようなスタイルシート言語によってスタイル付けされた SVG 内容と比較して潜在的限界を持つことがある。別の状況においては（ 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. 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.
内容に付加されたスタイル付け。 呈示属性が直接特定の要素に指定された結果、他の環境／目的のために文書を再スタイル付けする能力のような、内容からスタイル付けを分離することによって得られる潜在的利点が失われていく。 Styling attached to content. The presentation attributes are attached directly to particular elements, thereby diminishing potential advantages that comes from abstracting styling from content, such as the ability to restyle documents for different uses and environments.
データモデルの平板化。 呈示属性自身はスタイル付けシステムから得られるものより高度の抽象化を提供しない。例えば特定の範疇の要素に適用される名前付きのプロパティのコレクションを定義する能力の様な。結果として、多くの場合に重要な高レベルの意味内容が失われ、文書の再利用と再スタイル付けが難しくなる。 Flattened data model. In and of themselves, the presentation attributes do not offer the higher level abstractions that you get with a styling system, such as the ability to define named collections of properties which are applied to particular categories of elements. The result is that, in many cases, important higher level semantic information can be lost, potentially making document reuse and restyling more difficult.
ファイルサイズの肥大化。 多くの種類のグラフィックが似たようなスタイル付けプロパティを複数の要素間で共用する。例えば会社の組織図では一連のスタイル付けプロパティを一時雇用者のボックスに（例えば、点線の外形線に内部を赤塗り）、別の一連のスタイル付けプロパティを常時雇用者に（例えば、一様な外形線に内部を青塗り）あてがうことが考えられる。CSSのようなスタイル付けシステムでは一連のプロパティを一度だけファイルに定義すればよいのに対し、スタイル付け属性では要素一つ一つに呈示属性を指定する必要が生じる。 Potential increase in file size. Many types of graphics use similar styling properties across multiple elements. For example, a company organization chart might assign one collection of styling properties to the boxes around temporary workers (e.g., dashed outlines, red fill), and a different collection of styling properties to permanent workers (e.g., solid outlines, blue fill). Styling systems such as CSS allow collections of properties to be defined once in a file. With the styling attributes, it might be necessary to specify presentation attributes on each different element.
注記： 呈示属性定義における !important 宣言 ([CSS2], 6.4.2 節) はサポートされず、属性は サポート外の値 を持つものと見なされる。 Note: An !important declaration ([CSS2], section 6.4.2) within a presentation attribute definition is unsupported and causes that attribute to have an unsupported value.
注記： プロパティそれ自体が単体で簡略記述に対応する場合を除き、 簡略記述プロパティ ([CSS2], 1.3.3 節) に対応する呈示属性は存在しない。（ XML において属性の順序は関係ない。） Note: there are no presentation attributes for shorthand properties ([CSS2], section 1.3.3), only for the individual properties that make up the shorthand. (In XML, attribute order is not significant.)
注記： 呈示属性のアニメーションとプロパティのアニメーションは関連づけられる。詳細は attributeType 属性定義を見よ。 Note: Animation of presentation attributes and animation of properties are related, see the 'attributeType' attribute definition for more information.
XSL スタイルシート [XSLT] は XML 内容をどのようなものに変換するか（通常は他の XML だが）を定義する。 XSLT が SVG に関連して利用される場合、 XSL スタイルシートの入力と出力が共に SVG内容のときもあれば、 SVG 内容でない入力に対して SVG 内容を出力する場合もある。 XSL style sheets [XSLT] 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. The style sheet sets the 'fill' and 'stroke' properties on all rectangles to red and blue, respectively:
mystyle.xsl
<?xml version="1.0"?>
<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"/>
<!-- Add version to topmost 'svg' element -->
<xsl:template match="/svg:svg">
<xsl:copy>
<xsl:copy-of select="@*"/>
<xsl:attribute name="version">1.2</xsl:attribute>
<xsl:apply-templates/>
</xsl:copy>
</xsl:template>
<!-- Add styling to all 'rect' elements -->
<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"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
width="10cm" height="5cm" viewBox="0 0 100 50">
<rect x="20" y="10" width="60" height="30"/>
</svg>
mystyle.xsl 適用後の SVG 内容
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
width="10cm" height="5cm" viewBox="0 0 100 50">
<rect x="20" y="10" width="60" height="30" fill="red" stroke="blue" stroke-width="3"/>
</svg>
呈示属性 によるプロパティ宣言は XML で記述されるので大文字と小文字は区別され、プロパティ名は完全に一致していなければならない。呈示属性を fill プロパティの指定に利用する場合、その呈示属性名では 'FILL' や 'Fill' は不可で、'fill' でなければならない。 font-style="italic" の "italic" のようなキーワード値も文字の大小は区別され、キーワードの定義に一致させなければならない。例えば、キーワード "sRGB" では小文字の "s" に大文字の "RGB" になる。 Property declarations via presentation attributes are expressed in XML, which is case-sensitive and must match the exact property name. When using a presentation attribute to specify a value for the 'fill' property, the presentation attribute must 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".
SVG は CSS と XSL で共通の様々な関連するプロパティと手法、加えて多くの処理規則の意味内容を共有する。 SVG のプロパティの多くは CSS 2, XSL, SVG の間で共有されている（ 共有されているプロパティの一覧 を見よ）。 SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules. Many of SVG's properties are shared between CSS 2, XSL and SVG. (See list of shared properties).
SVG はプロパティの子要素への継承をサポートする。継承の有無は各プロパティの定義に明記されている。プロパティ継承においては指定値ではなく、算出値が継承される。算出値の計算については、各プロパティの定義を見よ。 キーワード inherit は、継承の無いプロパティであっても親のプロパティ値の利用の強制に用いることができることに注意。 SVG supports property inheritance to child elements. In the definition of each property it is stated whether it is inherited or not. Inherited properties inherit the computed value, and not the specified value. For the calculation of computed values, see the definition of each property. Note that the keyword inherit may be used to force the property value of the parent to be used, even for non-inherited properties.