Using Keyshape Animations in WordPress
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.
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
<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
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.
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
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.
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 created.