At WisdmLabs, designing a logo, is part of building a theme. And as part of the UI team, I’m responsible for creating a bespoke image. Since a logo is part of branding a business, I have to always work closely with the client, and be ready to put in the extra hours till a design is approved. But lately, what’s pleasing a lot of clients, is animated or interactive logos.
What I do is, I create two sets of logos. One static image (usually a PNG), and a dynamic image (an SVG). The reason is sometimes the animated logo might not be needed for every instance (for example, clients might need the logo only on the homepage). And sometimes particular browsers do not support SVGs, so in that case, you need a fallback image.
If you’re like me, wanting to add an animated logo for a client, or are just looking to vamp up your site by adding interactive graphics, this article is for you! So, read on.
[space]
Create Animated Logo = Create an SVG File
An SVG (Scalable Vector Graphic) is an XML-based file format. This means, the graphic is created in XML. Basic shapes are represented using a series of numbers. And this is what makes the graphic scalable. It’s because expanding or shrinking the graphic is just a matter of changing the numbers, thus creating smoother images as compared to bitmaps.
The use of such graphics, makes such images responsive. They appear as crisp on mobile phones or tablets, as on larger screens.
Since SVGs are created as XML files, you can use a normal text editor to create them. However, forming complex shapes might be difficult. In such cases, it is best to go with an image editing tool. At WisdmLabs, I use Illustrator to create such graphics. But, there are free online tools which you can use too, like the GoogleCode: SVG Edit.
Add Animated Logo = Embed an SVG in HTML
Once you create the SVG file, you can embed it into an HTML document using the <svg> tag.
For example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle id="wdm_example_cr" cx="100" cy="100" r="20" stroke="#960000" stroke-width="4" fill="#e1e1e1" /> </svg>
If you had created this file using Illustrator or any other editing tool, you should have an id for every layer you create. In the above example, I’ve created a circle with the id ‘wdm_example_cr’. You can use this id in your HTML document to refer to the element.
Standalone Animations
Animations can be added to an SVG element using the animate tag. For example, you can use the below code to animate the size of the circle.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="100" cy="100" r="20" stroke="#960000" stroke-width="4" fill="#e1e1e1"> <animate attributeName="r" attributeType="XML" from="20" to="40" begin="0s" dur="2s" fill="remove" repeatCount="indefinite"/> </circle> </svg>
Similarly you can make the circle move, if you animate the “cx” or “cy” attributes. This same principle can be applied for other graphics.
Animate SVG using CSS
These elements which form the SVG file, like you may have a path, text, or circle, or rectangle, etc., can be animated using CSS Transforms, Transitions and Animations. Other attributes of these elements, like fill, stroke, etc, can also be changed using CSS.
Animate the SVG using JS
To animate these graphics, based on other inputs, such as hover, or button click, you can use JavaScript. For example, for the above circle, you can change the fill color on hover, using JS.
jQuery(document).ready(function(){ jQuery("circle#wdm_example_cr").hover( function () { jQuery(this).css({"fill":"#960000"}); }, function () { jQuery(this).css({"fill":"#e1e1e1"}); } ); });
[space]
An SVG can be great, not just for logos, but to create interactive or animated ads or banners for your business, or brand, or just to add special effects to a rather monotonous page or application. Animated icons are also created using SVG, because they can be easily scaled (as the name suggests). But you have to remember some browsers might not support such file formats (especially older versions of IE), so you need to make a collective call on when to use such images.
I hope that this article has helped you, and such graphics to your website. If there is anything I can help you with, do feel free to add comments, or questions, and I will be glad to answer them. 🙂
4 Responses
This is a good introduction to SVG! I wrote a similar article on logo animations with HTML5 and JS, which can be found here:
http://www.bitcrunch.de/make-fancy-animated-header-wordpress-html5-canvas/
I would prefer your approach in most cases (simple logos) over canvas+js. The canvas tag however, can be really useful when it comes to complex behaviour and animations.
Keep up the great work!
Hi Philipp,
Thanks for your comment. I agree with you! Canvas is better for complex animations, but we chose SVG because it was suitable for the task at hand.
nice post
Thanks!