Twitter LinkedIn


  • By Alito Alvarez
Alito Alvarez

What is a scalable interactive image?

A client recently requested a feature for their website - they wanted a diagram or graphic that would scale across all screen sizes and device types. There are a number of options for implementing a scalable graphic, but SVG is probably the best option (one such alternative would be image maps, which don't handle rescaling without a complicated javascript handler to adjust the co-ordinates).

Browser compatibility

Browser compatibility is decent. According to, there is basic SVG support across IE9+, Firefox, Chrome, Safari, Opera, Android, iOS Safari, Chrome for Android and Opera Mini.

Further to that, inline SVG (which would require a HTML5) can be used across the same set of browsers. The only issue is supporting older versions of IE


This is where the excellent Raphael.JS can step in, increasing browser compatibility to older versions of IE (6+), Safari (3+), Chrome (5+), Firefox (3+) and Opera (9.5+). Additionally, it makes it very easy to create interactive diagrams, maps, artwork, etc.

Raphael.JS renders an SVG image inline, that is, the elements of the image become part of the DOM. Unlike drawing with a <canvas></canvas> element, this makes it easy to hook up event listeners to parts of an image - an example of which is the classic interactive map: (live demo).

The Raphael API

The API (application programming interface) is relatively simple to use although as elements are created dynamically and without any specific classes, effects such as :hover need to be implemented in javascript with event listeners. This does, however, allow for finer control over interactivity and event handlers.

An interactive, scalable diagram

For an example of our work, you can see and play about with the Cybersecurity Digram at the Bird&Bird website. The brief also called for different responses to click/touch events for mobile- and desktop-resolutions.

3chillies Reading (HQ) Unit 6, Beacontree Plaza, Gillette Way Reading Berkshire RG2 0BS 0118 931 4196 Find us
3chillies London Threeways House, 40-44 Clipstone Street London, W1W 5DW 01189 314196

Our Partners

  • microsoft partner logo
  • sitecore logo
  • umbraco logo
  • EpiServer logo
  • bima logo
scroll back to the top of the current web page