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
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.
SVG Viewboxes represent a visible 'stage' or mask... ok more later. Insert your vals in the snippet below and your done.
..And my final. Finalized code is handy to make sure qualifiers are correctly added or omited , eg 20 vs 20px.