SVG Animation Using Custom Code JS

I’m trying to animate an SVG file using a custom script, but looking at the DOM the SVG is referenced with an < img > tag with a .svg extension, rather than an < svg > tag.

Does this impact the scripts I have running as the scripts are referencing classes/ids that aren’t visible in the DOM? As of now it’s not animating and I’m wondering if there’s a workaround for that.

Just insert your svgs in the embed element.

Unfortunately the svg is more than 10,000 characters so I’m getting an error. Not sure what to do about that.

That’s definitely a workaround though!

Hm, I wonder if such huge svgs being placed inline won’t cause other issues with site performance?

If anyone was wondering, I wrote a script as a workaround to view the animations in webflow whilst working on it. Once the site is published, the animations take place, but are static during the designer phase: All I did was embed a div with the class of “img” as a placeholder that would later be populated by the svg code.

<script>
document.addEventListener("DOMContentLoaded", function(){
  var bannerImage = document.querySelector('.img');
  fetch(img.src)
    .then(function(response) {
      return response.text();
    }).then(function(svgStr) {
      img.parentNode.innerHTML = svgStr;
      var script = yourAnimation();
      });
    });
})
</script>

Hi @DavidKnight - would you mind explaining your work-around a bit please? I have exactly the same issue (but for an SVG of a map with a bit of custom JS embedded to add interactivity on hover over certain regions).

Where did you put your custom code? And what is the fetch(img.src) referencing?
Thanks :slight_smile: