SVG graphics and HTML5 key to creating consistent UIs across devices
Find out how new libraries and tools promise to bring a consistent UI with SVG graphics in HTML5 development.
In the early days of web application development, most graphics intensive applications defaulted to Flash. This provided a consistent experience across most browsers and devices. But Apple’s decision to abandon Flash on the iPhone forced many developers to take a fresh look at HTML5. Initially, most developers adopted Canvas for rendering graphics since it provides more consistency across browsers.
Raster versus vector
Canvas uses raster graphics so that images are rendered from individual bits. As a result, the client has to do a lot of work to scale the graphics across different sized screens. This rednering works consistently, but graphics have to be targeted at separate sized windows. Content for small screens looks blocky when scaled. Larger images shrunk for smaller screens can slow the application down.
SVG defines graphics using vectors that describe lines, angles, and shapes. These are easier to render across different screens and are much smaller. Furthermore it is easier to address individual elements in an animation programmatically from the DOM. However, browser makers have adopted different techniques for rendering SVG. For example, an animation that looks great on Chrome doesn’t always animate on Internet Explorer.
Sarah Drasner, senior UX engineer at Trulia (Zillow), asserts that animation is important for more than just games. It is important to convey meaning, a powerful tool to guide users, and it’s also fun. She recommends checking out SVG because it looks crisp on any display, requires fewer HTTP requests to handle, and is easily scalable for responsive websites. It’s also easy to make any element in the website responsive which can improve screen layout or lead to changing the way different elements are rendered or animated. Elements in SVG images are also accessible to screen readers, which would otherwise could not by easily read from Canvas images.
Optimize the SVG
The hardest way to master SVG is to read the spec and start coding. Code that appears to render great on one browser can fail in dozens of different ways on others. A better practice is to leverage many of the SVG optimization tools. This can dramatically reduce the frustration factor involved in figuring why the animation broke. Drasner recommends:
-
SVGO / SVGO-GUI – A Node.js tool for optimizing SVG animations.
-
SVGOMG – A GUI for SVGO for exposing the configuration options of SVGO.
-
Peter Collingridge's SVG Editor – A JavaScript program to reduce the size of SVGs in real time.
-
GreenSock Animation Platform – A suite of tools for scripted animations.
After optimizing the SVG code, developers might want to investigate different concepts for rendering icons on different sized screens. For example, Joe Harrison built a prototype concept for responsive icons that can use animations to change the image shape at different resolutions.
Another concept is to do more of the animation in the CSS rather than the SVG code itself. This makes it easier to shift around the animation programmatically. The GreenSock animation platform makes it possible to programmatically implement a wide variety of animation techniques. Drasner said it solves a number of issues with cross platform inconsistencies.
Going forward, Drasner believes that more consistent SVG animation techniques could lead to a resurgence in infographics. She said, “It is amazing how many more page views infographics get compared to simple text and graphics.” But infographics usage waned with the rise of smartphone browsers, since they did not always render well on small screens. By programmatically generating SVG, developers can create graphics that not only scale in size, but can move around dynamically on different screen layouts.
