SVG是否支持embedded位图图像？
SVG图像是纯vector图像还是可以将位图图像组合成SVG图像？ 如何应用变换位图图像（透视，映射等）？
编辑 ：图像可能通过链接引用包含在SVG中。 请参阅http://www.w3.org/TR/SVG/struct.html#ImageElement 。 我的问题是事实上，如果位图图像可能包含在svg内，以便svg图像将自我包含。 否则，每当显示svg图像时，都必须遵循链接并下载图像。 显然，.svg文件只是xml文件。
是的，您可以引用<image>元素中的任何图像。 你可以使用数据uri来完成自己的svg。 一个例子：
<image width="100" height="100" xlink:href="data:image/png;base64,...">
点是你添加编码base64数据的地方，支持svg的vectorgraphics编辑器通常可以selectembedded图像进行保存。 否则，有很多工具可以用来编译base64和从base64编码。
以下是svgtesting套件的完整示例 。
我在这里张贴了一个小提琴，在HTML页面中显示embedded到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.ukhttp://img.dovov.comsrpr/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>
您可以使用数据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转换。
但这种技术有缺点，例如图片不会被浏览器caching
您可以使用data: URL来embedded图像的Base64编码版本。 但效率不高，不build议embedded大图片。 任何连接到另一个文件的原因是不可行的？
也可以包含位图。 我想你也可以使用转换。
