How to Render Svg Elements with Crisp Edges While Still Keeping Anti-Aliasing

How to render svg elements with crisp edges while still keeping anti-aliasing?

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>

Rendering SVG shapes with crisp edges in IE9

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>

Remove browser anti-aliasing on .svg image

Add shape-rendering="crispEdges" to the shapes. You can do this via CSS too e.g.

* {
  shape-rendering: crispEdges;
}

Turn off anti-aliasing of bitmap images embedded in SVG images

shape-rendering is for shapes i.e. lines and circles. Images have their own property image-rendering. You need something like this...

    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;

HTML5 SVG anti-aliasing causes grey line between paths. How to avoid it?

I'm not sure why you are seeing the line using clip paths, but if I just change it around to using regular polygons and use shape-rendering: crispEdges the line doesn't appear:

<svg width="100" height="100" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <polygon points="0,0 100,0 100,100" style="fill:black;shape-rendering:crispEdges;" />
    <polygon points="0,0 100,100 0,100" style="fill:black;shape-rendering:crispEdges;" />
</svg>

Where a low quality SVG mask shows jagged edges, is there any way to fix using anti-aliasing?

The reason you are seeing that "jagged edge" dark outline is due to the way you've done your SVG. You are stacking two copies of the black text path on top of themselves. Then you are putting the red water animation on top of those.

Your SVG looks like this:

<svg>
   <path with QURE (black)>
   <use that path again (black)>
   <water animation (red) using that path as a mask>
</svg>

You have three antialiased elements stacked directly on top of one another. Two of them black and one of them red. So on the edges of the shapes you are getting a mix of black and red semi-transparent pixels.

You can improve the look a lot by putting that first <path> definition in a <defs> section so it doesn't get rendered.

That leaves you with this arrangement:

<svg>
   <use path with QURE shape (black)>
   <water animation (red) using that path as a mask>
</svg>

That helps, but still leaves a mix of black and red pixels on the edge of the shapes. You can improve the look even more by not drawing the black text behind the red animation.

The best results will be achieved by having the following sort of arrangement:

<svg>
  <g with QURE mask>
    <black rectangle background>
    <water animation (red)>
  </g>
</svg>

With this arrangement we are applying the mask only once to the combined black and red water animation. So you should get no black jaggy border because there is now only one set of anti-alias pixels.

Demo codepen with these changes applied.

SVG rendering issues in chrome for tiny elements

Add shape-rendering="crispEdges" to your svg eleement. Chrome makes different anti-aliasing choices for drawing than Firefox/Safari - so very small features can get anti-aliased out. You can remove anti-aliasing with crispEdges and then they (generally) all look the same - at the cost of some pixelation.

Avoiding the aliasing / thin bleed between touching elements

You could use a mask instead of a clip-path, since masks allow using the stroke to define the masked area.

<mask id="strokemask" maskContentUnits="objectBoundingBox" 
      x="0" y="0" width="100%" height="100%">
  <circle cx="0.5" cy="0.5" r="0.1" stroke="white" fill="white" 
          stroke-width="0.02"/>
  <circle cx="0.5" cy="0.5" r="0.15" stroke="white" fill="none" 
          stroke-width="0.03"/>
  <circle cx="0.5" cy="0.5" r="0.22" stroke="white" fill="none" 
          stroke-width="0.05"/>
  <circle cx="0.5" cy="0.5" r="0.3" stroke="white" fill="none" 
          stroke-width="0.06"/>
</mask>

Here's a live example of an animated mask that uses some stroked circles.

---

Related Topics