网页中的 SVG 图像是否有类似的精灵？答案

【问题标题】：Is there an equivalent of spriting for SVG images in web pages?网页中的 SVG 图像是否有类似的精灵？
【发布时间】：2023-03-21 20:30:01
【问题描述】：

SVG 图像不是位图，因此（除非我遗漏了什么）你不能像处理网页上使用的其他图像文件那样进行精灵（参见http://www.alistapart.com/articles/sprites）。

但是是否有一种等效的机制来仅将 SVG 图像的一部分显示为 CSS 背景？

例如虚构语法：

div.my-special-svg-div {
    background-image: url(sprite-image.svg#one-shape-in-the-svg-file);
}

【问题讨论】：

标签： css svg css-sprites

【解决方案1】：

您可以使用“传统”CSS sprite 技术来分割具有背景位置的 SVG 图像，here's a quick example，但如果您也开始使用 background-size，它确实会有点混乱。如果您在 SVG 图像上定义尺寸，可能会更容易：

<svg version="1.1" 
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     width="320"
     height="240"
     viewBox="0 0 320 240">

【讨论】：

这是一个很有帮助的答案，他正在定义实际 SVG 图像文件本身的大小。

【解决方案2】：

我尝试过的一种方法不是精灵，但可以实现类似的目标，即使用数据 URI 将 url 编码的 SVG 图像直接包含在 CSS 文件中。

例如

background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20fill%3D%22%23CCD%22%20%20width%3D%22100%25%22%20height%3D%22100%25%22%2F%3E%0A%20%20%3Crect%20fill%3D%22%23039%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20rx%3D%221em%22%2F%3E%0A%3C%2Fsvg%3E);

（见http://intertwingly.net/blog/2008/09/07/SVG-via-CSS）

因此，您所有的 SVG 图像最终都在 CSS 文件中。 Gzipping 应该可以很好地将多个 SVG 文件压缩到一个 CSS 文件中。

据我所知，上面的 CSS 适用于 Opera 9.5+、IE 9 beta、Safari 5 和 Chrome 6。似乎不适用于 Firefox 3.6 或更早版本的其他浏览器。

【讨论】：

请注意，它可以在 Firefox 4.0 betas 中运行：bugzilla.mozilla.org/show_bug.cgi?id=231179
关于可能通过 cmets 中的 ID 进行精灵化的有趣讨论，来自 bugzilla.mozilla.org/show_bug.cgi?id=231179#c38
是的，在我尝试过之后，我认为值得提出这个想法；）顺便说一句，您可以使用“传统”CSS sprite 技术来分割具有背景位置的 SVG 图像，尽管它确实如此如果你也开始使用 background-size 会有点混乱。
@robertc: 啊，当然——我对 SVG 做的不多，但是你可以指定像素尺寸和 x/y 坐标，不是吗？所以我想这对精灵有用。如果您对此有任何经验并想将其写成答案，那么您最值得点赞。

【解决方案3】：

您可以使用 SVG 堆栈：

http://simurai.com/post/20251013889/svg-stacks

【讨论】：

链接现在断开:(

【解决方案4】：

SVG 在技术上甚至不受 W3C 标准的支持。如果没有插件，它甚至无法在 IE 中运行。也许你会发现一些不起眼的 Mozilla 插件可以让你做到这一点，但据我所知，你的代码不会验证。

【讨论】：

“SVG 在技术上甚至不受 W3C 标准的支持。” - 你是什么意思？ It is a W3C standard.
“如果没有插件，它甚至无法在 IE 中运行。” — 正如我所说，似乎可以在没有插件的情况下在 IE 9 beta 中工作。
“我知道你的代码不会验证”——哪个代码？我放在上面的 CSS 验证得很好。
除此之外，很好的答案。