previous   next   contents   elements   attributes   properties   index  

15 February 2002

12 Color


Contents

12.1 Introduction

All SVG colors are specified in the sRGB color space (see [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 (see [ICC32]). 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. Note that 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', 'lighting-color' properties.

'color'
Value:   <color> | inherit
Initial:   depends on user agent
Applies to:   elements to which properties 'fill', 'stroke', 'stop-color', 'flood-color', 'lighting-color' apply
Inherited:   yes
Percentages:   N/A
Media:   visual
Animatable:   yes

Except for any additional information provided in this specification, the normative definition of the property is in [CSS2].


12.3 The 'solidColor' element 

<!ELEMENT solidColor (%descTitleMetadata;,(stop|animate|set|
                      animateTransform|animateColor|animateMotion|
                      %solidExt;)*)>
<!ATTLIST solidColor 
  %stdAttrs;
  class %ClassList; #IMPLIED
  style %StyleSheet; #IMPLIED
  %PresentationAttributes-SolidColor;>
Attributes defined elsewhere:
%stdAttrs;, %PresentationAttributes-SolidColor;, class, style.

The 'solid-color' property indicates what color to use for this 'solidColor' element. The keyword currentColor and ICC colors can be specified in the same manner as within a <paint> specification for the 'fill' and 'stroke' properties.

'solid-color'
Value:   currentColor |
<color> [icc-color(<name>[,<icccolorvalue>]*)] |
inherit
Initial:   black
Applies to:   'solidColor' elements
Inherited:   no
Percentages:   N/A
Media:   visual
Animatable:   yes

The 'solid-opacity' property defines the opacity of a given solid color.

'solid-opacity'
Value:   <alphavalue> | inherit
Initial:   1
Applies to:   'solidColor' elements
Inherited:   no
Percentages:   N/A
Media:   visual
Animatable:   yes



12.4 Color profile descriptions


12.4.1 Overview of color profile descriptions

The International Color Consortium has established a standard, the ICC Profile [ICC32], 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.4.2 Alternative ways for defining a color profile description

Color profile descriptions can be specified in either of the following ways:

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.4.3 The 'color-profile' element 

<!ELEMENT color-profile (%descTitleMetadata;) >
<!ATTLIST color-profile 
  %stdAttrs;
  %xlinkRefAttrs;
  xlink:href %URI; #IMPLIED
  local CDATA #IMPLIED  
  name CDATA #REQUIRED
  rendering-intent (auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric) "auto" >

Attribute definitions:

xlink:href = "<uri>"
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, 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.
Attributes defined elsewhere:
%stdAttrs;, %xlinkRefAttrs;.

12.4.4 @color-profile when using CSS styling

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' (Descriptor)
Values: sRGB | <local-profile> | <uri> | (<local-profile> <uri>) | inherit
Initial: sRGB
Media: visual
sRGB
The source profile is the sRGB color space. For consistency with CSS lexical scanning and parsing rules, 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.)
<uri>
The source profile is a URI reference to a color profile.
(<local-profile> <uri>)
Two profiles are specified. If <local-profile> cannot be found on the local system, then the <uri> is used.
'name' (Descriptor)
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' (Descriptor)
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.4.5 'color-profile' property

 

'color-profile'
Value:   auto | sRGB | <name> | <uri> | 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, 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.
<uri>
A URI reference to the source color profile. The referenced color profile overrides an embedded profile inside the image.


12.5 Full Color Module

Elements Attributes Content Model
solidColor StdAttrs, StyleAttrs, ColorPresentationAttributes, solid-color, solid-opacity (DescriptionElements | AnimationElements)*
color-profile StdAttrs, XLinkRefAttrs, xlink:href, local, name, rendering-intent (DescriptionElements)*

12.5.1 Full Color Content Set

The Full Color Module defines the ColorElements content set.

Content Set Name Elements in Content Set
ColorElements solidColor, color-profile

12.5.2 Full Color Attribute Set

The Full Color Module defines the ColorPresentationAttrs attribute set.

Collection Name Attributes in Collection
ColorPresentationAttributes color, color-interpolation, color-rendering

12.6 Tiny Color Module

The Tiny Color Module defines identical elements to the Full Color Module. It also defines the same value for the ColorElements content set.

12.6.1 Tiny Color Attribute Set

The Tiny Color Module defines the ColorPresentationAttrs attribute set

Collection Name Attributes in Collection
ColorPresentationAttributes color

12.7 DOM interfaces

The following interfaces are defined below: SVGColorProfileElement, SVGColorProfileRule.


Interface SVGColorProfileElement

The SVGColorProfileElement interface corresponds to the 'color-profile' element.


IDL Definition 
interface SVGColorProfileElement : 
                SVGElement,
                SVGURIReference,
                SVGRenderingIntent { 

           attribute DOMString      local;
                       // raises DOMException on setting
           attribute DOMString      name;
                       // raises DOMException on setting
           attribute unsigned short renderingIntent;
                       // raises DOMException on setting
};

Attributes
DOMString local
Corresponds to attribute local on the given element.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
DOMString name
Corresponds to attribute name on the given element.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
unsigned short renderingIntent
Corresponds to attribute rendering-intent on the given element. The type of rendering intent, identified by one of the SVGRenderingIntent constants.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

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.


IDL Definition 
interface SVGColorProfileRule : 
                SVGCSSRule,
                SVGRenderingIntent { 

           attribute DOMString      src;
                       // raises DOMException on setting
           attribute DOMString      name;
                       // raises DOMException on setting
           attribute unsigned short renderingIntent;
                       // raises DOMException on setting
};

Attributes
DOMString src
Corresponds to property src within an @color-profile rule.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
DOMString name
Corresponds to property name within an @color-profile rule.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.
unsigned short renderingIntent
The type of rendering intent, identified by one of the SVGRenderingIntent constants.
Exceptions on setting
DOMException
NO_MODIFICATION_ALLOWED_ERR: Raised on an attempt to change the value of a readonly attribute.

previous   next   contents   elements   attributes   properties   index