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

115

是SVG图像纯粹的矢量或者我们可以结合的位图图像到SVG图像？对位图图像应用变换（透视，映射等）如何？SVG是否支持嵌入位图图像？

编辑：图像可以被包括在由链接引用的SVG。见http://www.w3.org/TR/SVG/struct.html#ImageElement。我的问题是事实上，如果位图图像可能包含在svg中，以便svg图像将被自包含。否则，只要显示svg图像，就必须遵循链接并下载图像。显然，.svg文件只是xml文件。

来源

2011-06-06 chmike

158

是的，你可以从<image>元素引用任何图像。您可以使用data uri's使svg完全独立。举个例子：

<image width="100" height="100" xlink:href="data:image/png;base64,...">

的点就是你添加base64编码数据，支持SVG矢量图形编辑器通常用于嵌入式图像保存选项。否则，有很多工具可用于base64编码。

下面是来自SVG测试套件的完整example。

来源

2011-06-06 10:02:53

如果我不使用矢量图形编辑器（例如我想用C++或Python创建我的svg），如何获得bmp图像的编码base64数据？ – Aleksandar 2013-05-13 08:28:53

@Aleksandar这是一个单独的问题，我相信你可以在这个网站上找到答案（对base64进行编码并不是svg特定的）。 – 2013-05-13 08:41:33

@Erik - 假设我在同一个svg文件中有相同的图像重复千次。我可以在一个地方放置base64数据并让图像参考那里的数据吗？ – 2013-10-26 18:54:30

-1

也可以包括位图。我认为你也可以使用转换。

来源

2011-06-06 08:59:36 mightyplow

确实。我刚刚找到这个链接：http://www.w3.org/TR/SVG/struct.html#ImageElement。不幸的是，它并没有回答我注意到的问题没有在问题中说明。我将编辑该问题。 – chmike 2011-06-06 09:18:50

可以使用data: URL嵌入图像的Base64编码版本。但它效率不高，不建议嵌入大图像。链接到另一个文件的任何原因都不可行？

来源

2011-06-06 09:57:37 Nick

这取决于用例。我正在考虑的用例是svg文件被复制和互联网访问并不总是可用的（即名片）。 IT也允许保持卡的私密性。通过链接的图像，图像的所有者可以跟踪其可能对他感兴趣的所有卡片显示，但不能用于持卡人。自包含的svg图像是有道理的。 – chmike 2011-06-08 06:41:19

如果您使用指向Internet某处的绝对URL，则情况属实。但是，使用相对URL很容易，所以如果SVG文件是本地的，则图像也会如此。如果你也有要求它必须是一个单一的可再发行文件，那么这又改变了一切。 – Nick 2011-06-09 09:43:20

有一些用例可以让SVG图形自成一体 - 也就是说，包含整个图像的一个文件。不得不传输/存储多个文件以确保呈现图像在处理文件系统上的图像时不是一件好事 - 事情可能会不同步或者太容易丢失。 – Minok 2013-11-25 21:59:39

你可以使用一个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变换。

但该方法的缺点，例如图像不会被浏览器

来源

2011-06-06 10:07:28 GarethOwen

如果SVG需要数据URI，那么这可能不是缺点 - 我将编辑我的答案 – GarethOwen 2011-06-06 12:38:08

嵌入式图像（数据URI）将与它们所在的文档一起缓存，请参阅http://stackoverflow.com/问题/ 4791807/data-uris-and-caching – 2011-06-07 09:01:30

准确地说 - 如果svg文档发生变化，嵌入的位图将被重新加载，即使它们相同。如果我们链接到一个http URL，它可以分别缓存到svg文档中。 – GarethOwen 2011-06-07 09:34:37

我在这里发表小提琴，显示一个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>

来源

2013-01-21 13:51:00 davestewart

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

回答

相关问题