Can you make a simple call to an external javascript file inside an SVG, onload?

Question

I have a SVG image. I would like to program that SVG image to call an external javascript file when it loads. I have tried a few different strategies and none of them have worked. I feel the closest I have gotten is by putting creating an alert in an onload function in the <svg> tag.

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="474.000000pt" height="316.000000pt" viewBox="0 0 474.000000 316.000000"
 preserveAspectRatio="xMidYMid meet" onload="alert(2)">

The alert in the onload box works, but I'm not sure if you can call upon some external javascript code inside those quotes. Ideally, that is what I would do.

I have also tried adding a standard <script src="https://mycode.js"></script> tag right under the beginning <svg> tag but before the <g transform=..... and that doesn't work either. I can call an alert, and that will work, but not an external script. The shortest/simplest solution is pretty important in this scenario too.

Any help is greatly appreciated.

Answer 1

This is what I would try:

function loadScript( url ) {
  let script = document.createElement( "script" )
      script.type = "text/javascript";
      script.src = url;
     document.head.appendChild(script); 
}

//Set the event listener, in this case vue:

<svg onload="loadScript('https://mycode.js')" />

If you are not using vue or react or something similar you need to add the onload function with a querySelector or something.