移除object标签后SVG Sprite仍可用，原因及object作用疑问

问题场景 #

我在index.shtml中原本引入了一个隐藏的object标签，用于加载SVG Sprite文件：

<object data="icons/svg-sprite.svg" type="image/svg+xml" width="0" height="0" style="display: none;"></object>

我的svg-sprite.svg内容如下：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" focusable="false">
<defs>
        <symbol id="html_element_group_core" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" focusable="false" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24">
        <path d="M12,0C5.369,0,0,5.369,0,12s5.369,12,12,12s12-5.369,12-12S18.631,0,12,0zM12,21.6c-5.298,0-9.6-4.302-9.6-9.6S6.702,2.4,12,2.4s9.6,4.302,9.6,9.6S17.298,21.6,12,21.6zM12,7.2c-2.654,0-4.8,2.146-4.8,4.8s2.146,4.8,4.8,4.8s4.8-2.146,4.8-4.8S14.654,7.2,12,7.2z" />
    </symbol>
    </defs>

同时在index.shtml中通过以下代码引用SVG Sprite：

<svg class="group_icon svg_icon">
    <use xlink:href="icons/svg-sprite.svg#html_element_group_core"></use>
</svg>

移除最初的object标签后，SVG Sprite仍能正常工作，想知道：

• 这是为什么？
• object标签是否还有存在的必要？
• 该现象是否和直接引用外部SVG文件的写法有关？

解答 #

1. 为什么移除object标签后仍能正常工作？ #

现代主流浏览器（Chrome、Firefox、Edge、Safari等）已经支持<use>标签直接通过xlink:href（或标准的href属性）引用外部SVG文件中的<symbol>元素。当浏览器解析到带有外部锚点的<use>时，会自动发起HTTP请求获取目标SVG文件，解析后定位到对应id的<symbol>，并将其内容渲染到当前页面中，不需要提前通过object标签预加载SVG文件到文档上下文。

2. object标签是否还有存在的必要？ #

分两种情况判断：

• 不需要兼容老旧浏览器：如果你的项目只需要支持现代浏览器，这个隐藏的object标签完全没必要保留，直接使用外部<use>引用即可，还能减少不必要的DOM元素和请求。
• 需要兼容老旧浏览器：比如IE11及更早版本，或者非常老旧的移动端浏览器，这些浏览器不支持<use>跨文档引用外部SVG的特性。此时object标签的作用是把外部SVG加载到当前文档的上下文里，让<use>能找到对应的<symbol>。如果要兼容这类浏览器，要么保留object，要么把SVG Sprite内联到HTML文档中。

3. 该现象是否和直接引用外部SVG文件的写法有关？ #

完全相关。这个现象正是现代浏览器支持的外部SVG Sprite直接引用特性：

• 早期浏览器的<use>只能引用当前HTML文档内的SVG片段，所以必须通过object、iframe等方式把外部SVG注入到当前文档，才能让<use>找到对应的id。
• 现在的浏览器已经实现了跨文档引用SVG片段的能力，允许<use>直接通过#锚点指向外部SVG文件中的元素，因此不需要预加载的object标签了。

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