When I create multiple paths, that have same vertices and I create a SVG file, when I open it with any modern browser there is a white space between the paths. I suggest its result of how the SVG files are calculated, before being drawn. I have tried setting the stroke properties such stroke-width, stroke-linejoin and make sure the stroke color matches the fill color but, the result is very ugly. Is there a proper way to remove the empty space between the paths, or I should consider adding a background behind the path to hide the empty space?
Here is an image showing the empty space between the paths.
Here is the code for the SVG path, without any stroke:
<!DOCTYPE html>
<html>
<head>
<title>Ups a problem!</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="163.545" height="197.679" viewBox="0 0 163.54 197.68" enable-background="new 0 0 163.54 197.68" xml:space="preserve">
<path fill="#BD796BFF" d="M 109.547,99.5815L 110.092,197.679L 0,123.374"/>
<path fill="#BC7667FF" d="M 109.547,99.5815L 51.0984,-1.90735e-005L 0,123.374"/>
<path fill="#BB7A68FF" d="M 109.547,99.5815L 115.726,42.8555L 51.0984,-1.90735e-005"/>
<path fill="#B97564FF" d="M 109.547,99.5815L 115.726,42.8555L 163.545,134.819"/>
<path fill="#B97464FF" d="M 109.547,99.5815L 163.545,134.819L 110.092,197.679"/>
</svg>
</body>
</html>Here is the code for the SVG path, when stroke is applied
<!DOCTYPE html>
<html>
<head>
<title>Ups a problem!</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" width="163.545" height="197.679" viewBox="0 0 163.54 197.68" enable-background="new 0 0 163.54 197.68" xml:space="preserve">
<path fill="#BD796BFF" d="M 109.547,99.5815L 110.092,197.679L 0,123.374" stroke="#BD796BFF" stroke-width="2.0" stroke-linecap="round" stroke-linejoin="round"/>
<path fill="#BC7667FF" d="M 109.547,99.5815L 51.0984,-1.90735e-005L 0,123.374" stroke="#BC7667FF" stroke-width="2.0" stroke-linecap="round" stroke-linejoin="round"/>
<path fill="#BB7A68FF" d="M 109.547,99.5815L 115.726,42.8555L 51.0984,-1.90735e-005" stroke="#BB7A68FF" stroke-width="2.0" stroke-linecap="round" stroke-linejoin="round"/>
<path fill="#B97564FF" d="M 109.547,99.5815L 115.726,42.8555L 163.545,134.819" stroke="#B97564FF" stroke-width="2.0" stroke-linecap="round" stroke-linejoin="round"/>
<path fill="#B97464FF" d="M 109.547,99.5815L 163.545,134.819L 110.092,197.679" stroke="#B97464FF" stroke-width="2.0" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</body>
</html>