mozilla

Revision 427051 of text-rendering

  • Revision slug: Web/SVG/Attribute/text-rendering
  • Revision title: text-rendering
  • Revision id: 427051
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment 2 words added, 2 words removedSVG/Attribute/text-rendering Web/SVG/Attribute/text-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 text. The text-rendering attribute provides these hints.

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

Usage context

Categories Presentation attribute
Value auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
auto
Indicates that the browser shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.
optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause some browsers to turn off text anti-aliasing.
optimizeLegibility
Indicates that the browser shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.
geometricPrecision
Indicates that the browser shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

Example

Elements

The following elements can use the text-rendering attribute

  • {{ SVGElement("text") }}

See also

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

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 text. The <code>text-rendering</code> attribute provides these hints.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("text-rendering","CSS text-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 | optimizeLegibility | 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/SVG/painting.html#TextRenderingProperty" title="http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>auto</dt> <dd>Indicates that the browser shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.</dd> <dt>optimizeSpeed</dt> <dd>Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause some browsers to turn off text anti-aliasing.</dd> <dt>optimizeLegibility</dt> <dd>Indicates that the browser shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.</dd> <dt>geometricPrecision</dt> <dd>Indicates that the browser shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>text-rendering</code> attribute</p>
<ul> <li>{{ SVGElement("text") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("text-rendering","CSS text-rendering") }}</li>
</ul>
Revert to this revision