Easy step by step quick tutorial on how to add an animated logo to WordPress.
One of the easiest ways of adding an animated logo is using an animated gif and uploading it. Although it used to be the best choice, with the advancement of technology, this is no more a viable solution.
Seems an oxymoron? Right? Actually it isn’t.
With development of tech, we have a whole range of hi resolution devices and pleasing all of them with a single logo is not possible. The logo has to be scalable to fit the responsive website themes. Also hi resolution means you have to upload a high resolution image. High resolution image with animation is not a good idea in general.
The solution?
Using an SVG animation. And this is what we will discuss today
Examples of an SVG animated logo
Why SVG animated logo and not Animated GIF
SVG logos are vectors, which means are drawn using codes and thus never lose quality – no matter how big or small they are rendered. This is not possible with GIF. Also SVG animation are far more smooth than GIF animations, at a fraction of size. Lastly, single SVG image will look good on all devices, while it might not be true for GIF.
Creating and adding Animate SVG logo to WordPress is easy. Here’s how
Although it might seem a rocket science, it is not. Here I will give you the most easiest way to get yourself a super high quality and super smooth animated logo that is a real fast to load.
What’s needed
Assuming that you already have a wordpress site with an option to upload logo, here are the things needed.
- Adobe illustration (not essential but highly recommended)
- SVGator (online – free version is sufficient)
- SVG support plugin (many are available)
Steps to create animated svg logo and use it on WordPress site
Both logos in this page are created using the tools and technique mentioned here.
The whole process includes just three steps.
- creating the SVG logo
- creating animation
- uploading the logo onto WordPress
Creating the SVG logo
You can use any vector program to create an SVG logo. I prefer Adobe Illustrator but you can use any other software. Once you create the vector logo, save it as an SVG file.
In case you don’t have Adobe Illustrator, you can use a SVG version of your logo. Most probably your logo designer already has provided you with a SVG file. If not ask your designer.
In case you don’t have any SVG files, you can convert your regular PNG/JPEG logo file to SVG. Use convertio.co for conversion. However, you might lose the color of the logo.
Once you convert the logo image to svg, open it on your browser to check if the logo looks good.
For minor edits like color, placement, rotation etc. you can use boxy-svg.com
Once you have the logo SVG file move to the next step.
In case you don’t have any logo image, you can move directly to the next step to create a logo from scratch.
Animating the logo
This is the fun part.
If you don’t have a logo – start a new blank project or if you have a SVG logo, upload the logo.
Here you can animate the individual elements of the design. You can move them, morph them, change size, color, opacity etc. Also you can choose the animation style and speed.
Do check out their tutorial to understand what can be done. The free version has some limitations and you have a monthly quota for downloads. However the downloads are free from any branding and you can freely use them.
Once you are happy with the logo, export it. Make sure you select forever loop. Or else the logo animation will play only once. Also, make sure you select Animation Type – CSS Only
Check the downloaded logo by opening it on your browser.
Uploading logo to WordPress
You cannot upload SVG to WordPress directly as it will be blocked for security reasons. For this, we have to install an SVG support plugin. There are many available. Just install and activate them. Usually, they don’t have any other setting to care for. I personally prefer https://wordpress.org/plugins/svg-support/
Once done you will find that you are able to upload svg files. Go to your theme setting and upload your SVG logo.
If everything goes well, the new animated logo will adore your site.
