Responsive Image Maps in 5 mins

There a bunch of articles on responsive images maps using SVG overlays out there in google land, most have to do with importing vector maps of, well, land maps. I wanted a quick way to make simple rectangles that used SVG regions to scale with my screen size and even allow for clickable maps on mobile devices. Here's the watered down explanation...

Load your image in Photoshop, or any editor that shows you cursor position and values for a simple bounding box. This image happens to be 2000x990

Responsive image maps in 5 mins

 

Now marquee around an area of interest where you want your clickable map region. Note the X, Y, origin values and the bounding box Width and Height values.

Responsive image maps in 5 mins

 

 

SVG Viewboxes represent a visible 'stage' or mask... ok more later. Insert your vals in the snippet below and your done. 

<p><svg version="1.1" viewbox="0 0 W H" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<image height="990" width="2000" xlink:href="/sites/default/files/images/1_front_lobby.jpg"> </image> 
<rect fill="#fff" x="x origin" y="y origin" width="boundingbox width"  height="bounding box height" opacity="0.5" ></rect> 
</svg></p>

..And my final. Finalized code is handy to make sure qualifiers are correctly added or omited , eg 20 vs 20px.

<p><svg version="1.1" viewbox="0 0 2000 990" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<image height="990" width="2000" xlink:href="/sites/default/files/images/1_front_lobby.jpg"> </image> 
<a href="http://www.avmmuseum.com/brain-avm-museum-north-hall" xlink:="">
<rect fill="#fff" x="319" y="151" width="377"  height="490" opacity="0.5" >
</a>
</rect> 
</svg></p>