MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 426963 of shape-rendering

  • Revision slug: Web/SVG/Attribute/shape-rendering
  • Revision title: shape-rendering
  • Revision id: 426963
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment 240 words added, 8 words removedSVG/Attribute/shape-rendering Web/SVG/Attribute/shape-rendering

Revision Content

« SVG Attribute reference home

The creator of SVG content might want to provide a hint about what tradeoffs to make as the browser renders {{ SVGElement("path") }} element or basic shapes. The shape-rendering attribute provides these hints.

Usage context

Categories Presentation attribute
Value auto | optimizeSpeed | crispEdges | geometricPrecision | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.
crispEdges
Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.
geometricPrecision
Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.

Example

Elements

The following elements can use the shape-rendering attribute

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The creator of SVG content might want to provide a hint about what tradeoffs to make as the browser renders {{ SVGElement("path") }} element or basic shapes. The <code>shape-rendering</code> attribute provides these hints.</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 | crispEdges | geometricPrecision | 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#ShapeRenderingProperty" title="http://www.w3.org/TR/SVG11/painting.html#ShapeRenderingProperty">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, crisp edges and geometric precision, but with geometric precision given more importance than speed and crisp edges.</dd> <dt>optimizeSpeed</dt> <dd>Indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. This option will sometimes cause the user agent to turn off shape anti-aliasing.</dd> <dt>crispEdges</dt> <dd>Indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels.</dd> <dt>geometricPrecision</dt> <dd>Indicates that the user agent shall emphasize geometric precision over speed and crisp edges.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>shape-rendering</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Shape" title="en/SVG/Element#Shape">Shape elements</a> »</li>
</ul>
Revert to this revision