text-rendering

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:

<text>

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 # TextRendering

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android
`text-rendering`	4 ["This property is only supported on Windows and Linux.", "Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 114719, bug 51973, bug 55458, bug 149548."]	79 ["This property is only supported on Windows and Linux.", "Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 114719, bug 51973, bug 55458, bug 149548."]	1 ["This property is only supported on Windows and Linux.", "The `optimizeSpeed` option has no effect on Firefox 4 because the standard code for text rendering is already fast and there is not a faster code path at this time. See bug 595688 for details."]	15	5	18 ["This property is only supported on Windows and Linux.", "Initial versions had bugs on Windows and Linux that broke font substitution, small-caps, letter-spacing or caused text to overlap. See bug 114719, bug 51973, bug 55458, bug 149548."]	46	14	4.2	1.0 This property is only supported on Windows and Linux. Samsung Internet is not on Windows or Linux.	3 From version 3 to 4.3, there is a serious bug where `text-rendering: optimizeLegibility` causes custom web fonts to not render. This was fixed in version 4.4.

Example

Usage notes

Specifications

Browser compatibility

See also