SVG是否支持位图图像的嵌入？
SVG是否支持位图图像的嵌入？
提问于 2011-06-06 16:56:48
SVG图像是纯粹的矢量图像，还是我们可以将位图图像组合成SVG图像？如何将变换应用于位图图像(透视、映射等)？
SVG ：图片可以通过链接引用包含在中。参见http://www.w3.org/TR/SVG/struct.html#ImageElement。我的问题实际上是，是否可以将位图图像包含在svg中，以便svg图像是自包含的。否则，无论何时显示svg图像，都必须遵循该链接并下载该图像。显然.svg文件就是简单的xml文件。
回答 6
Stack Overflow用户
回答已采纳
发布于 2011-06-06 18:02:53
可以，您可以引用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的字节流进行编码。
下面是来自SVG测试套件的完整example。
Stack Overflow用户
发布于 2013-01-21 21:51:01
我在这里发布了一个小提琴，在HTML页面中显示了嵌入到SVG中的数据、远程和本地图像：
<!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>Stack Overflow用户
发布于 2011-06-06 18:07:29
您可以使用Data 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转换。
但是这种技术也有缺点，例如，浏览器不会缓存图像
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/6249664
复制相关文章
相似问题
腾讯云开发者
