Joining the Dots with Vector Graphics
Author: Mark Horsell
Does anyone remember Flash? It seems like it’s being erased from our collective memories, another piece of tech discarded in the ever march forward.
It’s not quite gone, it has a couple of years before it will be turned off for good, but it’s effectively been banished into the dark corners of the internet where it is slowly breathing its last digital breath.
In its heyday it led the way in making the web genuinely interactive and gave developers and designers a route into games and animations that didn’t exist before, it released a wave of creativity, we’d probably call these sites “Brutalist” now, but in those days we mostly just called them experiments.
Will Flash be forgotten? Love it or hate it, it seems to me to be an essential part of our cultural history. But the desire to save our internet heritage doesn’t seem strong, although Atari cartridges from the 70’s are still being bought and sold, the flash games from the past will disappear. The animations can be converted to videos at least.
https://www.youtube.com/watch?v=EIyixC9NsLI
But maybe I’m overly sentimental?
One of the things flash gave us was the Vector graphics format, where graphics are described mathematically and are constructed in the browser when required. One of the benefits of this approach is that graphics don’t have to be fixed, they can animate over time or as a result of user interaction. That’s something that almost disappeared for a while, a return to a more static web has helped us focus, and we’re reminded that charts and infographics don’t always need to be animated or interactive.
Recently though, we have been able to return to this vibrant form of communication thanks to the Canvas API and also the scalable vector graphics format (SVG).
SVG’s were introduced as a standard in 2001, but it’s taken a long time for browser support to be consistent. It is hard to say why things take so long, and it can be frustrating for a developer when a technology always seems to be just around the corner, but we can use them now (unless there is a compelling case to support IE8).
https://caniuse.com/#feat=svg
We’ve learned the lessons of the past, and we now use these techniques in a more refined way. They are more likely to be an element in a page than a page itself as well as having a genuine benefit for the user.
SVG’s are perfect for Icons, fixed or animated, as well as having a small file size we know they will scale correctly.
Knowing our way around the SVG spec allows us to have finely tuned control over our graphics, whether that’s dealing with the style of lines and fills, adding masks, gradients or patterns, animating the properties over time or as a response to the interaction.
https://www.w3.org/TR/SVGTiny12/
We’ve recently used SVG’s in the JackManchester site, creating an effect where the path of an SVG is drawn in overtime to bring attention to the selected race-track.
https://www.jrmanchester.com/race-calendar/
Below, you will see a more subtle version taken from our site. We’ve converted a font (bottom) into an SVG (top), to get the precise control we wanted over the lettering. Notice the more rounded ‘b’, the narrower ‘L’ and of course we’ve dotted the ‘i’.
https://universlabs.co.uk/
It’s likely that we’ll use SVGs more widely in the future, and at some point, we will inevitably end up doing a full-page SVG site, something “Brutalist” that will scale to fit any screen. In which case it may seem strangely familiar, although this time around it will be secure, accessible, won’t burden the CPU and will work everywhere.
