数据 URI——是否可以有多种格式重叠？答案

【问题标题】：Data URIs -- is it possible to have multiple formats overlapping?数据 URI——是否可以有多种格式重叠？
【发布时间】：2022-01-04 17:37:51
【问题描述】：

假设我有一个这样的背景 gif：

data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7

还有一个 SVG：

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'
%3e%3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z'/%3e
%3c/svg%3e

我想将 SVG 放在 GIF 之前，但要在一个数据 URI 中完成。我该怎么做呢？

【问题讨论】：

为什么要这样做？数据 URL 通常代表单个文件，但您的串联既不是有效的 GIF 文件也不是有效的 SVG 文件。
将 gif 作为图像保存在 SVG 文件中。
@SuperStormer 用于创建 NFT，尤其是具有将要更新的背景的 NFT。
一次只能显示一个图像的问题通常可以通过使用 HTML 页面来解决（lol）。但在这种情况下，其中一个文件是 SVG，GIF 可能只是 SVG 的一部分，就像 @RobertLongson 建议的那样。

标签： css svg svg-animate data-uri

【解决方案1】：

感谢 Robert 的建议 - 将图像嵌入 SVG。我还需要添加 'xmlns:xlink' 信息。

data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100'> <image xlink:href='https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/VAN_CAT.png/440px-VAN_CAT.png' width='100' height='100' /> %3cpath d='M22 38V51L32 32l19-19v12C44 26 43 10 38 0 52 15 49 39 22 38z' stroke='red'/%3e %3c/svg>

【讨论】：

那行不通。内部图像本身必须是数据 url。
@RobertLongson 感谢您的反馈。你能澄清一下你所说的它不起作用是什么意思吗？当我将该代码复制并粘贴到浏览器中时，我可以看到 SVG 和背景图像。
浏览器的url栏有些特殊，不受限制。尝试使用图像元素或将其用作背景图像，您就会发现问题。