mozilla

Revision 415713 of color-interpolation

  • Revision slug: SVG/Attribute/color-interpolation
  • Revision title: color-interpolation
  • Revision id: 415713
  • Created:
  • Creator: vim-chhetri
  • Is current revision? No
  • Comment

Revision Content

« SVG Attribute reference home

The color-interpolation attribute specifies the color space for gradient interpolations, color animations and alpha compositing.

When a child element is blended into a background, the value of the color-interpolation attribute on the child determines the type of blending, not the value of the color-interpolation on the parent. For gradients which make use of the {{ SVGAttr("xlink:href") }} attribute to reference another gradient, the gradient uses the color-interpolation attribute value from the gradient element which is directly referenced by the {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute. When animating colors, color interpolation is performed according to the value of the color-interpolation attribute on the element being animated.

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

Usage context

Categories Presentation attribute
Value auto | sRGB | linearRGB | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
auto
Indicates that the user agent can choose either the sRGB or linearRGB spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.
sRGB
Indicates that color interpolation should occur in the sRGB color space.
linearRGB
Indicates that color interpolation should occur in the linearized RGB color space as described in the sRGB specification.

Example

Elements

The following elements can use the color-interpolation attribute

See also

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

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>color-interpolation</code> attribute specifies the color space for gradient interpolations, color animations and alpha compositing.<br />
  <br />
  When a child element is blended into a background, the value of the <code>color-interpolation</code> attribute on the child determines the type of blending, not the value of the <code>color-interpolation</code> on the parent. For gradients which make use of the {{ SVGAttr("xlink:href") }} attribute to reference another gradient, the gradient uses the <code>color-interpolation</code> attribute value from the gradient element which is directly referenced by the {{ SVGAttr("fill") }} or {{ SVGAttr("stroke") }} attribute. When animating colors, color interpolation is performed according to the value of the <code>color-interpolation</code> attribute on the element being animated.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("color-interpolation","CSS color-interpolation") }} 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>auto | <strong title="this is the default value">sRGB</strong> | linearRGB | 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#ColorInterpolationProperty" title="http://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty">SVG 1.1 (2nd Edition)</a></td>
    </tr>
  </tbody>
</table>
<dl>
  <dt>
    auto</dt>
  <dd>
    Indicates that the user agent can choose either the <code>sRGB</code> or <code>linearRGB</code> spaces for color interpolation. This option indicates that the author doesn't require that color interpolation occur in a particular color space.</dd>
  <dt>
    sRGB</dt>
  <dd>
    Indicates that color interpolation should occur in the sRGB color space.</dd>
  <dt>
    linearRGB</dt>
  <dd>
    Indicates that color interpolation should occur in the linearized RGB color space as described in <a class="external" href="http://webstore.iec.ch/webstore/webstore.nsf/artnum/025408">the sRGB specification</a>.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>color-interpolation</code> attribute</p>
<ul>
  <li><a href="/en/SVG/Element#Container_elements" title="en/SVG/Element#Container_elements">Containers elements</a>&nbsp;»</li>
  <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a>&nbsp;»</li>
  <li>{{ SVGElement("animate") }}</li>
  <li>{{ SVGElement("animateColor") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ cssxref("color-interpolation","CSS color-interpolation") }}</li>
</ul>
Revert to this revision