Blog

How to Create an Animated Logo with SVG and CSS

November 27th, 2016

Neville Greenwood

If you’re not looking to improve user experience on your website, you don’t need to read any further. However, if you are one of the many who is searching for solutions, even simple ones, then read on. We’re informed enough to know that judicious use of animation is indicative of an improvement in user experience. But too much of a ‘good thing’ gives people reason to click off the page.

The webs transition towards HTML5 for animation although gradual is presenting some complications with SVG’s (Scalable vector graphics) providing an accessible alternative, with an API, can be animated with the productive utilisation Cascading Style Sheets (CSS).

We’ll discuss the benefits of using SVG’s and how to use them with CSS to produce stimulating animated logos for your site.

Getting Assistance from Scalable Vector Graphics

SVG’s are not graphics files but an XML mark-up language (similar to XHTML or XOXO) which is used for creating vector-based two-dimensional images. They can then be scaled up or down without any loss in resolution. It’s a convenient time saving step that is advantageous when you’re building a responsive website. However, graphics use vectors and tend to want more data than necessary, particularly if you require complex images. Because of this, SVG’s aren’t usually used to create logos, info-graphics or regular graphs (although it does occasionally occur).

Scalable vector graphics have built-in graphic effects; filters or blend modes, and with the accessible DOM API, you can manipulate SVG files without too much fuss. The convenience of flexibility allows the creation of SVG files server-side that can be easily modified without having to employ ordained tools.

How to Utilise SVG’s

There are tools you can use to create and manipulate SVG’s rendering you free from having to fuss with code for anything other than simple CSS styling or animations. Adobe Illustrator, Inkscape and Sketch for Mac are hot options, and in Illustrator’s case, the design process is a matter of preparing your image ready then exporting it using the Save as SVG option. A drop-down menu may appear when saving your work, giving you options such as SVG Profiles that will be accompanied by several choices like SVG Tiny more suited to smart-phones and SVG Basic which is an outdated profile meant to be used for PDAs.

You might find frustration while creating SVG’s however. It appears the tools add metadata to the underlying code resulting in bigger files than necessary. It is an unfortunate setback in web design since you don’t want increased load times due to poor optimisation on your end so SVG’s must be optimised before integration into your website.

Looking at a raw SVG file depicting the Android logo before optimisation illustrates excess space. By removing those same spaces, default attributes styles, and other non-essential data you are faced with a 12.5% reduction in file size. On more complex images, employing the same actions will improve load times when SVG’s are incorporated into your website.

Using such tools as the online SVG Optimizer created by Peter Collingridge or SVGO, a Node.js-based open-source app will simplify things for you. Animating Logos With SVG and CSS Using CSS to animate SVG’s has the ease factor compared with SMIL or JavaScript. However libraries such as Snap or Velocity, with an aim to simplify this process do exist. SVG’s are integrated into websites as embedded images, CSS backgrounds or inline graphics, but you can only use CSS animations for the last option. This means only SVG mark-up can be animated which is directly within our HTML code.

To change colour and transition, begin by specifying a class for the vector path then add the effects to that class in your style file. It should be mentioned that CSS animation does have limitations and won’t allow you to change the actual shape of an element. If you require same, you’ll need to resort to JavaScript animations. Refer to 8 JavaScript Libraries to Animate SVG.

Conclusion

Animations need wisdom in thought before being utilised. They can profusely annoy visitors in the long run and have them clicking off your site in a heartbeat. However, if they are integrated properly, they can promote user experience and lend an attractive presentation to a site.

If you have intentions of implementing CSS animations for SVG’s, ensure you:

Choose a compatible graphic editor tool and,

Optimise your SVG code and remember only simple animations using this technique can be implemented.