Color Profile - SVG 1.1 (Second Edition)
Có thể bạn quan tâm
Contents
- 12.1 Introduction
- 12.2 The ‘color’ property
- 12.3 Color profile descriptions
- 12.3.1 Overview of color profile descriptions
- 12.3.2 Alternative ways of defining a color profile description
- 12.3.3 The ‘color-profile’ element
- 12.3.4 The CSS @color-profile rule
- 12.3.5 The ‘color-profile’ property
- 12.4 DOM interfaces
- 12.4.1 Interface SVGColorProfileElement
- 12.4.2 Interface SVGColorProfileRule
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.
‘color’| Value: | <color> | inherit |
| Initial: | depends on user agent |
| Applies to: | elements to which properties ‘fill’, ‘stroke’, ‘stop-color’, ‘flood-color’ and ‘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 ([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:NoneContent model:Any number of the following elements, in any order:- descriptive elements — ‘desc’, ‘metadata’, ‘title’
- core attributes — ‘id’, ‘xml:base’, ‘xml:lang’, ‘xml:space’
- xlink attributes — ‘xlink:href’, ‘xlink:show’, ‘xlink:actuate’, ‘xlink:type’, ‘xlink:role’, ‘xlink:arcrole’, ‘xlink:title’
- ‘local’
- ‘name’
- ‘rendering-intent’
- ‘xlink:href’
- SVGColorProfileElement
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:
autoThis 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.perceptualThis 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.saturationPreserves 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-colorimetricLeaves 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-colorimetricDisables 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 |
| Values: | <name> |
| Initial: | undefined |
| Media: | visual |
| 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 |
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; };Attributes: local (DOMString) Corresponds to attribute ‘local’ on the given element. name (DOMString) Corresponds to attribute ‘name’ on the given element. renderingIntent (unsigned short) Corresponds to attribute ‘rendering-intent’ on the given element. The value of this attribute is the value of the the RENDERING_INTENT_* constant defined on SVGRenderingIntent that corresponds to the value of the ‘rendering-intent’ attribute.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); };Attributes: src (DOMString) Corresponds to descriptor src within an @color-profile rule. Exceptions on settingDOMException, 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. Exceptions on settingDOMException, code NO_MODIFICATION_ALLOWED_ERR Raised on an attempt to change the value of a read only attribute. renderingIntent (unsigned short) The type of rendering intent, identified by one of the SVGRenderingIntent constants. Exceptions on settingDOMException, code NO_MODIFICATION_ALLOWED_ERR Raised on an attempt to change the value of a read only attribute. SVG 1.1 (Second Edition) – 16 August 2011Top ⋅ Contents ⋅ Previous ⋅ Next ⋅ Elements ⋅ Attributes ⋅ PropertiesTừ khóa » Html Svg File Color
-
How To Change The Color Of An Svg Element? - Stack Overflow
-
Change Color Of SVG On Hover - CSS-Tricks
-
Color - SVG: Scalable Vector Graphics - MDN Web Docs
-
Fills And Strokes - SVG: Scalable Vector Graphics - MDN Web Docs
-
How To Change Color Of SVG (Various Ways Using CSS)
-
SVG Color | How To Work With Fill Color And Stroke Color?
-
How To Change SVG Color ? - GeeksforGeeks
-
HTML SVG Graphics - W3Schools
-
Fill - Tailwind CSS
-
How To Change Svg Color Using Css?
-
How To Change SVG Colors [Elementor Tutorial] - YouTube
-
Change Color Svg Html Code Example - Code Grepper
-
How To Change Color Of Svg In Css?
-
How To Change SVG Colors With CSS - YourIllust