mozilla

Revision 426799 of color-rendering

  • Revision slug: Web/SVG/Attribute/color-rendering
  • Revision title: color-rendering
  • Revision id: 426799
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment page created, 221 words addedSVG/Attribute/color-rendering Web/SVG/Attribute/color-rendering

Revision Content

« SVG Attribute reference home

The color-rendering attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations.

color-rendering takes precedence over color-interpolation-filters. For example, assume color-rendering: optimizeSpeed and color-interpolation-filters: linearRGB. In this case, the SVG user agent should perform color operations in a way that optimizes performance, which might mean sacrificing the color interpolation precision as specified by color-interpolation-filters: linearRGB.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("color-rendering","CSS color-rendering") }} for further information

Usage context

Categories Presentation attribute
Value auto | optimizeSpeed | optimizeQuality | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over quality. For RGB display devices, this option will sometimes cause the user agent to perform color interpolation and compositing in the device RGB color space.
optimizeQuality
Indicates that the user agent shall emphasize quality over rendering speed.

Example

Elements

The following elements can use the color-rendering attribute

See also

  • {{ cssxref("color-rendering","CSS color-rendering") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>color-rendering</code> attribute provides a hint to the SVG user agent about how to optimize its color interpolation and compositing operations.<br> <br> <code>color-rendering</code> takes precedence over <code>color-interpolation-filters</code>. For example, assume <code>color-rendering: optimizeSpeed</code> and <code>color-interpolation-filters: linearRGB</code>. In this case, the SVG user agent should perform color operations in a way that optimizes performance, which might mean sacrificing the color interpolation precision as specified by <code>color-interpolation-filters: linearRGB</code>.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("color-rendering","CSS color-rendering") }} for further information</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong title="this is the default value">auto</strong> | optimizeSpeed | optimizeQuality | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#ColorRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ColorRenderingProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>auto</dt> <dd>Indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than speed.</dd> <dt>optimizeSpeed</dt> <dd>Indicates that the user agent shall emphasize rendering speed over quality. For RGB display devices, this option will sometimes cause the user agent to perform color interpolation and compositing in the device RGB color space.</dd> <dt>optimizeQuality</dt> <dd>Indicates that the user agent shall emphasize quality over rendering speed.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>color-rendering</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Container_elements" title="en/SVG/Element#Container_elements">Containers elements</a> »</li> <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li> <li>{{ SVGElement("animate") }}</li> <li>{{ SVGElement("animateColor") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("color-rendering","CSS color-rendering") }}</li>
</ul>
Revert to this revision