Menu
IE9 appears not to honour the SVG shape-rendering="crispEdges" attribute.
Here's a sample SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg" height="600" id="svgroot" version="1.1" width="800" x="0" y="0">
<line style="stroke:#000000;stroke-width:1px;stroke-opacity:1" y2="300" y1="300" x2="750" x1="50" shape-rendering="crispEdges" />
</svg>
It appears correctly under Firefox and Safari, however the line appears blured under IE9 and IE10 (Platform preview)
Is there some workaround to disable the anti-aliasing in IE9?
Thanks!
486
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.
Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.
You should be able to just shift the line 0.5 "pixels" vertically instead of using shape-rendering. That way the line will look sharp in all non-IE browsers at least.
<svg xmlns="http://www.w3.org/2000/svg" height="600" width="800">
<line style="stroke:#000" y2="300.5" y1="300.5" x2="750" x1="50" />
</svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
