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).
Now here are the solutions:
- 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>
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 <
- '>' replace with >
- '[' replace with [
- ']' replace with ]
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 email@example.com and we will get back to you as soon as we can.