espadrine/gh-badges — pull request #6 by alrra (2014-01-03 00:07:04+00:00)
Title: Inform browsers on how to optimize text rendering

The `text-rendering` svg property provides a hint to the user agent about how to optimize its text rendering.

In this particular case, the value specified for the `text-rendering` property is `geometricPrecision`, indicating that the user agent should emphasize geometric precision over legibility and rendering speed.

This is done because certain aspects of fonts — such as kerning — don't scale linearly:

* In SVG, when text is scaled up or down, browsers calculate the final size of the text (which is the specified font size and the applied scale) and request a font of that computed size from the platform's font system. However, if a user requests a font size of, say, 9 with a scale of 140%, the resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead. This results in stair-step scaling of text.

If `geometricPrecision` is fully supported by the rendering engine, it will allow users to scale text fluidly, making the text look good.

References:

* http://www.w3.org/TR/SVG/painting.html#TextRenderingProperty
* https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

See also:

* espadrine/gh-badges#5