12 Color
Contents
12.1 Introduction
All SVG colors are specified in the sRGB color space
[SRGB]. At a minimum, SVG user
agents shall conform to the color behavior requirements specified in the
color units section
and the minimal gamma correction rules
defined in the CSS2 specification.
Additionally, SVG content can specify an alternate color specification
using an ICC profile [ICC42]
as described in Specifying paint.
If ICC-based colors are provided and the SVG user agent supports ICC color,
then the ICC-based color takes precedence over the sRGB color specification;
otherwise, the RGB fallback colors must be used.
Note that, in this specification, color interpolation occurs in an RGB color space even if an
ICC-based color specification is provided (see ‘color-interpolation’).
12.2 The ‘color’ property
The ‘color’ property is used to provide a potential indirect value
(currentColor) for the ‘fill’,
‘stroke’, ‘stop-color’, ‘flood-color’ and
‘lighting-color’ properties.
Except for any additional information provided in this
specification, the normative definition of the property
is in CSS2 ([CSS2], section 14.1).
12.3 Color profile descriptions
12.3.1 Overview of color profile descriptions
The International Color
Consortium has established a standard, the ICC Profile
[ICC42], for
documenting the color characteristics of input and output
devices. Using these profiles, it is possible to build a
transform and correct visual data for viewing on different
devices.
A color profile description
provides the bridge between an ICC profile and references to
that ICC profile within SVG content. The color profile
description is added to the user agent's list of known color
profiles and then used to select the relevant profile. The
color profile description contains descriptors for the location
of the color profile on the Web, a name to reference the
profile and information about rendering intent.
12.3.2 Alternative ways of defining a color profile description
Color profile descriptions can be specified in either of the following ways:
- a ‘color-profile’ element
- an @color-profile rule within a CSS style sheet (only
applicable for user agents which support using CSS to style the SVG
content [CSS2])
If a color profile with the same name value has
been identified by both a ‘color-profile’ element and
@color-profile rules within a CSS style sheet, then
the user agent shall first attempt to locate the profile by
using the specifications in the @color-profile rules
first.
12.3.3 The ‘color-profile’ element
‘color-profile’
- Categories:
- None
- Content model:
- Any number of the following elements, in any order:
- Attributes:
- DOM Interfaces:
Attribute definitions:
- xlink:href = "<iri>"
- The location of an ICC profile resource.
Animatable:
no. - local = "<string>"
- The unique ID for a locally stored color profile.
<string> is the profile's unique ID as specified by
International Color
Consortium. If both the ‘xlink:href’ and the ‘local’
attributes are specified,
then the user agent shall search the local system for the
locally stored color profile first, and, if not available
locally, then attempt to use the resource identified by the
‘xlink:href’ attribute. (Note:
Profile description fields do not represent a
profile's unique ID. With current ICC proposals, the
profile's unique ID is an MD5-encoded value within the
profile header.)
Animatable:
no. - name = "<name>"
- The name which is used as the first parameter for icc-color specifications within
‘fill’, ‘stroke’, ‘stop-color’,
‘flood-color’ and ‘lighting-color’ property
values to identify the color profile to use for the ICC
color specification and the name which can be the value of
the ‘color-profile’ property. Note
that if <name> is not provided, it will be impossible
to reference the given color profile description. The name
"sRGB" is predefined; any color profile descriptions with
<name> set to "sRGB"
will be ignored. For consistency with CSS
lexical scanning and parsing rules
([CSS2], section D.2), the keyword "sRGB"
is case-insensitive; however, it is recommended that the
mixed capitalization "sRGB" be used for consistency with
common industry practice.
Animatable:
no. - rendering-intent = "auto | perceptual |
relative-colorimetric | saturation |
absolute-colorimetric"
-
‘rendering-intent’
permits the specification of a color profile rendering
intent other than the default. ‘rendering-intent’ is applicable
primarily to color profiles corresponding to CMYK color
spaces. The different options cause different methods to
be used for translating colors to the color gamut of the
target rendering device:
- auto
- This is the default behavior. The user agent
determines the best intent based on the content type.
For image content containing an embedded profile, it
shall be assumed that the intent specified within the
profile is the desired intent. Otherwise, the user
agent shall use the current profile and force the
intent, overriding any intent that might be stored in
the profile itself.
- perceptual
- This method, often the preferred choice for images,
preserves the relationship between colors. It attempts
to maintain relative color values among the pixels as
they are mapped to the target device gamut. Sometimes
pixel values that were originally within the target
device gamut are changed in order to avoid hue shifts
and discontinuities and to preserve as much as possible
the overall appearance of the scene.
- saturation
- Preserves the relative saturation (chroma) values
of the original pixels. Out of gamut colors are
converted to colors that have the same saturation but
fall just inside the gamut.
- relative-colorimetric
- Leaves colors that fall inside the gamut unchanged.
This method usually converts out of gamut colors to
colors that have the same lightness but fall just
inside the gamut.
- absolute-colorimetric
- Disables white point matching when converting
colors. This option is generally not recommended.
Animatable: no.
12.3.4 The CSS @color-profile rule
When the document is styled using CSS, the
@color-profile rule can be used to specify a color
profile description. The general form is:
@color-profile { <color-profile-description> }
where the <color-profile-description> has the form:
descriptor: value;
[...]
descriptor: value;
Each @color-profile rule specifies a value for every color
profile descriptor, either implicitly or explicitly. Those not
given explicit values in the rule take the initial value listed
with each descriptor in this specification. These descriptors
apply solely within the context of the @color-profile rule in
which they are defined, and do not apply to document language
elements. Thus, there is no notion of which elements the
descriptors apply to, or whether the values are inherited by
child elements.
The following are the descriptors for a <color-profile-description>:
- ‘src’
-
| Values: | sRGB | <local-profile> | <iri> |
(<local-profile> <iri>) |
inherit |
| Initial: | sRGB |
| Media: | visual |
- sRGB
- The source profile is the sRGB color space. For
consistency with
CSS lexical scanning and parsing rules
([CSS2], section D.2), the keyword "sRGB" is
case-insensitive; however, it is recommended that the mixed
capitalization "sRGB" be used for consistency with common
industry practice.
- <local-profile>
-
The source profile is a locally-stored profile. The syntax
for <local-profile> is:
"local(" + <string> + ")"
where <string> is the profile's unique ID as
specified by International
Color Consortium. (Note: Profile description fields do
not represent a profile's unique ID. With current
ICC proposals, the profile's unique ID is an MD5-encoded
value within the profile header.)
- <iri>
- The source profile is a IRI reference
to a color profile.
- (<local-profile> <iri>)
- Two profiles are specified. If <local-profile>
cannot be found on the local system, then the <iri> is used.
- ‘name’
-
| Values: | <name> |
| Initial: | undefined |
| Media: | visual |
- <name>
- See the description for the ‘name’ attribute on the
‘color-profile’ element. Note that if <name> is not
provided, it will be impossible to reference the given @color-profile
definition.
- ‘rendering-intent’
-
| Values: | auto | perceptual | relative-colorimetric |
saturation | absolute-colorimetric |
| Initial: | auto |
| Media: | visual |
| Animatable: | no |
See the description for the ‘rendering-intent’ attribute on the
‘color-profile’ element.
12.3.5 The ‘color-profile’ property
- ‘color-profile’
-
| Value: | auto | sRGB | <name> | <iri> |
inherit |
| Initial: | auto |
| Applies to: | ‘image’ elements that
refer to raster images |
| Inherited: | yes |
| Percentages: | N/A |
| Media: | visual |
| Animatable: | yes |
- auto
- This is the default behavior. All colors are presumed to
be defined in the sRGB color space unless a more precise
embedded profile is specified within content data. For images
that do have a profile built into their data, that profile is
used. For images that do not have a profile, the sRGB profile
is used.
- sRGB
- The source profile is assumed to be sRGB. This differs
from auto in that it overrides an embedded profile inside an
image.
For consistency with CSS lexical scanning and parsing rules
([CSS2], section D.2), the keyword "sRGB" is
case-insensitive; however, it is recommended that the mixed
capitalization "sRGB" be used for consistency with common
industry practice. - <name>
- A name corresponding to a defined color profile that is
in the user agent's color profile description database. The
user agent searches the color profile description database
for a color
profile description entry whose name descriptor matches
<name> and uses the last matching entry that is found.
If a match is found, the corresponding profile overrides an
embedded profile inside an image. If no match is found, then
the embedded profile inside the image is used.
- <iri>
- A IRI
reference to the source color profile. The referenced
color profile overrides an embedded profile inside the
image.
12.4 DOM interfaces
12.4.1 Interface SVGColorProfileElement
The SVGColorProfileElement interface corresponds to the
‘color-profile’ element.
interface SVGColorProfileElement : SVGElement,
SVGURIReference,
SVGRenderingIntent {
attribute DOMString local;
attribute DOMString name;
attribute unsigned short renderingIntent;
};
- local (DOMString)
Corresponds to attribute
‘local’ on the given element.
- name (DOMString)
Corresponds to attribute
‘name’ on the given element.
- renderingIntent (unsigned short)
12.4.2 Interface SVGColorProfileRule
The SVGColorProfileRule interface represents an @color-profile
rule in a CSS style sheet. An @color-profile rule identifies a ICC
profile which can be referenced within a given document.
Support for the SVGColorProfileRule interface is only required
in user agents that support styling with CSS.
interface SVGColorProfileRule : SVGCSSRule,
SVGRenderingIntent {
attribute DOMString src setraises(DOMException);
attribute DOMString name setraises(DOMException);
attribute unsigned short renderingIntent setraises(DOMException);
};
- src (DOMString)
Corresponds to descriptor src within an
@color-profile rule.
- DOMException, code NO_MODIFICATION_ALLOWED_ERR
- Raised on an attempt
to change the value of a read only attribute.
- name (DOMString)
Corresponds to descriptor ‘name’ within an
@color-profile rule.
- DOMException, code NO_MODIFICATION_ALLOWED_ERR
- Raised on an attempt
to change the value of a read only attribute.
- renderingIntent (unsigned short)
- DOMException, code NO_MODIFICATION_ALLOWED_ERR
- Raised on an attempt
to change the value of a read only attribute.