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

一个 SVG 图像是纯矢量的还是我们可以将位图图像组合成一个 SVG 图像？ 应用在位图图像(透视图、映射等)上的转换如何？

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

132820 次浏览
小开

它也可以包含位图。我认为你也可以在那上面使用转换。

小开

您可以使用 data:网址来嵌入图像的 Base64编码版本。但是它不是很有效，不建议嵌入大图像。链接到另一个文件有什么不可行的原因吗？

小开
最佳答案

是的，您可以从 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>

svg元素属性 xmlns:xlink将 xlink声明为 命名空间前缀并说明定义的位置。然后允许 SVG 读取器到 知道 xlink:href是什么意思。

在 IMAGE_DATA中，您可以将图像数据作为 base64编码的文本添加。支持 SVG 的矢量图形编辑器通常有一个保存嵌入图像的选项。除此之外，还有很多工具可以编码与 base64之间的字节流。

这是 SVG 测试套件的完整 例子。

小开

你可以使用 数据 URI来提供图像数据，例如:

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


<image width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>


</svg>

图像将经历所有正常的 svg 转换。

但是这种技术也有缺点，例如图像不会被浏览器缓存

小开

我在这里贴了一个小提琴，在一个 HTML 页面中显示了嵌入在 SVG 中的数据、远程和本地图像:

Http://jsfiddle.net/mxhpq/

<!DOCTYPE html>
<html>
<head>
<title>SVG embedded bitmaps in HTML</title>
<style>


body{
background-color:#999;
color:#666;
padding:10px;
}


h1{
font-weight:normal;
font-size:24px;
margin-top:20px;
color:#000;
}


h2{
font-weight:normal;
font-size:20px;
margin-top:20px;
}


p{
color:#FFF;
}


svg{
margin:20px;
display:block;
height:100px;
}


</style>
</head>


<body>
<h1>SVG embedded bitmaps in HTML</h1>
<p>The trick appears to be ensuring the image has the correct width and height atttributes</p>


<h2>Example 1: Embedded data</h2>
<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>


<h2>Example 2: Remote image</h2>
<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
</svg>


<h2>Example 3: Local image</h2>
<svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
</svg>




</body>
</html>
小开

如果您想在 SVG (裁判。)中多次使用该图像:

<image id="img" xlink:href="data:image/png;base64,BASE64_DATA" />


<use href="#img" />
<use href="#img" />

提交答案