1. Home
  2. Tips
  3. Animated SVG Image Problem
  1. Home
  2. Troubleshooting
  3. Animated SVG Image Problem

Animated SVG Image Problem

The Problem

When I add animated SVG images to my site, they don’t animate.

The Cause

When you add an SVG image to your site’s content in Blocs, it is typically added as a standard HTML image tag (image Bric). Animated SVG images usually have additional code inside them, this additional code will not be executed by the browser, when the SVG image is loaded as a standard static image.

The Solution

Open your SVG image with the text editor of your choice and copy all of the code contents from within the SVG file. Inside of Blocs add a Code Widget to your page and take care to disable the in-app preview feature of the code widget. Now double click the code widget on the design canvas and paste in the SVG code into the code input window that is displayed.

Now when you preview your site using the Blocs in app preview mode, the SVG image will animate as expected.

Updated on 13th May 2020

Was this article helpful?

Related Articles