我正在加载带有堆叠图像的.svg文件，以优化加载时间并保持矢量图形的清晰度。我的图标使用一个文件，徽标的变化使用一个文件。
问题
我要渲染的某些图形在标题中或折叠上方，并且加载缓慢或在其他页面元素之后加载。我想像使用PNG一样快地加载它。
如果可能的话，我希望避免在整个站点使用图形时将SVG代码直接添加到HTML中。
HTML （页面为PHP）
<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">
SVG文件
<?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堆栈中的单个项目被隐藏并使用：
svg .icon { visibility: hidden }
svg .icon:target { visibility: visible }
在此之前，我曾使用display：none和display：inline，但效果不显着。