SVG - Create outer stroke of different merged paths - svg

Question

I have an SVG file which represents a map using different paths.
https://imgur.com/a/YyTyz
These paths represents different areas; I need to make bold the outer stroke that these paths create, as represented in this picture (note that there are 2 SVGs in a single file).
https://imgur.com/a/0fepe
Is it possible to achieve thisin a simple way?
Thanks in advice

Answer 1

Assuming that each of the areas of the map are their own path - and that you don't already have a path around the outside, then the simplest solution is to:
duplicate the map
put it at the back
give the map paths a thicker stroke
For example, let's start with the following simplified example.
<svg width="400" height="200">
<rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/>
<rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/>
<rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/>
<rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/>
</svg>
If we take a copy of those elements and give it a thicker stroke, we get:
<svg width="400" height="200">
<g fill="linen" stroke="black" stroke-width="5">
<rect x="50" y="50" width="200" height="50"/>
<rect x="250" y="50" width="100" height="50"/>
<rect x="50" y="100" width="150" height="50"/>
<rect x="200" y="100" width="150" height="50"/>
</g>
<rect x="50" y="50" width="200" height="50" fill="linen" stroke="black"/>
<rect x="250" y="50" width="100" height="50" fill="linen" stroke="black"/>
<rect x="50" y="100" width="150" height="50" fill="linen" stroke="black"/>
<rect x="200" y="100" width="150" height="50" fill="linen" stroke="black"/>
</svg>
To keep the file as small as possible, we can reuse the paths for both copies of the map:
<svg width="400" height="200">
<defs>
<g id="map">
<rect x="50" y="50" width="200" height="50"/>
<rect x="250" y="50" width="100" height="50"/>
<rect x="50" y="100" width="150" height="50"/>
<rect x="200" y="100" width="150" height="50"/>
</g>
</defs>
<use xlink:href="#map" fill="linen" stroke="black" stroke-width="5"/>
<use xlink:href="#map" fill="linen" stroke="black"/>
</svg>
It's not necessarily the most elegant solution, since all the map elements get drawn twice. But it is the simplest solution.