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?
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>