SVG 图像是纯矢量的还是我们可以将位图图像组合成 SVG 图像?应用于位图图像(透视、映射等)的变换怎么样?
编辑:图像可以通过链接引用包含在 SVG 中。请参阅http://www.w3.org/TR/SVG/struct.html#ImageElement。我的问题实际上是位图图像是否可以包含在 svg 中,以便 svg 图像是自包含的。否则,无论何时显示 svg 图像,都必须遵循链接并下载图像。显然 .svg 文件只是 xml 文件。
是的,您可以引用 image
元素中的任何图像。您可以使用 data URIs 使 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>
svg
元素属性 xmlns:xlink
将 xlink
声明为 namespace prefix 并说明定义的位置。然后允许 SVG 阅读器know what xlink:href
means。
IMAGE_DATA
是您将图像数据添加为 base64 编码文本的位置。支持 SVG 的矢量图形编辑器通常可以选择嵌入图像进行保存。否则,有很多工具可以将字节流编码到 base64 和从 base64 编码。
这是来自 SVG 测试套件的完整example。
我在这里发布了一个小提琴,在 HTML 页面中显示嵌入在 SVG 中的数据、远程和本地图像:
<!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>
您可以使用 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 转换。
但是这种技术也有缺点,比如图片不会被浏览器缓存
您可以使用 data:
URL 嵌入图像的 Base64 编码版本。但它不是很有效,不建议嵌入大图像。链接到另一个文件的任何原因是不可行的?
也可以包括位图。我认为您也可以对此使用转换。
如果您想在 SVG (Ref.) 中多次使用该图像:
<image id="img" xlink:href="data:image/png;base64,BASE64_DATA" />
<use href="#img" />
<use href="#img" />
不定期副业成功案例分享
xlink
:xmlns:xlink="http://www.w3.org/1999/xlink"
如果没有它,某些浏览器/查看器可能看不到您的图像width
和height
,Chrome 浏览器也会显示此图片。但是,如果您省略这些属性,Firefox 和 IE 将不会显示图像。因此,请确保指定它们!