Skip to content

Instantly share code, notes, and snippets.

@Potherca Potherca/
Last active Aug 29, 2015

What would you like to do?
Dutch Provinces SVG

This gist displays a map of the 12 provinces the country of the Netherlands contains.

The path in the SVG have province names as class names, making it very easy to style them from a separate CSS file.

This work is based on an original SVG from the Wikipedia

Could be improved upon further by grouping separate path in <g> blocks like has.

html {
background-color: rgb(255,245,245);
height: 100%;
body {
position: absolute;
top: 50%;
left: 50%;
margin-left: -235px;
margin-top: -135px;
height: 270px;
width: 470px;
img, object {
outline: 1px solid black;
background-color: white;
padding: 1em;
.province {
stroke: white;
.province:hover {stroke: black; stroke-width: 2;}
.unknown {stroke: red; fill:red; stroke-width: 0;}
.Drenthe, #Drenthe {fill: #67000D;}
.Flevoland, #Flevoland {fill: #741621;}
.Friesland, #Friesland {fill: #822C36;}
.Gelderland, #Gelderland {fill: #90424A;}
.Groningen, #Groningen {fill: #9E595F;}
.Limburg, #Limburg {fill: #AC6F74;}
.Noord-Brabant, #Noord-Brabant {fill: #B98588;}
.Noord-Holland, #Noord-Holland {fill: #C79B9D;}
.Overijssel, #Overijssel {fill: #D5B2B2;}
.Utrecht, #Utrecht {fill: #E3C8C6;}
.Zeeland, #Zeeland {fill: #F1DEDB;}
.Zuid-Holland, #Zuid-Holland {fill: #FFF5F0;}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<link rel="stylesheet" href="application.css" />
<style type="text/css"></style>
<img src="dutch-provinces.svg">
<object type="image/svg+xml" data="dutch-provinces.svg" width="200" height="236"></object>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.