Responsive image maps using SVG

2 posts by 2 authors in: Forums > CMS Builder Community
Last Post: January 7, 2016   (RSS)

By Toledoh - January 6, 2016

Hey All.

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.


Tim Forrest

Toledoh Enterprises