SVG 是否支持嵌入位图图像? [英] Does SVG support embedding of bitmap images?

问题描述

SVG 图像是纯矢量图像还是我们可以将位图图像组合成 SVG 图像?应用于位图图像的变换(透视、映射等)如何?

Is an SVG image purely vectorial or can we combine bitmap images into an SVG image ? How about transforms applied on the bitmap images (perspective, mappings, etc.) ?

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

Edit: Images may be included in an SVG by link reference. See http://www.w3.org/TR/SVG/struct.html#ImageElement. My question was in fact if bitmap images may be included inside the svg so that the svg image would be self contained. Otherwise, whenever the svg image is displayed the link must be followed and the image downloaded. Apparently .svg files are simply xml files.

推荐答案

是的，您可以从 image 元素引用任何图像.您可以使用 数据 URI 使 SVG 成为自包含的.一个例子:

Yes, you can reference any image from the image element. And you can use data URIs to make the SVG self-contained. An example:

<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 声明为 命名空间前缀 并说明定义在哪里.然后允许 SVG 阅读器 知道什么 xlink:href 表示.

The svg element attribute xmlns:xlink declares xlink as a namespace prefix and says where the definition is. That then allows the SVG reader to know what xlink:href means.

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

The IMAGE_DATA is where you'd add the image data as base64-encoded text. Vector graphics editors that support SVG usually have an option for saving with images embedded. Otherwise there are plenty of tools around for encoding a byte stream to and from base64.

这是一个完整的示例 来自 SVG 测试套件.

Here's a full example from the SVG testsuite.

这篇关于SVG 是否支持嵌入位图图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！