Streaming live at 10am (PST)

SVG Animation Using Custom Code JS

#1

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.

#2

Just insert your svgs in the embed element.

#3

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!

#4

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

#5

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>