diff --git a/js/id/id.js b/js/id/id.js
index ce3f8b515..5d93ec935 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -155,6 +155,14 @@ window.iD = function () {
         return context;
     };
 
+    var imagePath = 'img/';
+    context.imagePath = function(_) {
+        if (!arguments.length) return imagePath;
+        if (/\.(png|gif|svg)$/.test(_)) return imagePath + _;
+        imagePath = _;
+        return context;
+    };
+
     return d3.rebind(context, dispatch, 'on');
 };
 
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 4c35f220c..2b301a502 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -48,7 +48,7 @@ iD.Map = function(context) {
                 if (resetTransform()) redraw();
             })
             .attr('id', 'surface')
-            .call(iD.svg.Surface());
+            .call(iD.svg.Surface(context));
 
         map.size(selection.size());
         map.surface = surface;
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
index 5ffdbb835..7cc16829b 100644
--- a/js/id/svg/surface.js
+++ b/js/id/svg/surface.js
@@ -1,4 +1,4 @@
-iD.svg.Surface = function() {
+iD.svg.Surface = function(context) {
     function findStylesheet(name) {
         return _.find(document.styleSheets, function(stylesheet) {
             return stylesheet.href && stylesheet.href.indexOf(name) > 0;
@@ -88,7 +88,7 @@ iD.svg.Surface = function() {
                 width: 32,
                 height: 32
             })
-            .attr('xlink:href', function(d) { return 'img/pattern/' + d[1] + '.png'; });
+            .attr('xlink:href', function(d) { return context.imagePath('pattern/' + d[1] + '.png'); });
 
         defs.selectAll()
             .data([12, 18, 20])
@@ -102,7 +102,7 @@ iD.svg.Surface = function() {
 
         defs.append('image')
             .attr('id', 'sprite')
-            .attr('xlink:href', 'img/sprite.svg')
+            .attr('xlink:href', context.imagePath('sprite.svg'))
             .call(autosize);
 
         defs.selectAll()
@@ -114,7 +114,7 @@ iD.svg.Surface = function() {
 
         defs.append('image')
             .attr('id', 'maki-sprite')
-            .attr('xlink:href', 'img/feature-icons.png')
+            .attr('xlink:href', context.imagePath('feature-icons.png'))
             .call(autosize);
 
         defs.selectAll()
diff --git a/js/id/ui/attribution.js b/js/id/ui/attribution.js
index a9fa555fa..dce0eeb6b 100644
--- a/js/id/ui/attribution.js
+++ b/js/id/ui/attribution.js
@@ -17,7 +17,7 @@ iD.ui.Attribution = function(context) {
                 var source = d.data.sourcetag || d.data.name;
 
                 if (d.data.logo) {
-                    source = '<img class="source-image" src="img/' + d.data.logo + '">';
+                    source = '<img class="source-image" src="' + context.imagePath(d.data.logo) + '">';
                 }
 
                 if (d.data.terms_url) {
diff --git a/js/id/ui/loading.js b/js/id/ui/loading.js
index 3b8258dc2..634f82aca 100644
--- a/js/id/ui/loading.js
+++ b/js/id/ui/loading.js
@@ -8,7 +8,7 @@ iD.ui.loading = function(selection, message, blocking) {
 
     loadertext.append('img')
         .attr('class', 'loader')
-        .attr('src', 'img/loader-white.gif');
+        .attr('src', context.imagePath('loader-white.gif'));
 
     loadertext.append('h3')
         .text(message || '');
diff --git a/js/id/ui/spinner.js b/js/id/ui/spinner.js
index 4085d62f7..5f8b026f7 100644
--- a/js/id/ui/spinner.js
+++ b/js/id/ui/spinner.js
@@ -3,7 +3,7 @@ iD.ui.Spinner = function(context) {
 
     return function(selection) {
         var img = selection.append('img')
-            .attr('src', 'img/loader-black.gif')
+            .attr('src', context.imagePath('loader-black.gif'))
             .style('opacity', 0);
 
         connection.on('loading.spinner', function() {
diff --git a/test/rendering.html b/test/rendering.html
index 5e7af0f04..01a98b9bc 100644
--- a/test/rendering.html
+++ b/test/rendering.html
@@ -123,7 +123,7 @@
             .attr('width', 30)
             .attr('height', 40)
             .attr('data-zoom', function (d) { return d.zoom; })
-            .call(iD.svg.Surface())
+            .call(iD.svg.Surface(context))
             .each(function (d) {
                 var n = node.update({tags: d}),
                     graph = iD.Graph([n]);
@@ -191,7 +191,7 @@
             .attr('width', 30)
             .attr('height', 30)
             .attr('data-zoom', function (d) { return d.zoom; })
-            .call(iD.svg.Surface())
+            .call(iD.svg.Surface(context))
             .each(function (d) {
                 var n = node.update({tags: d.tags}),
                     graph = iD.Graph([n, way]);
@@ -279,7 +279,7 @@
             .attr('width', 200)
             .attr('height', 30)
             .attr('data-zoom', function (d) { return d.zoom; })
-            .call(iD.svg.Surface())
+            .call(iD.svg.Surface(context))
             .each(function (d) {
                 var highway = way.update({tags: d.tags}),
                     graph = iD.Graph([a, b, highway]);
@@ -340,7 +340,7 @@
             .append('svg')
             .attr('width', 100)
             .attr('height', 100)
-            .call(iD.svg.Surface())
+            .call(iD.svg.Surface(context))
             .each(function (datum) {
                 var area = way.update({tags: datum.tags}),
                     graph = iD.Graph([a, b, c, d, area]);
diff --git a/test/spec/svg/areas.js b/test/spec/svg/areas.js
index a2ede70e4..4d38c2243 100644
--- a/test/spec/svg/areas.js
+++ b/test/spec/svg/areas.js
@@ -5,7 +5,7 @@ describe("iD.svg.Areas", function () {
 
     beforeEach(function () {
         surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
-            .call(iD.svg.Surface());
+            .call(iD.svg.Surface(iD()));
     });
 
     it("adds way and area classes", function () {
diff --git a/test/spec/svg/lines.js b/test/spec/svg/lines.js
index f05dae853..02e864dda 100644
--- a/test/spec/svg/lines.js
+++ b/test/spec/svg/lines.js
@@ -6,7 +6,7 @@ describe("iD.svg.Lines", function () {
 
     beforeEach(function () {
         surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
-            .call(iD.svg.Surface());
+            .call(iD.svg.Surface(iD()));
     });
 
     it("adds way and area classes", function () {
diff --git a/test/spec/svg/midpoints.js b/test/spec/svg/midpoints.js
index 761226bbd..e11318b6b 100644
--- a/test/spec/svg/midpoints.js
+++ b/test/spec/svg/midpoints.js
@@ -5,7 +5,7 @@ describe("iD.svg.Midpoints", function () {
 
     beforeEach(function () {
         surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
-            .call(iD.svg.Surface());
+            .call(iD.svg.Surface(iD()));
     });
 
     it("finds the location of the midpoints", function () {
diff --git a/test/spec/svg/points.js b/test/spec/svg/points.js
index 277433bfb..39cedbe8b 100644
--- a/test/spec/svg/points.js
+++ b/test/spec/svg/points.js
@@ -7,7 +7,7 @@ describe("iD.svg.Points", function () {
     beforeEach(function () {
         context = iD();
         surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
-            .call(iD.svg.Surface());
+            .call(iD.svg.Surface(iD()));
     });
 
     it("adds tag classes", function () {
diff --git a/test/spec/svg/vertices.js b/test/spec/svg/vertices.js
index 14e785717..eb2441228 100644
--- a/test/spec/svg/vertices.js
+++ b/test/spec/svg/vertices.js
@@ -7,7 +7,7 @@ describe("iD.svg.Vertices", function () {
     beforeEach(function () {
         context = iD();
         surface = d3.select(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
-            .call(iD.svg.Surface());
+            .call(iD.svg.Surface(iD()));
     });
 
     it("adds tag classes", function () {