Must an SVG be placed in the html file for it to be animated

Question

I read that if an SVG file is referenced through the image tag it cannot be animated with CSS or JavaScript, does that mean that for an SVG to be animated, it must be placed in the HTML file.

Answer 1

No, here are five examples, where the only one that doesn't work is the one in an <img> element (you can click on the blue color ones and it should change to red).

<p>inline:
<svg width="20" height="20" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <script>
    window.addEventListener('load', e => {
      document.querySelector('rect').addEventListener('click', e => {
        e.target.setAttribute('fill', 'red');
      });
    });
  </script>
  <rect width="10" height="10" fill="blue"/>
</svg>
</p>

<p>img: <img width="20" height="20" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8c2NyaXB0PjwhW0NEQVRBWwogICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCBlID0+IHsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigncmVjdCcpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZSA9PiB7CiAgICAgICAgZS50YXJnZXQuc2V0QXR0cmlidXRlKCdmaWxsJywgJ3JlZCcpOwogICAgICB9KTsKICAgIH0pOwogIF1dPjwvc2NyaXB0PgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iYmx1ZSIvPgo8L3N2Zz4KCg=="/></p>
<p>object: <object width="20" height="20" data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8c2NyaXB0PjwhW0NEQVRBWwogICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCBlID0+IHsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigncmVjdCcpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZSA9PiB7CiAgICAgICAgZS50YXJnZXQuc2V0QXR0cmlidXRlKCdmaWxsJywgJ3JlZCcpOwogICAgICB9KTsKICAgIH0pOwogIF1dPjwvc2NyaXB0PgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iYmx1ZSIvPgo8L3N2Zz4KCg=="></object></p>
<p>embed: <embed width="20" height="20" type="image/svg+xml" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8c2NyaXB0PjwhW0NEQVRBWwogICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCBlID0+IHsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigncmVjdCcpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZSA9PiB7CiAgICAgICAgZS50YXJnZXQuc2V0QXR0cmlidXRlKCdmaWxsJywgJ3JlZCcpOwogICAgICB9KTsKICAgIH0pOwogIF1dPjwvc2NyaXB0PgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iYmx1ZSIvPgo8L3N2Zz4KCg=="/></p>
<p>iframe: <iframe width="20" height="20" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8c3ZnIHZpZXdCb3g9IjAgMCAxMCAxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8c2NyaXB0PjwhW0NEQVRBWwogICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ2xvYWQnLCBlID0+IHsKICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigncmVjdCcpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZSA9PiB7CiAgICAgICAgZS50YXJnZXQuc2V0QXR0cmlidXRlKCdmaWxsJywgJ3JlZCcpOwogICAgICB9KTsKICAgIH0pOwogIF1dPjwvc2NyaXB0PgogIDxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0iYmx1ZSIvPgo8L3N2Zz4KCg=="></iframe></p>

This is the markup of the SVG:

<?xml version="1.0" standalone="no"?>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <script><![CDATA[
    window.addEventListener('load', e => {
      document.querySelector('rect').addEventListener('click', e => {
        e.target.setAttribute('fill', 'red');
      });
    });
  ]]></script>
  <rect width="10" height="10" fill="blue"/>
</svg>