text-rendering

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

The text-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering text.

Note: As a presentation attribute, text-rendering can be used as a CSS property. See the CSS text-rendering property for more information.

You can use this attribute with the following SVG elements:

Example

html
<svg viewBox="0 0 140 40" xmlns="http://www.w3.org/2000/svg">
  <text y="15" text-rendering="geometricPrecision">Geometric precision</text>
  <text y="35" text-rendering="optimizeLegibility">Optimized legibility</text>
</svg>

Usage notes

Value auto | optimizeSpeed | optimizeLegibility | geometricPrecision
Default value auto
Animatable discrete
auto

This value indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.

optimizeSpeed

This value indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause some user agents to turn off text anti-aliasing.

optimizeLegibility

This value indicates that the user agent 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

This value indicates that the user agent 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.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# TextRenderingProperty

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-rendering

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

See also