In coothead’s excellent example he uses the original image as a background and the svg is only simple polygons to define the room outlines for the links. So there was no need to recreate the whole image in svg.
Though an svg would make a very crisp, scalable image.
I have not experimented with the map element yet, so I don’t know how it scales, or more importantly how the areas and their coordinates scale within it. But Bootstrap is only a grid-type framework, working in rows and columns. Elements placed by coordinates are handled differently.
The css could be simplified further to make the image “fluid” rather than adaptive, which is my preferred method of responsive design.
Simply swap width:50em for max-width:50em on the #floor-plan and remove the height rule.
This is enough to make the image fluid, so you can now remove all the media queries from the bottom of the css.