How to use SVGator Plugin for WordPress

Since WordPress doesn't permit the uploading of SVG files containing JavaScript, we created our own plugin to simplify the process of adding your animations.

The SVGator plugin for WordPress assists in automatically inserting SVGator animations into your website.

In order to add animated SVGs to WordPress using the SVGator plugin you need to follow these steps:

  1. Install the SVGator plugin
  2. Connect WordPress with your SVGator account
  3. Import your SVG to WordPress
  4. Add your SVG on a page

Below, we’ll provide a more detailed explanation of these steps.

1. Install the SVGator plugin

Go to your ‘Plugins’ section on the left, click ‘Add new’ and search for ‘SVGator’.

Next, click on ‘Install now’ then click ‘Activate’.

Installing the SVGator WordPress plugin
Step 1 - Install the SVGator WordPress plugin

2. Connect WordPress with your SVGator account

Select the ‘SVGator’ section in your WordPress menu, log in to your SVGator account (if you were not logged in already), then press ‘Connect my account’.

Connecting the plugin with your SVGator account
Step 2 - Connect WordPress with your SVGator account

Press the ‘Authorize’ button to connect your SVGator project library with your WordPress account.

Authorizing the connection betwenn WordPress and your SVGator account
Authorizing the connection between WordPress and SVGator

Now you should see all your projects from your SVGator library.

NOTE: If necessary, you have the option to revoke access at any time. You can do this by logging into app.svgator.com, accessing 'My Account', navigating to the '3rd Party Apps' section, and clicking on the 'Delete' button to revoke access.

Alternatively, within your WordPress SVGator Plugin, simply press the 'Disconnect' button located in the top right corner.

Revoking 3rd party apps access in your SVGator account
Revoking 3rd party apps access in your SVGator account

3. Import your SVG to WordPress

Upload your project by selecting 'Import to Media'; it will be exported using the actually saved export settings in your SVGator Account.

Importing your SVG project to the Media Library
Step 3 - Import your SVG to WordPress

The SVG project will then appear in your WordPress media library.

Imported SVG appearing in the WordPress Media Library
Imported SVG appearing in your Media Library

NOTE: If the project or export settings are not modified in your SVGator account, you can export it multiple times and it will not increase the number of your (Free) SVGator account exports.

4. Add your SVG on a page

You can add your SVG file in many ways.

Open an existing ‘Post’/’Page’ or ‘Add New Post’/’Add New Page’ in WordPress then click on the ‘Add block’ icon on the page, select ‘SVGator’ to add an SVGator block, then select one of the following:

  • ‘Import from SVGator’ tab: import the files directly from your SVGator account with existing export settings. Make sure you reload the WordPress page after you make a modification on the export settings of your project in SVGator.
  • ‘Media Library’ tab: you can choose from existing files you previously loaded in WordPress from your computer.

NOTE: The distinction between the 'Media Library' and 'Import from SVGator' is that the 'Media Library' comprises already exported files in your SVGator account. On the other hand, 'Import from SVGator' contains your real-time SVGator projects, along with your current export settings.

Adding a SVGator block to a page
Step 4 - Add your SVG on a page
Importing animated SVG projects from SVGator
Import from SVGator option

NOTE: SVGs exported with the 'JavaScript' animation type won't start in the 'Editor' view; they'll start only after you click the 'View Post' button. In contrast, SVGs exported with 'CSS Only' animation will start in the 'Editor' as well.

If the SVG looks to be too large on your page, simply resize it using the resize controls around it.

Resizing the SVG block
Using the resize controls

All you have to do now is hit the ‘Update’ button, and click the ‘View Page’ link prompted, so you can enjoy your SVG animation on your WordPress page.

If you encounter issues with the ‘SVGator’ plugin, you can still refer to and utilize the manual methods outlined on our other help center page - 'How to Add Animated SVG to WordPress'.

Other useful Help Center articles from us:

How to Add Animated SVG to Your Website | SVGator Help
You can use an <img> or an <object> tag, or you can simply place the SVG code on your site. If it’s an interactive SVG, you should use the <object> tag.
How to Add Animated SVG to Squarespace | SVGator Help
You can use SVG animation on Squarespace if you are a Business or Commerce user. Add a new code block and copy the entire SVG code into the html block.
How to Add Animated SVG to WordPress? | SVGator Help
Download SVGator’s plugin for WordPress and add stunning SVG animations to your website right away! Import your projects to your Media Library. Try Now!

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