Make Paths Contiguous in SVG

Question

I have an SVG that has some thick strokes, when these are removed gaps in the SVG are revealed, as so:

See gaps on the left hand side. Is there anyway to automatically, or quickly expand the paths so they "snap" to a neighbours border, thus removing the gaps?

Answer 1

If you want to correct the source data, then I'd suggest an algorithm that detects intersections, extracts matching sub-paths and then replaces one of the sub-paths with its twin.

If you simply want it to look the right way visually, you can use a filter to extract the white areas, recolor them blue and composite them back. That's pretty easy to do. Adjust the R G and B in the color matrix below to the rgb you want on a 0 to 1 scale (aka pure blue would be 0 0 1 and mid grey would be 0.5 0.5 0.5)

  <filter id="recolor-white" color-interpolation-filters="sRGB">
    <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
    <feComponentTransfer in="lumMap" result="highlightMask">
       <feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 0 0  0 0 0 0 0 0 0 0 1"/>
    </feComponentTransfer>

     <feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>

        <feColorMatrix in="highlights" result="bluepatch" type="matrix" values="0 0 0 0 R
                                                             0 0 0 0 G
                                                             0 0 0 0 B
                                                             0 0 0 1 0"/>

  <feComposite operator="over" in="bluepatch" in2="SourceGraphic" result="final"/>

</filter>