SVG 图像是纯矢量的还是我们可以将位图图像组合成 SVG 图像？ 应用于位图图像的变换（透视、映射等）怎么样？
编辑：图像可以通过链接引用包含在 SVG 中。见http://www.w3.org/TR/SVG/struct.html#ImageElement。我的问题实际上是位图图像是否可以包含在 svg 中，以便 svg 图像是自包含的。否则，无论何时显示 svg 图像，都必须遵循链接并下载图像。显然 .svg 文件只是 xml 文件。
【问题讨论】：
标签： image svg bitmapimage
是的，您可以引用 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 编码。
这是来自 SVG 测试套件的完整 example。
【讨论】：
xlink：xmlns:xlink="http://www.w3.org/1999/xlink" 一些浏览器/查看器可能无法看到您的图像
width 和 height，Chrome 浏览器也会显示此图片。但是，如果您省略这些属性，Firefox 和 IE 将不会显示图像。因此，请务必指定它们！
我在这里发布了一个小提琴，在 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>
【讨论】：
您可以使用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 转换。
但是这种技术也有缺点，比如图片不会被浏览器缓存
【讨论】：
您可以使用data: URL 嵌入图片的 Base64 编码版本。但它不是很有效，不建议嵌入大图像。链接到另一个文件的任何原因是不可行的？
【讨论】：
也可以包含位图。我认为您也可以对此使用转换。
【讨论】：
如果您想在 SVG (Ref.) 中多次使用该图像：
<image id="img" xlink:href="data:image/png;base64,BASE64_DATA" />
<use href="#img" />
<use href="#img" />
【讨论】：