Removing gap between two SVG paths without removing anti-aliasing

Question

I have two SVG paths that have a gap between them.

From reading through other questions (in particular this one) I understand this is because of the native anti-aliasing properties of SVGs.

So I added shapeRendering="crispEdges"

This does remove the gap. However it results in jagged edges because of the removal of anti-aliasing.

I've also tried the suggestion in this question to add crispEdges to the parent svg of the path and add shapeRendering="optimizeQuality" to the path but that didn't work.

How can I remove the gap AND keep the smooth edges of my svg path?

herrstrietzel · Answer

You could also mitigate this gap rendering effect by applying a subtle svg feMorphology dilate filter – resulting in slightly expanded strokes closing thin gaps between paths:

SVG feMorphology filter

svg {
  overflow: visible;
}

.chart path {
  filter: url(#outline);
}

path:hover {
  stroke: red;
}

But this approach will also introduce slightly rounded edges (you can see this effect on hover).
More importantly, svg filters are quite expensive with regards to rendering performance – rather negligible if you only display a few elements per page view.

Add concatenated background path

As suggested by @Robert Longson: you could also prepend a background path based on concatenated d path data.

This task could be achieved with a javaScript helper method cloning the first path and displaying the concatenated paths.

addBgPaths(".addBGPath");

function addBgPaths(selector) {
  let addPathSvgs = document.querySelectorAll(selector);
  addPathSvgs.forEach(function(svg) {
    let paths = document.querySelectorAll(".addBGPath path");
    let firstPath = paths[0];
    let firstPathCloned = firstPath.cloneNode();
    //cloned elements shouldn't have ids to avoid non unique ids
    firstPathCloned.removeAttribute("id");
    let dArr = [firstPath.getAttribute("d")];
    for (let i = 1; i < paths.length; i++) {
      let path = paths[i];
      let d = path.getAttribute("d");
      dArr.push(d);
    }
    firstPathCloned.setAttribute("d", dArr.join(" "));
    svg.insertBefore(firstPathCloned, svg.children[0]);
  });
}

If all your path segments have the same color, this is probably the most elegant solution.

But this approach will also introduce colored "halos" when segments use different stroke colors (example #3 compared to #4).

Chan De Hui · Answer

If you able to edit the svg in editor, you can overlap like this. The darker green is the intersection between two paths.

Overlapping

ksav · Answer

As a quick fix, you can make the ends overlap with stroke-linecap="square"

But ideally, you need to create a single path instead of two separate paths.

Removing gap between two SVG paths without removing anti-aliasing

3 Answers

SVG feMorphology filter

Add concatenated background path