如何将许多SVG图像捆绑在一个图像中? [英] How can I bundle many SVG images inside just one?

问题描述

加载HTML页面还不错

It's not bad if I load an HTML page

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

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

只有一对SVG图片

circle.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>

square.svg

<svg
    xmlns="http://www.w3.org/2000/svg"
    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" />
</svg>

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

but with over a hundred SVG images, the server gets excessively hit by requests.

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

One solution is to serve the static files from a dedicated server, but this only dodges the problem. The number of requests remains high.

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

How can I bundle many SVG images inside just one?

推荐答案

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

The following is a combination of gael's and maqam7's answers, with a bug fix and some details.

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

First, we combine the two SVGs into one. (We write our own script, use an editor's macros, use one of the web sites that do it, or do it by hand.)

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属性(已弃用，但继续使用它)，它将调用子精灵.

When we want a circle or a square, we use the xlink:href attribute (deprecated but continue to use it), which will invoke a sub-sprite.

<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元素中都引用了精灵.

as the sprite is referenced within each svg element.

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

Hence there is no need to hide the global sprite.

#svg-sprite {
    display: none;
}

仅显示子部分.

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

One caveat: Chrome loads an img and svg directly, but will refuse to load use/xlink:href unless you run a local server.

剩余问题

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

I'm not sure this is optimal. It may be that two requests continue to be sent. It's just that the cache will catch the second as identical. No harm is done. Still, loading once via a hidden svg may be a better approach, if someone can fill in the details.

这篇关于如何将许多SVG图像捆绑在一个图像中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！