How to Create an Animated Logo for Your WordPress Website

SVG in HTML

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.

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.

Raster v/s SVG

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"});
        }
    );
});

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. 🙂

• WordPress Tips & Tricks
• With tags: Animation, SVG, Theme Customization

Share:

• Aruna V

Please note, some of the links in this blog post might be affiliate links. This means if you go on to purchase a product using such a link, we receive a small commission (at no additional cost to you). This helps us support the blog and produce free content. We only recommend products we work with or love. Thank you for your support!