How to Add SVG Animation to WordPress
You will find a written version of this tutorial below.
Just to show you how this works I've created this sample page. Let's click on preview, I've only designed one simple section. A simple headline, button, and basic header. For now, I've loaded a PNG illustration and I'm going to replace it with SVG animation. I'm using the default WordPress theme named 2017, which is easy to customize:
To get these plugins, go to Add New, search by name Safe SVG. Here it is, you just have to install it, and do the same for Simple CSS.
Now let's go to the Pages section and edit our page. As I mentioned before, for now, I have a PNG image here but I will place an animated SVG here instead. I will replace it with this. I've animated this ship captain character with SVGator, using morph and other animators:
Alright back to WordPress. I will now delete this PNG. Click on the Plus icon here and choose custom HTML. Now all I have to do is paste the code from my clipboard here, there:
Now let's update our page and preview. The animation works perfectly:
I'm now gonna change the background as well. Remember the plugin Simple CSS I mentioned before? Here it's where it comes in handy. Here is the code I wrote to customize the theme a little. This is the color code for the background, which I'm going to replace with the SVG animation that I'm going to show right now:
Back to SVGator, I need to go to My projects, I'm not going to save. I’ll open up this project, and play. You can use animated SVG for the background as well:
Go to Media -> Add New -> Select Files -> I will select the SVG that I named Background and click open. Now click on the SVG, and copy this link over here:
Close this, and go back to the page editor. Scroll down to where I have my color code, select and delete that color code, then write “ white URL(paste the code in) no-repeat; ”. Now let's update and preview.
Adding SVG animations to WordPress isn't that complicated anymore. Thanks for watching.
Still got questions? Send us an email to firstname.lastname@example.org and we will get back to you as soon as we can.