The issue that you will quickly experience with map charts in SVG is that shapes are rendered in a jagged way, and if you are working a lot with darker borders, you will also notice that smaller features, such as islands and tiny countries, will take on the border color, rather than the fill color.
There are a couple of handy SVG attributes that you can use to mitigate these issues. By tweaking
paint-order you can improve the overall rendering of your map charts.
stroke-linejoin attribute allows you to determine how your stroke behaves at every bend. There are a number of options available, but here I will only focus on
round, which are particularly useful for SVG map charts. You can read about all the options for line join on MDN.
If you don't set the
stroke-linejoin attribute explicitly, you will experience the default jagged edges when using paths with a lot of details. The coast of Norway, some parts of the US east coast, and especially the Caribbean, or islands in the Pacific will show a lot of anomalies. The thicker your stroke, the more pronounced these anomalies will be.
stroke-linejoin attribute can be combined with the
stroke-linecap attribute. If you don't set the line cap, you will see gaps in your outlines on smaller islands. You can read more about stroke line cap on MDN.
<!-- Round --> <path d="..." stroke-linejoin="round" stroke-linecap="round" /> <!-- Bevel --> <path d="..." stroke-linejoin="bevel" stroke-linecap="bevel" />
round you can reduce these sharp edges significantly. This will give your maps a smoother appearance that seems much more polished and pleasant to look at.
paint-order attribute is particularly cool because it lets you determine whether the stroke or the fill get painted first. SVG in the browser is limited to center stroke, and cannot render inner or outer stroke (like Figma/Sketch etc.). Having the option to determine whether a shape will render the fill or the stroke first gives you at least the option to easily render an outer stroke.
The default order is
fill stroke. For good results with smaller shapes, try to reverse this to
stroke fill. A nice side effect of this is that you not only get a nicely visible fill color, but that the smaller shapes get a little bit bigger, which can emphasise islands in regional maps.
<!-- Default --> <path d="..." paint-order="fill stroke" /> <!-- Reversed --> <path d="..." paint-order="stroke fill" />
Note how in the examples below we can preserve the fill color of e.g. the Lesser Sunda Islands and Maluku Islands much better when using the reversed paint order.
By manipulating stroke and fill attributes via
paint-order, you can change the way your SVG map shapes are rendered. Experimenting with these attributes can result in smoother, rounder, and more polished shapes that will significantly improve your visuals and in some cases make your map charts more readable.
Finally, here is an example using all of these techniques togetherto render the map of Aotearoa (New Zealand).