image - SVG 是否支持位图图像的嵌入？

Question

SVG 图像是纯矢量图像还是可以将位图图像组合成 SVG 图像？ 对位图图像应用变换(透视、映射等)怎么样？

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

Answer 1

是的，您可以从 image 元素引用任何图像。您可以使用 data URIs使 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>

svg 元素属性 xmlns:xlink 将 xlink 声明为 namespace prefix并说明定义在哪里。然后，SVG 阅读器可以 know what xlink:href means .

IMAGE_DATA 是您将图像数据添加为 Base64 编码文本的位置。支持 SVG 的矢量图形编辑器通常具有嵌入图像保存的选项。除此之外，还有很多工具可用于将字节流编码为 Base64 或从 Base64 编码。

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