Bloorhomes and SVG

With a higher rate of adoption of ‘class a’ browsers the new bloorhomes site has some great features that really push the boundaries of current technology.

As your typical development has hundreds of plots, sometimes even thousands, one of the key factors to address is the laborious task of adding information for each of these plots. As you can imagine this data is very important to the people visiting but if you had to do it by hand it would take hours.

Obviously, we needed to automate this process; SVG’s to the rescue.

SVG import

All development layouts are already generated within Illustrator, so getting that data to a SVG is easy (that’s why we picked them). Before the original files are exported to SVG some extra data is added via attributes (plot number, number of rooms, house style etc) and each plot is grouped together. That file is then exported and uploaded to the cms.

Once on the cms the code reads and parses the SVG file creating or updating plots and matching them up with styles. This means your typical development is now ready to go in a few minutes.

Front end SVG usage

As the development now has an SVG attached to it, its time to do some cool front end things with it. All zooming & panning are built in SVG features, so thats great, but not very useful.

To give the layouts something extra they have some nice javascript interactions: