image - Does SVG support embedding of bitmap images?

Question

Is an SVG image purely vectorial or can we combine bitmap images into an SVG image ? How about transforms applied on the bitmap images (perspective, mappings, etc.) ?

Edit: Images may be included in an SVG by link reference. See http://www.w3.org/TR/SVG/struct.html#ImageElement. My question was in fact if bitmap images may be included inside the svg so that the svg image would be self contained. Otherwise, whenever the svg image is displayed the link must be followed and the image downloaded. Apparently .svg files are simply xml files.

score 243 · Accepted Answer

是的，您可以引用image元素中的任何图像。并且您可以使用数据 URI来使 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>

svgelement 属性xmlns:xlink声明xlink为命名空间前缀并说明定义的位置。这让 SVG 读者知道什么xlink:href意思。

这IMAGE_DATA是您将图像数据添加为 base64 编码文本的地方。支持 SVG 的矢量图形编辑器通常可以选择嵌入图像进行保存。否则，有很多工具可以将字节流编码到 base64 和从 base64 编码。

这是来自 SVG 测试套件的完整示例。

score 28 · Accepted Answer

我在这里发布了一个小提琴，在 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>

score 22 · Accepted Answer

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

但是这种技术也有缺点，比如图片不会被浏览器缓存

score 4 · Accepted Answer

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

score 0 · Accepted Answer

0

It is also possible to include bitmaps. I think you also can use transformations on that.

于 2011-06-06T08:59:36.213 回答

score 0 · Accepted Answer

如果您想在 SVG ( Ref. )中多次使用该图像：

<image id="img" xlink:href="data:image/png;base64,BASE64_DATA" />

<use href="#img" />
<use href="#img" />

image - Does SVG support embedding of bitmap images?

6 回答 6

Related

Reference