SVG必须放置在HTML文件中才能实现动画效果吗？

并不是必须把SVG代码直接内嵌到HTML文件里才能实现SVG动画。
你提到的<img>标签引用SVG时无法用页面CSS/JS添加动画的描述是准确的：浏览器会把<img>加载的SVG判定为静态图片资源，做完全的上下文隔离，既不允许页面的CSS、JS访问SVG内部的DOM结构，也会禁止SVG内部的脚本执行，只有非常基础的SMIL动画可能在部分浏览器下生效，复杂动画、交互逻辑都没法正常跑。和<img>表现一致的还有CSS背景图引入的SVG，同样会被当做静态资源隔离。
除了直接把<svg>标签写在HTML里，你完全可以用其他方式引入外部SVG实现动画，不需要把大段SVG代码塞进HTML：

• 用<object>标签引入外部SVG
  这是引入外部可动SVG最常用的方案，写法如下：

  <object type="image/svg+xml" data="your-animated-file.svg" width="500" height="300"></object>
  

  这种加载方式不会触发静态资源隔离规则：你可以把CSS动画、SMIL动画、交互逻辑的JS全写在独立的SVG文件内部，引入后动画可以正常运行；如果SVG和当前页面同源，页面的JS也可以拿到SVG的DOM节点做动态控制。
• 用<iframe>标签引入外部SVG
  表现和<object>基本一致，SVG内部自带的动画、脚本都能正常执行，同源场景下同样支持父页面对SVG内容做修改控制。

如果你的SVG动画不需要和页面其他元素做深度联动（比如滚动描边、鼠标悬停触发SVG内部元素变形这类交互），完全可以把所有动画逻辑封装在独立SVG文件里，用上面两种标签引入即可，既方便资源复用，也能利用浏览器缓存减少页面代码体积。
如果要做和页面深度绑定的SVG交互效果，直接把<svg>代码内嵌到HTML里是最省心的选择：此时SVG和页面处于同一个DOM上下文，你可以直接用全局CSS选中SVG内部的路径、分组元素写样式和动画，也可以直接用JS绑定事件、修改属性，没有跨上下文的访问限制。

内容的提问来源于stack exchange，提问作者YUSUF LAWAL