A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.
Viewing entries tagged
SVG
A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.
While the SVG format is extremely efficient in expressing illustrations, vector files can become just as bloated as their bitmap kin. SVG code is often riddled with unnecessary elements, attributes, and spaces, while editors such as Adobe Illustrator and Inkscape add even more to the file with custom namespaced tags.
I like using diagrams as a way of showing information flow or browser behaviour, but large diagrams can be daunting at first glance. When I gave talks about the Application Cache and rendering performance I started with a blank screen and made the diagrams appear to draw themselves bit by bit as I described the process. Here's how it's done:
The number of devices with high resolution screens is rising, and with it the need for a simple way to deliver crisp, resolution-independent graphics that don’t waste bandwidth. Vector-based graphics, which are compact and scalable, are a great solution.