78

Is there a way to render svg elements with crisp edges while still keeping anti-aliasing?

I'm creating a browser-based tool that works in modern browsers.

Playing around with the shape-rendering attribute doesn't give me the results I'm looking for.

I want my elements to have nice anti-aliasing so that the paths look smooth like below with shape-rendering: auto:

enter image description here

But I also want elements that don't require anti-aliasing, like the start box to look sharp and crisp, such as when rendered with shape-rendering: crispEdges:

enter image description here

Is this possible? Am I looking to have my cake and eat it too?

3

3 Answers 3

84

Perhaps you set shape-rendering property for root svg element.
You should set shape-rendering property for each shape elements, like this.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
        fill="none" stroke="black"/>
    <path d="M80,30l100,100" shape-rendering="optimizeQuality" 
        stroke="black" stroke-width="5"/>
</svg>
7
  • 2
    Well, do I feel stupid now. I was under the incorrect impression that the shape-rendering property was only allowed on the root svg element. Need to read the docs (that I linked to) better... Thanks @defghi1977
    – brice
    Mar 4, 2014 at 12:54
  • 1
    I'm still getting serious problems when zooming in and out with crispEdges. when the scale is small, some edges of my rectangles disappear and reappear at a different zoom level. That's another question though.
    – brice
    Mar 4, 2014 at 12:59
  • If you ignore IE, try vector-effect property. w3.org/TR/SVG2/painting.html#NonScalingStroke Or Try switch shape-rendering from crispEdges to optimizeQuality by javascript or mediaquery.
    – defghi1977
    Mar 4, 2014 at 13:05
  • 30
    The only allowed values for the shape-rendering attribute are: auto | optimizeSpeed | crispEdges | geometricPrecision. Only the color-rendering property allows optimizeQuality.
    – Parker
    Oct 2, 2015 at 13:27
  • 1
    @defghi1977 is shape-rendering="crispEdges" is supported in IE 11? Dec 4, 2017 at 11:36
29

If you want your boxes to appear sharp without any blurring due to antialiasing, and without using crispEdges mode, make sure the line edges are on pixel boundaries. So, for example, if your lines are an odd number of pixels wide, give them coordinates that are at 0.5 of a pixel.

<rect x="10.5" y="10.5" width="150" height="20" 
    stroke-width="1px" fill="none" stroke="black"/>

And on the boundary if the stroke width is even.

<rect x="10" y="10" width="150" height="20" 
    stroke-width="2px" fill="none" stroke="black"/>

Of course, this only really works if your SVG is being rendered at 1:1. That is, it's not being rescaled by the browser. And only for lines that are horizontal and vertical.

1
  • That's a good tip. I never thought about doing something like that
    – brice
    Mar 4, 2014 at 12:52
13

[I'm posting this as an answer rather than a comment, because I want to post a picture. Otherwise, this is a comment on the useful post by @defghi1977 . +1 to him, by the way.]

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="150" height="20" shape-rendering="crispEdges" 
          fill="none" stroke="black" />
    <rect x="10" y="50" width="150" height="20" shape-rendering="auto" 
          fill="none" stroke="black" />
    <path d="M40,30l100,100" shape-rendering="crispEdges" 
          stroke="black" stroke-width="5" />
    <path d="M80,30l100,100" shape-rendering="auto" 
          stroke="black" stroke-width="5" />
</svg>

Produced

enter image description here

This was rendered by Firefox 38.0.5 .
In Internet Explorer 11, both shape-rendering setting produces the same result with anti-aliasing and not crisp.

3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.