How to Create an Animated Logo with SVG and CSS
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.
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.