Question

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

修改：图片可能会通过链接引用包含在SVG中。见http://www.w3.org/TR/SVG/struct.html#ImageElement。我的问题实际上是，如果位图图像可以包含在svg中，那么svg图像将是自包含的。否则，每当显示svg图像时，必须遵循链接并下载图像。显然.svg文件只是xml文件。

Answer 1

是的，您可以引用<image>元素中的任何图像。您可以使用data uri's使svg完全自我包含。一个例子：

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

点是你添加编码的base64数据的地方，支持svg的矢量图形编辑器通常有一个用于保存嵌入图像的选项。否则，有很多工具可以与base64进行编码。

这是来自svg测试套件的完整example。

Answer 2

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

Answer 3

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

但是这种技术有缺点，例如浏览器不会缓存图像

Answer 4

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

Answer 5

也可以包含位图。我想你也可以使用转换。

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

5 个答案: