Question

加载HTML页面还不错

time                 uuid1       uuid2                                id
----                ------------ -----------                          ---------------
1555321822616000000     "hai"    00000000-0000-0000-0000-000000000001 45337

img, svg {
    background-color: #eee;
    margin: 20px;
}

只有一对SVG图片

circle.svg

<div>
    <img src="circle.svg"/>
    <img src="square.svg"/>
</div>

square.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 400 300" width="400" height="300">
    <circle cx="200" cy="150" r="100"
        stroke="red" fill="blue" stroke-width="10" />
</svg>

但是有超过一百个SVG图像，服务器受到请求的严重攻击。

一种解决方案是从专用服务器提供静态文件，但这只能避免问题。请求数量仍然很高。

如何将许多SVG图像捆绑在一个内？

Answer 1

您可以使用SVG精灵生成器来创建一个大文件，其中所有图像都对齐在其中。

SVG精灵生成器还将生成一个CSS文件，其中每个单独的SVG都将以特定的类表示。

在您的HTML中，您只需要按其类名称调用每个图像。

基本的sprite.css可以是：

.svg {
    background-image: url(sprite.svg) no-repeat;
}
.circle {
    background-position: top left;
    height:300px;
    width: 400px;
}
.square{
    background-position: top right;
    height:200px;
    width: 200px;
}

然后在您的html文件中，您可以调用：

<div>
    <div class="circle"></div>
    <div class="square"></div>
</div>

Answer 2

听起来您需要SVG精灵。我一直都在用这个把戏。这很棒。只需使您的return Group { HStack { Spacer() } textfield() ScrollView { textfield() } }块svg元素并将它们嵌套在symbol内，就像这样：

svg

请注意，您不希望单个<svg id="svg-sprite" xmlns="http://www.w3.org/2000/svg"> <symbol id="svg-circle" viewBox="0 0 400 300" width="400" height="300"> <circle cx="200" cy="150" r="100" stroke="red" fill="blue" stroke-width="10" /> </symbol> <symbol id="svg-square" viewBox="0 0 400 300" width="400" height="300"> <rect x="100" y="50" width="200" height="200" stroke="green" fill="gray" stroke-width="10" /> </symbol> </svg>元素上具有xlmns属性，而只希望根symbol。根svg不需要viewBox属性，因为它是在子svg元素中编码的。

然后，您可以通过symbol标签在HTML中的其他位置调用这些符号：

<use>

最后，您需要在CSS中隐藏精灵：

<svg>
  <use xlink:href="#svg-circle"></use>
</svg>

这里有一个Fiddle来演示。祝你好运！

Answer 3

以下是gael和maqam7的答案的结合，包括错误修复和一些详细信息。

首先，我们将两个SVG合并为一个。（我们编写自己的脚本，使用编辑器的宏，使用执行脚本的网站之一，或手动进行操作。）

sprite.svg

<svg id="mysprite" xmlns="http://www.w3.org/2000/svg">
    <symbol id="circle"
        viewBox="0 0 400 300"
        width="400" height="300">
        <circle cx="200" cy="150" r="100"
            stroke="red" fill="blue" stroke-width="10" />
    </symbol>

    <symbol id="square"
        viewBox="0 0 400 300"
        width="400" height="300">
        <rect x="100" y="50" width="200" height="200"
            stroke="green" fill="gray" stroke-width="10" />
    </symbol>
</svg>

当我们想要一个圆形或正方形时，我们use xlink:href属性（deprecated，但继续使用它），它将调用一个子精灵。

<div class="container">
    <svg>
        <use xlink:href="sprite.svg#circle"></use>
    </svg>
    <svg>
        <use xlink:href="sprite.svg#square"></use>
    </svg>
</div>

无需在body

中包含精灵

<img src="sprite.svg"/>

，因为每个svg元素中都引用了精灵。

因此，无需隐藏全局精灵。

#svg-sprite {
    display: none;
}

仅显示子部分。

一个警告：Chrome会直接加载img和svg，但是除非您运行本地服务器，否则将拒绝加载use / xlink:href。

剩余问题

我不确定这是否是最佳选择。可能是两个请求继续发送。只是缓存将捕获第二个相同的缓存。没有伤害。不过，如果有人可以填写详细信息，则通过隐藏的svg加载一次可能是更好的方法。

如何将许多SVG图像捆绑在一个图像中？

3 个答案: