1

Svg shapes other than text are affected by the shape-rendering attribute which can be set to the crispEdges value (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering). This value seems to turn anti-aliasing off.

But text is only affected by text-rendering. However, this does not provide the crispEdges value (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering). Why? Is there another way to get non-anti-alias?

Daniel
  • 3,383
  • 4
  • 30
  • 61
  • optimizeSpeed is the nearest thing. That might or might not work though. – Robert Longson Feb 16 '16 at 14:05
  • Thanks Robert. I can't tell any difference with optimizeSpeed from the other options concerning text-rendering. I don't know why there is no anti-alias (or crispEdge) option for text. But I already saw that the W3C document is rather vague even on crispEdges "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". I guess an non-anti-aliasing option is not really an aim. – Daniel Feb 16 '16 at 15:30
  • I am not sure whether I am misunderstanding you here, but on *non-text* svg elements Firefox seems to turn off anti-alias with `crispEdges`: http://codepen.io/anon/pen/mVgmmO. Same works on Chrome. – Daniel Feb 17 '16 at 11:09
  • I was talking specifically about text elements in my comments (since that's what the question is about). Most UAs ignore all text-rendering options. Firefox for example does something slightly different with geometricPrecision but treats all the other options the same as auto. Hope that's clearer. – Robert Longson Feb 17 '16 at 11:10
  • I already wondered. I was taking it for granted that text elements don't support crispEdges since it is not even in the specs. – Daniel Feb 17 '16 at 11:13

1 Answers1

5

For really crisp edges, you can use a filter to posterize your text.

<svg width="400px" height="400px">
<defs>
<filter id="crispify">
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 1"/>
</feComponentTransfer>
</filter>
</defs>

<text filter="url(#crispify)" font-size="60"  y="60" >Some crispy text</text>
</svg>
Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Great. Thanks Michael. Seems to work as intended. I think this should be available by default on SVGs as some kind of "anti-alias" option. – Daniel Feb 19 '16 at 08:11