Html 在<；中的折叠SVG堆栈图形上方；对象>；标记，使用数据属性获取，加载速度慢

我正在加载带有堆叠图像的.svg文件，以优化加载时间并保持矢量图形清晰。我使用一个文件作为我的图标&一个文件作为我的徽标变体

问题

我想呈现的一些图形位于页眉中或折叠上方，加载速度较慢或在其他页面元素之后加载。我想加载它的速度和我使用PNGs时一样快

如果可能的话，我希望避免将SVG代码直接添加到HTML中，因为图形正在站点范围内使用

HTML（页面为PHP）

---

在此之前，我使用了display:none&display:inline，但没有显著效果。

您是否比较了使用

作为SVG而不是
标记的加载时间？一般来说，如果我只是使用SVG进行显示，并且页面中没有CSS或脚本需要引用它，那么我只使用基本的
标记。@madebydavid我刚刚尝试了这个，速度有了一些提高，盒子也不像盒子那样在加载时重新缩放，这很好。使用的原因是为了浏览器兼容性，以便正确读取SVG堆栈。MicrosoftEdge根本不显示SVG堆栈，只是将其留空。我相信旧的IE版本也没有。没错，支持并不完美：（不过有一些备用选项-@madebydavid非常感谢。我想实现这个，但没有一个好的教程。但是这会有很大帮助。
<object data="images/charactir-logos.svg#charactir-logo-creative" 
type="image/svg+xml" alt=""></object>

<link rel="preload" href="images/charactir-logos.svg" 
as="image" type="image/svg+xml">

<?xml version="1.0" encoding="utf-8"?>
<svg id="icon" class="icon" version="1.1" 
xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 250 300" enable-background="new 0 0 250 300"   
xml:space="preserve">
<style type="text/css">
rect, line { shape-rendering: crispEdges; }
svg .icon { visibility: hidden }
svg .icon:target { visibility: visible }
</style>
... following is duplicated for each graphic entry
<svg viewBox="0 0 250 300">
<g id="charactir-logo-creative" class="icon">
... path data here
</g>
</svg>
... end of entry
</svg>

svg .icon { visibility: hidden }
svg .icon:target { visibility: visible }