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 shares many of its styling properties with CSS [CSS21] 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.1 specification [CSS21] or a later version of the relevant CSS module.
The following properties are shared between CSS 2.1 and SVG. Most of these properties are also defined in XSL:
This list needs to be updated. We should list all the properties we normative require support for, and which specification they are defined in. Come up with a definitive list of CSS specifications we normatively depend on.
Overall: we should not have to mention the version of CSS everywhere. We don't do that for XSL.
Remove mentions of XSL and XSLT from this chapter.
font
’font-family
’font-size
’font-size-adjust
’font-stretch
’font-style
’font-variant
’font-weight
’clip
’, only applicable to outermost svg element.color
’, used to provide a potential indirect value
(currentColor) for the
‘fill
’,
‘stroke
’,
‘stop-color
’,
‘flood-color
’ and
‘lighting-color
’
properties.
(The SVG properties which support color allow a color
specification which is extended from CSS 2.1 to accommodate
color definitions in arbitrary color spaces.)cursor
’display
’overflow
’, only applicable to
elements which establish a new viewport.visibility
’The following SVG properties are not defined in CSS 2.1. The complete normative definitions for these properties are found in this specification:
isolation
’filter
’flood-color
’flood-opacity
’lighting-color
’color-interpolation
’color-rendering
’fill
’fill-opacity
’fill-rule
’image-rendering
’marker
’marker-end
’marker-mid
’marker-start
’shape-rendering
’stroke
’stroke-dasharray
’stroke-dashoffset
’stroke-linecap
’stroke-linejoin
’stroke-miterlimit
’stroke-opacity
’stroke-width
’text-rendering
’A table that lists and summarizes the styling properties can be found in the Property Index.
Styling properties can be assigned to SVG elements in the following two ways:
This section doesn't add anything to the following two sections; consider removing it.
Presentation attributes
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.
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).
Conforming SVG Interpreters and Conforming SVG Viewers are required to support SVG's presentation attributes.
CSS Stylesheets
To support usage scenario 3 above, SVG content can be styled with CSS. For more information, see Styling with 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.
We should require CSS styling support in all conformance classes. (ACTION-3709 on Cameron)
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.
We should state which properties have a corresponding presentation attribute. Discussion. (ACTION-3732 on Cameron)
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:
Make a more useful example. At least show the rendering.
<?xml version="1.0" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" 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>
Remove all of this advantages/limitations discussion.
The presentation attributes offer the following advantages:
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:
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 ([CSS21], 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 CSS 2.1 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.
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.)
Make UAs that don't support CSS non-conforming instead, and drop the above paragraph?
An !important declaration ([CSS21], section 6.4.2) within a presentation attribute definition is an invalid value.
Referencing the discussion of presentation attribute parsing in the Types chapter.
Animation of presentation attributes is equivalent to animating the corresponding property.
SVG implementations that support CSS are required to support the following:
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:
Make a more useful example. At least show the rendering.
mystyle.css rect { fill: red; stroke: blue; stroke-width: 3 } SVG file referencing mystyle.css <?xml version="1.0" standalone="no"?> <?xml-stylesheet href="mystyle.css" type="text/css"?> <svg xmlns="http://www.w3.org/2000/svg" width="10cm" height="5cm" viewBox="0 0 1000 500"> <rect x="200" y="100" width="600" height="300"/> </svg>
View this
example as SVG (SVG-enabled browsers only)
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"?> <svg xmlns="http://www.w3.org/2000/svg" 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>
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.
If we need to keep this, it should also mention best practice for HTML. In any case, ">" is fine in XML documents; it's "<" and "&" you need to escape.
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.
Do we need a conformance class for svg UAs that don't support CSS?
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"?> <svg xmlns="http://www.w3.org/2000/svg" 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>
In an SVG user agent that supports CSS style sheets, the following facilities from CSS 2.1 must be supported:
Why not support ::before/::after? We might have discussed this.
This is not a "facility from CSS 2.1". Can probably remove this list item.
Note the following about relative URIs and external CSS style sheets: The CSS 2.1 specification says ([CSS21], 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.
Should be talking about URLs instead, no?
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 ([CSS21], section 4.1.3).
Because presentation attributes are expressed as XML
attributes, their names are case-sensitive and must be
given exactly as they are defined.
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".
Also we should not require the "correct" case to be used. (ACTION-3276 on Cameron)
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.
The above paragraph doesn't add anything.
SVG 2 Requirement: | Consider relaxing case sensitivity of presentation attribute values. |
---|---|
Resolution: | We will make property values case insensitivity. |
Purpose: | To align presentation attribute syntax parsing with parsing of the corresponding CSS property. |
Owner: | Cameron (ACTION-3276) |
SVG shares various relevant properties and approaches common to CSS and XSL, plus the semantics of many of the processing rules.
This doesn't need a whole section. Remove it, and any interesting information can be moved earlier in the chapter.
SVG shares the following facilities with CSS and XSL:
External style sheets are referenced using the mechanism documented in Associating Style Sheets with XML documents Version 1.0 [XML-SS].
We should suggest @import
as a means for
referencing external CSS style sheets that will also work in an HTML5
document.
Where is it defined that an HTML ‘link’ element can cause a style sheet to be loaded and applied to SVG content? Should we allow (an SVG or HTML namespace) ‘link’ element in an SVG document fragment?
This section can be folded into the "Styling with CSS" one.
SVG 2 Requirement: | Add HTML5 ‘style’ element attributes to SVG's ‘style’ element. |
---|---|
Resolution: | SVG 2 ‘style’ element shall be aligned with the HTML5 ‘style’ element. |
Purpose: | To not surprise authors with different behavior for the ‘style’ element in HTML and SVG content. |
Owner: | Cameron (ACTION-3277) |
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).
Attribute definitions:
Name | Value | Initial value | Animatable |
---|---|---|---|
type | content-type | text/css | no |
This attribute specifies the style sheet language of the element's contents. The style sheet language is specified as a content type (e.g., "text/css"), as per MIME Part Two: Media Types [RFC2046]. If the attribute is not specified, then the style sheet language is assumed to be CSS.
Name | Value | Initial value | Animatable |
---|---|---|---|
media | media | (none) | no |
This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is "all". The set of recognized media-descriptors are the list of media types recognized by CSS 2.1 ([CSS21], section 7.3).
Don't we need to require that the style sheet is applied or not based on the value of this attribute?
Name | Value | Initial value | Animatable |
---|---|---|---|
title | advisory-title | (none) | no |
(For compatibility with HTML 4 [HTML4].) This attribute specifies an advisory title for the ‘style’ element.
The Value columns in the tables above need updating to the new attribute value syntax.
The syntax of style data depends on the style sheet language.
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.
An example showing the ‘style’ element is provided above (see example).
Attribute definitions:
Should call into the HTML algorithm that parses a "set of space-separated tokens".
Should have an attribute definition table.
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:
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.
<!-- English messages --> <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> <!-- French messages --> <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>
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 { fill: green } text.warning { fill: yellow } text.error { fill: red }
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.
Attribute definitions:
Should add an attribute definition table and refer to css-syntax's algorithm to parse a declarations.
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.
An example showing the ‘style’ attribute is provided above (see example).
Need to ensure that all of the attributes you can put on HTML ‘style’ elements can be used here, such as ‘scope’.
Whether or not the user agent supports CSS, property inheritance in SVG follows the property inheritance rules defined in the CSS 2.1 specification. The normative definition for property inheritance is the Inheritance section of the CSS 2.1 specification ([CSS21], section 6.2).
How property inheritance works is defined completely by CSS. Probably most of this section can be removed, or at least condensed and turned into a note.
The definition of each property indicates whether the property can inherit the value of its parent.
In SVG, as in CSS 2.1, most elements inherit
computed values
([CSS21], 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
([CSS21], 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.
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:
Should mention SVG inline in HTML.
The content size properties specify the size of a CSS box.
These properties need more of a description. Why are they here?
These properties should be defined by reference to CSS, rather than repeating a bunch of information here.
Name: | width |
---|---|
Value: | <percentage> | <length> | auto |
Initial: | auto |
Applies to: | all elements but non-replaced inline elements, table rows, and row groups, in SVG: the ‘foreignObject’, ‘image’, ‘mask’, ‘rect’ and ‘svg’ elements |
Inherited: | no |
Percentages: | refer to width of containing block |
Media: | visual |
Computed value: | the percentage or 'auto' as specified or the absolute length |
Animatable: | yes |
Except for any additional information provided in this specification, the normative definition of the ‘width’ property is in CSS 2.1 ([CSS21], section 10.2).
Name: | height |
---|---|
Value: | <percentage> | <length> | auto |
Initial: | auto |
Applies to: | all elements but non-replaced inline elements, table columns, and column groups, in SVG: the ‘foreignObject’, ‘image’, ‘mask’, ‘rect’ and ‘svg’ elements |
Inherited: | no |
Percentages: | see prose |
Media: | visual |
Computed value: | the percentage or 'auto' (see prose under <percentage>) or the absolute length |
Animatable: | yes |
Except for any additional information provided in this specification, the normative definition of the ‘height’ property is in CSS 2.1 ([CSS21], section 10.5).
Is there a need to define 'auto' in more detail specifically for svg/foreignObject?
The user agent shall maintain a user agent style sheet ([CSS21], section 6.4) for elements in the SVG namespace for visual media ([CSS21], 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:
Why is visual media mentioned? The user agent style sheet
should just be applied as is, not effectively wrapped in a @media visual
rule.
svg, image, pattern { overflow: hidden }
Should this be for non-root svg elements only for web compat?
This needs to be reviewed. It should at least
use @namespace
to cause the rules to match only
SVG elements. attr(width)
won't do the right
thing if the ‘width’ attribute does
not use a unit. And what about when the attributes are being
animated? Presumably attr()
doesn't look at animated
values. Discussion.
(ACTION-3733 on Cameron)
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.)
interface SVGStyleElement : SVGElement { attribute DOMString type; attribute DOMString media; attribute DOMString title; }; SVGStyleElement implements LinkStyle;