diff --git a/app/assets/images/key/mapnik/mainroad.png b/app/assets/images/key/mapnik/mainroad.png
deleted file mode 100644
index 269959b65..000000000
Binary files a/app/assets/images/key/mapnik/mainroad.png and /dev/null differ
diff --git a/app/assets/images/key/mapnik/mainroad12.png b/app/assets/images/key/mapnik/mainroad12.png
deleted file mode 100644
index c289a3f8c..000000000
Binary files a/app/assets/images/key/mapnik/mainroad12.png and /dev/null differ
diff --git a/app/assets/images/key/mapnik/mainroad12.svg b/app/assets/images/key/mapnik/mainroad12.svg
new file mode 100644
index 000000000..6bf11d915
--- /dev/null
+++ b/app/assets/images/key/mapnik/mainroad12.svg
@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='17' stroke-width='0.5'>
+<rect x='-1' y='0.5' width='54' height='4' fill='#f9b29c' stroke='#c84e2f' />
+<rect x='-1' y='6.5' width='54' height='4' fill='#fcd6a4' stroke='#a06b00' />
+<rect x='-1' y='12.5' width='54' height='4' fill='#f7fabf' stroke='#707d05' />
+</svg>
diff --git a/app/assets/images/key/mapnik/mainroad15.svg b/app/assets/images/key/mapnik/mainroad15.svg
new file mode 100644
index 000000000..96796b86e
--- /dev/null
+++ b/app/assets/images/key/mapnik/mainroad15.svg
@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='32'>
+<rect x='-1' y='0.5' width='54' height='9' fill='#f9b29c' stroke='#c84e2f' />
+<rect x='-1' y='11.5' width='54' height='9' fill='#fcd6a4' stroke='#a06b00' />
+<rect x='-1' y='22.5' width='54' height='9' fill='#f7fabf' stroke='#707d05' />
+</svg>
diff --git a/app/assets/images/key/mapnik/mainroad8.png b/app/assets/images/key/mapnik/mainroad8.png
deleted file mode 100644
index 05b4dac85..000000000
Binary files a/app/assets/images/key/mapnik/mainroad8.png and /dev/null differ
diff --git a/app/assets/images/key/mapnik/mainroad8.svg b/app/assets/images/key/mapnik/mainroad8.svg
new file mode 100644
index 000000000..ab5ab3f64
--- /dev/null
+++ b/app/assets/images/key/mapnik/mainroad8.svg
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='7' stroke-width='1.5'>
+<path d='M0,1.5 H52' stroke='#f6967a' />
+<path d='M0,5.5 H52' stroke='#f4c37d' />
+</svg>
diff --git a/app/assets/images/key/mapnik/mainroad9.svg b/app/assets/images/key/mapnik/mainroad9.svg
new file mode 100644
index 000000000..75195d9fb
--- /dev/null
+++ b/app/assets/images/key/mapnik/mainroad9.svg
@@ -0,0 +1,5 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='52' height='9'>
+<path d='M0,1 H52' stroke='#f6967a' stroke-width='2' />
+<path d='M0,5 H52' stroke='#f4c37d' stroke-width='2' />
+<path d='M0,8.5 H52' stroke='#bbb' />
+</svg>
diff --git a/config/key.yml b/config/key.yml
index 5341245e5..52c59091e 100644
--- a/config/key.yml
+++ b/config/key.yml
@@ -1,9 +1,16 @@
 mapnik:
   # transportation: roads.mss
-  - { min_zoom:  6, name: motorway, width: 52, height: 5, fill: "#e892a2", casing: "#dc2a67" }
-  - { min_zoom:  6, name: main_road, image: mainroad.png }
-  - { min_zoom:  8, name: main_road, image: mainroad8.png }
-  - { min_zoom: 12, name: main_road, image: mainroad12.png }
+  - { min_zoom:  6, name: motorway, width: 52, height:  1, line: "#e66e89", line-width: 1 }
+  - { min_zoom:  7, name: motorway, width: 52, height:  3, line: "#e66e89", line-width: 1.5 }
+  - { min_zoom:  9, name: motorway, width: 52, height:  2, line: "#e66e89", line-width: 2 }
+  - { min_zoom: 12, name: motorway, width: 52, height:  5, fill: "#e892a2", casing: "#dc2a67", casing-width: 0.5 }
+  - { min_zoom: 15, name: motorway, width: 52, height: 10, fill: "#e892a2", casing: "#dc2a67" }
+  - { min_zoom:  6, name: main_road, width: 52, height: 3, line: "#f6967a", line-width: 1 }
+  - { min_zoom:  7, name: main_road, width: 52, height: 3, line: "#f6967a", line-width: 1.25 }
+  - { min_zoom:  8, name: main_road, image: mainroad8.svg }
+  - { min_zoom:  9, name: main_road, image: mainroad9.svg }
+  - { min_zoom: 12, name: main_road, image: mainroad12.svg }
+  - { min_zoom: 15, name: main_road, image: mainroad15.svg }
   - { min_zoom: 13, name: track, width: 52, height: 3, opacity: .8, line: "#996600", line-width: 1.5, line-dasharray: "6 5" }
   - { min_zoom: 13, name: bridleway, width: 52, height: 3, line: green, line-width: 1.25, line-dasharray: "4 2" }
   - { min_zoom: 13, name: cycleway, width: 52, height: 1, line: blue, line-dasharray: "3 3.5" }