Streaming live at 10am (PST)

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.

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