SVG from Illustrator
Using symbols/defs to ensure 1 location for updates. Scaling occurs because viewBox is specified;
by fezec
HTML
<section id="map">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 583.2 892.8">
<symbol id="desk-sectional" viewBox="-7.2 -14.285 14.4 28.57" >
<g>
<use xlink:href="#square-table" width="14.4" height="14.4" x="-7.2" y="-7.2" transform="matrix(1 0 0 1 0 0.1152)" overflow="visible" />
<use xlink:href="#table" width="4.8" height="4.801" x="-2.4" y="-2.4" transform="matrix(1 0 0 1 -0.311 11.8848)" overflow="visible" />
<use xlink:href="#table" width="4.8" height="4.801" x="-2.4" y="-2.4" transform="matrix(1 0 0 1 -0.311 -11.8848)" overflow="visible" />
</g>
</symbol>
<symbol id="four-person-table" viewBox="-9.41 -9.394 18.82 18.787">
<g>
<g id="Ellipse_1_9_">
<g>
<path fill="#FFFFFF" d="M0.091,5.157c-2.783,0-5.04-2.257-5.04-5.04c0-2.784,2.257-5.04,5.04-5.04s5.04,2.256,5.04,5.04
C5.131,2.9,2.874,5.157,0.091,5.157z" />
</g>
</g>
<use xlink:href="#table" width="4.8" height="4.801" x="-2.4" y="-2.4" transform="matrix(0.6917 -0.7222 0.7222 0.6917 6.0166 6)" overflow="visible" />
<use xlink:href="#table" width="4.8" height="4.801" x="-2.4" y="-2.4" transform="matrix(0.6917 -0.7222 0.7222 0.6917 -5.7109 -5.7148)" overflow="visible" />
<use xlink:href="#table" width="4.8" height="4.801" x="-2.4" y="-2.4" transform="matrix(0.7253 0.6884 -0.6884 0.7253 6.0166 -6)" overflow="visible" />
<use xlink:href="#table" width="4.8" height="4.801" x="-2.4" y="-2.4" transform="matrix(0.7253 0.6884 -0.6884 0.7253 -6.0166 5.834)" overflow="visible" />
</g>
</symbol>
<symbol id="six-seat-table" viewBox="-11.043 -10.756 22.086 21.513">
<use...
CSS
body,html {
background:#c9c9c9;
height:100%;
}
#map {
display:relative;
}
svg {
width:100%;
height:100%;
}
*{
shape-rendering: auto;
}