SVG: Prevent transparent gaps between adjacent polygons

Question

Consider the following small SVG showing two adjacent triangles:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" version="1.1">
   <polygon points="10,0  60,0  35,50" style="fill:#cc4444;"/>
   <polygon points="35,50 85,50 60,0" style="fill:#cc3333;"/>
</svg>

This renders as follows in my browser

Note the white line between the polygons. Although I understand that the used blending is the reason, this behavior is very annoying when you try to render for instance a mathematical surface like shown here.

What is the correct solution within SVG to close these gaps? One way would be to give the polygons a small stroke with the same color, but this seems more like a hack to me, and in graphics with a large number of polygons, it increases the file size notably.

Disconnected

Answer 1

Adding shape-rendering="crispEdges" to the <svg> tag should fix the problem, but will give you jagged edges everywhere. If that's a problem, you could try passing the drawing elements through a filter that just rasterizes the image. However, this doesn't completely fix the issue and might slow things down a bit, especially if you're animating the drawing. Your only other options are to add a stroke to your polygons like you suggested, or just make the polygons slightly larger so they overlap.

<!-- Standard SVG -->
<svg width="180" height="180" viewBox="0 0 180 180">
<g transform="translate(90,90)">
<path d="M0 0 0.00 -90.00 70.36 -56.11Z" fill="#323232" />
<path d="M0 0 70.36 -56.11 87.74 20.03Z" fill="#4b4b4b" />
<path d="M0 0 87.74 20.03 39.05 81.09Z" fill="#646464" />
<path d="M0 0 39.05 81.09 -39.05 81.09Z" fill="#7d7d7d" />
<path d="M0 0 -39.05 81.09 -87.74 20.03Z" fill="#969696" />
<path d="M0 0 -87.74 20.03 -70.36 -56.11Z" fill="#afafaf" />
<path d="M0 0 -70.36 -56.11 0.00 -90.00Z" fill="#c8c8c8" />
</g>
</svg>

<!-- Crisp edges -->
<svg width="180" height="180" viewBox="0 0 180 180" shape-rendering="crispEdges">
<g transform="translate(90,90)">
<path d="M0 0 0.00 -90.00 70.36 -56.11Z" fill="#323232" />
<path d="M0 0 70.36 -56.11 87.74 20.03Z" fill="#4b4b4b" />
<path d="M0 0 87.74 20.03 39.05 81.09Z" fill="#646464" />
<path d="M0 0 39.05 81.09 -39.05 81.09Z" fill="#7d7d7d" />
<path d="M0 0 -39.05 81.09 -87.74 20.03Z" fill="#969696" />
<path d="M0 0 -87.74 20.03 -70.36 -56.11Z" fill="#afafaf" />
<path d="M0 0 -70.36 -56.11 0.00 -90.00Z" fill="#c8c8c8" />
</g>
</svg>

<!-- Null filter -->
<svg width="180" height="180" viewBox="0 0 180 180">
<defs>
<filter id="null">
<feBlend mode="normal" in="SourceGraphic"/>
</filter>
</defs>
<g transform="translate(90,90)" filter="url(#null)">
<path d="M0 0 0.00 -90.00 70.36 -56.11Z" fill="#323232" />
<path d="M0 0 70.36 -56.11 87.74 20.03Z" fill="#4b4b4b" />
<path d="M0 0 87.74 20.03 39.05 81.09Z" fill="#646464" />
<path d="M0 0 39.05 81.09 -39.05 81.09Z" fill="#7d7d7d" />
<path d="M0 0 -39.05 81.09 -87.74 20.03Z" fill="#969696" />
<path d="M0 0 -87.74 20.03 -70.36 -56.11Z" fill="#afafaf" />
<path d="M0 0 -70.36 -56.11 0.00 -90.00Z" fill="#c8c8c8" />
</g>
</svg>

Springbok

What a nice answer. Thanks, I'm trying your examples. – Disconnected

Thanks again. I ended up mixing different shape renderings to leave the font's smooth, but to ensure that polygons have no visible gaps. See here if you like. – Disconnected

The filter worked for me, there is just a little black line (like 0.1px) with this solution now. Thanks. – Embryonic