内嵌SVG代码会导致项目变慢吗？导入与内嵌SVG方案该如何选择？

1. 内嵌SVG增大构建包体积的说法是否属实？ #

该说法部分属实，具体影响取决于使用场景：

• 若同一个SVG在项目中被多次引用，每次都复制完整SVG代码内嵌会产生大量冗余代码，直接提升最终构建包的体积。
• 若SVG仅在项目中出现1次，内嵌和外部引入的资源体积几乎没有差异，甚至内嵌可以减少一次额外的HTTP请求开销，反而更优。
• 如果项目采用服务端渲染（SSR）方案，大量内嵌SVG会直接增大首屏返回的HTML文件体积，拖慢首屏渲染速度，这种场景下的体积负面影响会更明显。

2. 用<img src={crossSVG} alt="" />方式引入SVG后，能否调用内部ID实现动画？ #

完全无法实现。通过<img>标签加载的SVG属于独立的外部图像资源，其内部的DOM节点不会注入到当前页面的DOM树中，无论是CSS选择器还是JavaScript都无法获取到SVG内部的ID对应的节点，自然无法实现基于内部节点的动画效果。

如果不想直接在HTML中手写冗余的SVG代码，又需要操作SVG内部节点，可以使用以下成熟的工程化方案替代：

• React 项目可使用 @svgr/webpack loader，直接将SVG文件作为组件导入，渲染时会自动将SVG代码内嵌到DOM中，可正常操作内部节点的ID实现动画
• Vue 项目可使用 vue-svg-loader，实现效果同上
• 多小图标场景可采用SVG雪碧图方案，将所有图标打包到单个SVG文件中，通过<use>标签引用指定ID的图标，同时支持样式修改和动画控制

3. 直接内嵌SVG和外部引入SVG两种方案哪种更优？ #

没有绝对的最优方案，需要结合使用场景选择：

推荐使用内嵌（含组件化导入）的场景： #

• 需要修改SVG内部样式、实现基于内部节点的交互动画
• SVG体积极小（如1KB以内的小图标），单独发起资源请求的开销远大于内嵌的体积增量
• 属于首屏核心展示内容，需要避免资源加载导致的图标闪烁

推荐使用外部引入（<img>/静态资源引用）的场景： #

• SVG为不需要任何样式修改、交互的静态资源
• SVG体积较大（如10KB以上的插画、可视化图形），且复用率高，可依赖浏览器缓存降低重复加载成本
• 不需要对SVG内容做SEO识别的场景

内容的提问来源于stack exchange，提问作者N SARATH CHAND