Studio
GithubDribbbleTwitter
Richard Zimerman

August 10, 2020

How to improve SVG mapchart shape rendering

This article shares some useful techniques on how to achieve prettier shapes with SVG map charts, especially when it comes to rendering smaller features, such as islands.

Share
cover
Examples of stroke and paint order using an excerpt of a map of Aotearoa (New Zealand).

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 stroke-linejoin, stroke-linecap and paint-order you can improve the overall rendering of your map charts.

Stroke-linejoin

The 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 bevel and 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.

The 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" />

By setting stroke-linejoin to bevel or 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.

default
1/ Example of stroke without any special modifications.
round
2/ Example of stroke with line join set to "round".

Paint-order

The 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.

islands 1
1/ Default stroke without any line join and paint order modification.
islands 2
2/ Stroke with paint order set to "stroke fill".
islands 3
3/ Stroke with line join set to "round" and paint order set to "stroke fill".

Conclusion

By manipulating stroke and fill attributes via stroke-linejoin and 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).

aotearoa 4
Final example showing the techniques outlined in this article in practice using a map of Aotearoa (New Zealand).

Get our latest articles on design, UX, data visualisation, and code in your inbox.

Have a project in mind? Get in touch and let's make something cool. 

hello@zcreativelabs.comGet in touch

Newsletter

Sign up to get our latest articles on design, data visualization, and code directly in your inbox.

z creative labs GmbH
Sihlquai 131, 8005 Zurich
Switzerland

GithubDribbbleTwitterEmail

© 2020 z creative labs GmbH