如何将HTML对象的data属性指向内联SVG以优化页面加载性能

你尝试的object标签data属性引用页面内ID的写法本身不被浏览器支持，data仅能接收外部资源URL，因此该方案无法生效。

最优方案：标签复用内联SVG #

该方案完全满足减少代码冗余、提升加载性能的需求，仅需加载3次SVG内容，后续全为DOM引用，无额外资源请求，且原生支持JS交互、动画效果。

实现步骤 #

1. 页面顶部插入隐藏的SVG资源池，将3个需要复用的SVG内容全部内联到<defs>标签内，分别赋予唯一ID：

<!-- 仅加载一次的SVG资源池，默认不渲染 -->
<svg width="0" height="0" style="display: none;" aria-hidden="true">
  <defs>
    <!-- 点赞按钮SVG -->
    <svg id="like-button" viewBox="0 0 你原SVG的视口尺寸">
      <!-- 粘贴原likeButton.svg内的所有路径、动画、样式代码 -->
    </svg>
    <!-- 另外两个复用SVG同理添加，分别设置唯一ID -->
    <svg id="other-btn-1" viewBox="0 0 xxx xxx">
      <!-- 代码省略 -->
    </svg>
    <svg id="other-btn-2" viewBox="0 0 xxx xxx">
      <!-- 代码省略 -->
    </svg>
  </defs>
</svg>

2. 所有需要使用对应按钮的位置，直接通过<use>引用对应ID即可：

<!-- 复用点赞按钮示例 -->
<svg class="like-btn" width="24" height="24">
  <use href="#like-button"></use>
</svg>

优势说明 #

• 代码冗余极低：3个SVG仅保留一份完整代码，其余位置仅需1行引用代码
• 性能最优：无重复资源请求，所有引用均为DOM节点复用，内存占用远低于object方案
• 交互兼容：点击事件、内部JS动画均可正常运行，可直接给外层<svg>标签绑定事件、自定义样式

其他可选方案 #

方案二：外部SVG文件复用 #

如果不希望将SVG内联到HTML中，可将3个SVG整合到同一个外部icons.svg文件中（结构和上述内联资源池一致），引用时写法为：

<svg class="like-btn" width="24" height="24">
  <use href="/icons.svg#like-button"></use>
</svg>

浏览器仅会加载一次icons.svg文件，后续所有引用均走本地缓存，无重复请求。

方案三：缓存优化适配原有object写法 #

如果不想修改现有DOM结构，可给SVG资源的响应头添加长缓存规则Cache-Control: public, max-age=31536000，首次加载3个SVG后，剩余所有object请求均会直接读取本地缓存，不会产生额外网络耗时。该方案性能弱于<use>方案，每个object会创建独立的文档上下文，内存占用更高。

内容的提问来源于stack exchange，提问作者Charlie Moody