SVG, advantages and Saul Bass

— 4 minute read

Filed under

I already knew that SVG, being a vector graphics format, can be displayed at different sizes without loss of quality. But its advantages go beyond being able to use the same file for any screen size.

The SVG format allows animations, filters, reuse of its parts, lossless data compression or to be modified 'on the fly' with scripts. The ideas it suggests to me are many so I wanted to get into it and I have already tried to play with the animations or taking advantage of reusing parts of it, apart from the usual use I was already making of the format in my web developments. Here are a couple of examples of things I've tried.

SVG morphing

I imagine this and other types of animations in interactive infographics and 'loading...' messages, among the most obvious options, and others that I hope will soon be included into different projects.

Logo MorphingMy logo transforms during an infinite loop into different figures such as a rocket, a target with an arrow, a person with a bag on his head, a trophy or a hand snapping his fingers.
Morphing animation demo

Reusing SVG to optimise a website

The reuse and filters that the format supports can be a great ally in web optimisation. This page inspired by one of Saul Bass' designs takes advantage of the scalability of the SVG format and the reuse it allows to make the same piece of SVG go through four different graphics. It is actually reused eight times as the border of each of them is the same piece with a filter applied.

Dark paper torned reveals a white paper underneath where you can read 'Óscar García presenta'
Capture of the landing page inspired by the credits of Bunny Lake Is Missing.

You can see the result at disenowebburgos.ogarcia.es.

I want to continue expanding my knowledge in filters and animations as the results that can be obtained are really interesting.