Responsive image maps using SVG
I'm pretty happy that I got this working - thought I'd share.
I received this plan from the illustrator as an SVG, and opened it as code rather than as an image. I then identified each component (polygon, polylines etc) and copied that data into records within CMSB. ie. I broke the single image into manageable lots for sale.
I then associated additional information with each record, such as "sold/available/onhold" etc and regenerated the SVG using the code generator from CMSB - but now allowing me to identify each component and adding CSS classes to them.
<?php foreach ($lotsRecords as $record): ?>
<<?php echo htmlencode($record['svg_type']) ?> id="<?php echo htmlencode($record['new_lot']) ?>" class="lot <?php echo strtolower($record['status:label']) ?> lotModalLaunch" data-toggle="modal" data-id="<?php echo htmlencode($record['new_lot']) ?>" <?php echo ($record['code']) ?>/>
<?php endforeach ?>
I've now got a fully responsive image map - managed by CMSB. It will display without loss of quality at any scale, for websites / mobile apps etc. File size 70kb (the PDF version is 800kb)
There's a bit of messing around with SVG's, and making them scale properly in IE is a pain - but good result in the end. Will be great to extend this to more animated navigational elements, interactive info-graphics etc.