svg animation

Add animated SVG to WordPress

Updated on: January 23, 2020

In case you've been using the SVG Support and Save SVG plugins to add animated SVG files to WordPress, please note that these plugins will not work with the files exported from SVGator 2.0.

Good news is that we've found two different solutions for this problem, so in case you have a WordPress site, please be assured that you can keep using animated SVG (and it is very recommended to do so).

Besides advanced features like Morph or Path animation, SVGator 2.0 also comes with interactive events like animate on mouse-over or animate on-click. For this reason, you can choose to export the SVG with JavaScript as the animation type. This means that JavaScript will be embedded in the SVG code.

Unfortunately, because of the embedded JavaScript code, the WordPress library will make the animation entirely invisible and useless.

Now here are the solutions:

  1. This one implies uploading the SVG to an external file storing service:

Some of the biggest storing services are :

Or you can set up your own webserver to serve the files.

Once you've uploaded your file , just use the external link in a WordPress custom HTML block. Please see the example below:

<object
type="image/svg+xml" 
data="https://cloud.example.com/assets/animated.svg">
</object>

2 .  First, export your SVG from SVGator with JavaScript as the animation type.

In the code, you must replace <>[] as they will be considered invalid by WordPress. Please note that you should replace just what's between the  <script></script> tags, as that's the JavaScript part of the SVG.

You can do this with any editor that has global string replacement, but we prefer Visual Studio Code.

To replace the <>[] characters all at once, copy the code that's between the <script></script> tags to another file. Search for the script tags with the ctrl+f shortkey:

Now select the code, cut and copy it to a new file:

Your SVG should look like this with the empty script tags:

In the new file that you've just created you have to remove the CDATA  elements or the SVG will not work. Just erase '<![CDATA['  at the beggining of the file and the  ']]>' characters at the end of the file.

Next, replace the invalid characters using search and replace.

In Visual Studio Code, use the ctrl + F shortkey and click the arrow at the beginning of the search input to open the Replace input. Make sure that you are using the 'Replace all' option.

Replace the folowing characters with the corresponding HTML code:

  • '<' replace with &#60;
  • '>' replace with &#62;
  • '[' replace with &#91;
  • ']' replace with &#93;

After you've replaced these characters, copy the entire code back between the script tags in the SVG.

Now all you have to do is to copy the SVG code and add it to your WordPress page in a custom HTML block:

It should look like this:

Now just click preview to see the animation:

Note: If you see this message and would like to edit the HTML block, just click 'Convert to HTML'. It will not affect the SVG.

We will keep this article updated. In case this didn't work for you or you've found a better solution, please let us know.


Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.