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

147

SVG图像是纯粹矢量的，还是可以将位图图像组合成SVG图像？如何将变换应用于位图图像（透视图，映射等）？

编辑：通过链接参考，图像可能包含在SVG中。参见http://www.w3.org/TR/SVG/struct.html#ImageElement。我的问题是，实际上是否可以将位图图像包含在svg中，以便svg图像是自包含的。否则，无论何时显示svg图像，都必须遵循链接并下载图像。显然.svg文件只是xml文件。

image  svg  bitmapimage 
— ike
source

Answers:

207

是的，您可以引用<image>元素中的任何图像。您可以使用数据uri来使svg完全独立。一个例子：

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

点是您要添加编码的base64数据的位置，支持svg的矢量图形编辑器通常具有用于保存嵌入图像的选项。否则，周围有很多工具可用于与base64之间进行编码。

这是svg测试套件的完整示例。

— 埃里克·达尔斯特罗姆
source
2
@Aleksandar是一个单独的问题，我相信您可以在此站点上找到答案（将某些内容编码为base64并非特定于svg）。
— ErikDahlström'13年
1
@Erik-假设我在同一svg文件中重复了一千次相同的图像。我可以将base64数据放在一个位置，然后让图像从那里引用该数据吗？
— Rohit Vats 2013年
3
@Erik -没关系我有我的答案从这里- stackoverflow.com/questions/16685014/...。答案是关于在那里分组的讨论。:)
— Rohit Vats
3
不要忘记按xlink原样声明名称空间：xmlns:xlink="http://www.w3.org/1999/xlink"没有它，某些浏览器/查看器可能看不到您的图像
— Marc_Alx
1
仅供参考：根据我的经验，即使您未指定width并且height在svg image标签中，Chrome浏览器也会显示此图像。但是，如果省略这些属性，则Firefox和IE不会显示图像。因此，请确保指定它们！
— Stonecrusher
23

我在这里张贴了一个小提琴，在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>
— 达夫斯特沃特
source
17

您可以使用数据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转换。

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

— 加雷斯·欧文
source
如果SVG需要数据URI，那么这大概没有不利-我将编辑答案
— GarethOwen
嵌入式图像（数据URI）将与它们所在的文档一起缓存，请参见例如stackoverflow.com/questions/4791807/data-uris-and-caching
— ErikDahlström
的确如此-如果svg文档发生更改，即使位相同，嵌入的位图也会重新加载。如果我们链接到http URL，则可以将其单独缓存到svg文档中。
— GarethOwen 2011年
1
好点子。在我对Nick的答案的评论中，您将看到将位图图像嵌入svg图像的合理性。尽管您是对的，但是编码是糟糕且效率低下的。它应该是与svg图像一起移动的单独的二进制编码文件。
— chmike 2011年
2

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

— 缺口
source
这取决于用例。我正在考虑的用例是在其中复制svg文件并且不总是可以使用Internet访问（即名片）。IT还允许将卡的使用保密。使用链接的图像，图像的所有者可以跟踪其卡的所有显示，这可能对他来说很有趣，但对持卡人而言却不是。自我包含的svg图像很有意义。
— chmike 2011年
如果您使用指向Internet上某个地方的绝对URL，那么这是正确的。但是使用相对URL很容易，因此，如果SVG文件是本地的，则图像也将是本地的。如果还要求它必须是一个单个可再发行文件，则这将再次更改。
— 尼克
在某些情况下，您需要独立包含SVG图形-即，一个包含整个图像的文件。在文件系统上处理图像时，必须传输/存储多个文件以确保图像被渲染不是一件好事-事情可能不同步或太容易掉线。
— Minok
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.