Potherca
10/3/2014 - 9:28 PM
Dutch Provinces SVG
Dutch Provinces SVG
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="application.css" />
<style type="text/css"></style>
</head>
<body>
<img src="dutch-provinces.svg">
<object type="image/svg+xml" data="dutch-provinces.svg" width="200" height="236"></object>
</body>
</html>
.province {
stroke: white;
stroke-width:0.81351596;
}
.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;}
/*EOF*/
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;
}
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 upload.wikimedia.org/wikipedia/commons/d/d5/Provinces_of_the_Netherlands.svg has.