How do I get "crispEdges" for SVG text?
Svg forms other than text depend on an attribute shape-rendering
that can be set to a value crispEdges
( https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering ) This value seems to be disables anti-aliasing.
But the text only affects text-rendering
. However, this does not provide value crispEdges
( https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-rendering ). What for? Is there any other way to get a non-alias?
+2
source to share
1 answer
For really crisp edges, you can use a filter to insert 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>
+3
source to share