SVG 是否支持嵌入位图图像？

小编典典

SVG 是否支持嵌入位图图像？

all

SVG 图像是纯矢量的还是我们可以将位图图像组合成 SVG 图像？应用于位图图像（透视、映射等）的变换怎么样？

编辑：图像可以通过链接引用包含在 SVG
中。请参阅 http://www.w3.org/TR/SVG/struct.html#ImageElement。我的问题实际上是位图图像是否可以包含在
svg 中，以便 svg 图像是自包含的。否则，无论何时显示 svg 图像，都必须遵循链接并下载图像。显然 .svg 文件只是 xml 文件。

阅读 144

2022-08-24

共1个答案

小编典典

是的，您可以引用image元素中的任何图像。并且您可以使用数据
URI来使 SVG 自包含。一个例子：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    ...
    <image
        width="100" height="100"
        xlink:href="data:image/png;base64,IMAGE_DATA"
        />
    ...
</svg>

svgelement 属性xmlns:xlink声明xlink为命名空间前缀并说明定义的位置。这让 SVG
读者知道什么xlink:href意思。

这IMAGE_DATA是您将图像数据添加为 base64 编码文本的地方。支持 SVG
的矢量图形编辑器通常可以选择嵌入图像进行保存。否则，有很多工具可以将字节流编码到 base64 和从 base64 编码。

这是来自 SVG 测试套件的完整示例。

2022-08-24