RESPONSIVE SCALABLE INTERACTIVE IMAGES SVG Tuesday, January 5, 2016 By 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 caniuse.com, 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 Raphael.JS 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: parall.ax (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.
Twitter
LinkedIn