Using Keyshape Animations in WordPress
Keyshape SVG animations can be added to WordPress Posts and Pages by installing a WordPress plugin. By default, WordPress doesn’t allow uploading SVG images for security reasons. For instance, random SVG files downloaded from the Internet may contain malicious JavaScript code. Everything should be safe if you use SVG files exported from Keyshape and set up WordPress to allow only the administrators to upload SVG images.
Note that SVG can be used as such in WordPress themes. There’s no need to install plugins to do that. However, creating WordPress themes is an advanced topic and won’t be discussed here. See the official WordPress Theme development documentation for information about WordPress themes.
Install the SVG Support Plugin
The WordPress Media Uploader doesn’t normally allow uploading SVG files. This can be changed by installing the SVG Support plugin.
After installing and activating the plugin as an administrator, go to the admin settings page “Settings > SVG Support” and restrict SVG file uploads to administrators only. By default, anyone with file upload capabilities or access to Media Library can upload SVG files. This setting allows only admins to upload them. Other settings don’t need changing and they can be left unselected.
After that, you can upload SVG files to WordPress. The next section shows how to get JavaScript running so that interactivity and KeyshapeJS animations play correctly.
SVG with Interactivity or KeyshapeJS (JavaScript) Animations
Displaying interactive or KeyshapeJS animations requires these steps:
- Add the SVG file to the Media Library or upload it when adding a new image to a Post or Page.
- Add the SVG image to the Post or Page.
- Select the SVG image, and choose “Edit as HTML” from the Image block toolbar’s three-dot menu.
- Replace the
<img>tag with an<object>tag:
<img src="https://example.com/wp-content/uploads/2022/09/myanim.svg"
alt="" class="wp-image-16"/>
needs to be replaced with
<object data="https://example.com/wp-content/uploads/2022/09/myanim.svg"
alt="" class="wp-image-16" type="image/svg+xml"></object>
Note that the src attribute has been changed to a data attribute and there is
an additional type attribute and an </object> end tag.
When you see a message saying “This block contains unexpected or invalid content.”, choose “Convert to HTML” from the three-dot menu. It will convert the Image block to a Custom HTML block.
Select “Preview” from the Block Toolbar to see a preview of the SVG image.
CSS Animations
It is also possible to use pure CSS animations in WordPress by just adding them to a page
without changing the <img> tag to an <object> tag.
However, web browsers cache SVG files so that their animations usually play only once when the page is loaded for the first time. It is recommended to use interactive animations or KeyshapeJS as described in the previous section to play animations consistently.
Try It Out
You can try the SVG Support plugin and how it manages SVG files on TasteWP. It contains the SVG Support plugin installed and activated. You only need to upload SVG files and add them to pages to see how they look like. You can access the online test website here: https://tastewp.com/new?pre-installed-plugin-slug=svg-support&redirect=options-general.php%3Fpage%3Dsvg-support&ni=true
Remember not to upload any confidential data to TasteWP.
Animate Reponsibly
Be nice to your website visitors. Auto-starting animations and long looping animations can be annoying to website visitors. Interactive content, which is played only when the user clicks it, is a user friendly way to show animations.
Document History
- Document created.