Search

How to Create an Animated Logo for Your WordPress Website

Listen to this article
svg-in-html
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.

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

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

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

 

Aruna Vadlamani

Aruna Vadlamani

4 Responses

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »