mozilla

Revision 2587 of image-rendering

  • Revision slug: SVG/Attribute/image-rendering
  • Revision title: image-rendering
  • Revision id: 2587
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 141 words added

Revision Content

« SVG Attribute reference home

The image-rendering attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("image-rendering","CSS image-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.
optimizeQuality
Indicates that the user agent shall emphasize quality over rendering speed.

Example

Elements

The following elements can use the image-rendering attribute

  • {{ SVGElement("image") }}

See also

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

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>image-rendering</code> attribute provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.<br> <br> As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("image-rendering","CSS image-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#ImageRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ImageRenderingProperty">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.</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>image-rendering</code> attribute</p>
<ul> <li>{{ SVGElement("image") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("image-rendering","CSS image-rendering") }}</li>
</ul>
Revert to this revision