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

Question

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

SVG图像是纯矢量的还是我们可以将位图图像组合成SVG图像？如何在位图图像上应用变换(透视,映射等)？

编辑:图像可以通过链接参考包含在SVG中.请参见http://www.w3.org/TR/SVG/struct.html#ImageElement.我的问题实际上是,如果位图图像可以包含在svg中,那么svg图像将是自包含的.否则,每当显示svg图像时,必须遵循链接并下载图像.显然.svg文件只是xml文件.

Answer 1

Eri*_*röm 194

是的,您可以引用<image>元素中的任何图像.你可以使用数据uri来使svg完全自我包含.一个例子:

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

Run Code Online (Sandbox Code Playgroud)

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

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

@Erik - 没关系,我从这里得到了答案 - http://stackoverflow.com/questions/16685014/image-causes-pixelated-image.回答有关在那里分组的问题.:) (3认同)
@Aleksandar这是一个单独的问题,我相信你可以在这个网站上找到答案(编码到base64的东西不是特定于svg的). (2认同)
不要忘记按原样声明名称空间xlink：xmlns：xlink =“ http://www.w3.org/1999/xlink”`一些浏览器/查看器可能会看不到您的图像 (2认同)
仅供参考：根据我的经验，即使您没有在 svg 图像标签中指定 `width` 和 `height`，Chrome 浏览器也会显示此图像。但是，如果省略这些属性，Firefox 和 IE 将不会显示图像。所以一定要指定它们！ (2认同)

Answer 2

dav*_*art 22

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Gar*_*wen 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>

Run Code Online (Sandbox Code Playgroud)

图像将通过所有正常的svg转换.

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

归档时间：	14 年，4 月前
查看次数：	96810 次
最近记录：	8 年，2 月前