将SVG转换为位图的方法（保持浏览器显示的样式）

枫谷剑仙

已于 2023-07-05 20:22:48 修改

阅读量3.8k

点赞数 1

文章标签： svg 位图 html5 浏览器矢量图

于 2013-12-28 02:40:53 首次发布

本文链接：https://blog.csdn.net/mapaler/article/details/17625111

版权

如何将SVG转换为位图（保持浏览器显示的样式）

怎么将SVG的图片转换为位图，最开始我是用Illustrator这种矢量图编辑工具，但是后来发现Illustrator对SVG滤镜支持不好，并不能保持图像的原样式。

于是我就想到是不是可以直接在浏览器上复制浏览器渲染出的位图，然后就发现Opera和IE都是支持复制位图的，那我们就可以直接将图片复制出来就好了呀。

IE复制

Opera复制

但是使用后发现有个问题，就是复制的图片是24位的，没有Alpha通道，怎么解决这个问题呢？在研究滤镜的时候会用到“SourceAlpha”这个输入，发现这个就是输入图片的Alpha通道，那么我们把这个通道当作蒙版附加到图片上不就可以了么。

使用发现Opera和IE还有区别就是Opera复制出来图片变成了黑色背景（左），IE保持的是白色背景（右）。两个使用的滤镜有差别，后述。

复制差别

首先介绍使用滤镜，滤镜的用法请参见HTML5之SVG 2D入门10 - 滤镜

SVG Filter Effects in IE10这里可以了解一下feComposite和feMerge的区别

滤镜放置位置

整个图像加上滤镜方法：声明滤镜，然后将整个图像用一个新的<g></g>包起来，应用滤镜即可。如：

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<filter id="滤镜声明">
  <feMerge>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<g filter="url(#滤镜声明)">
  <g id="原始图像">
    <circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
  </g>
</g>
</svg>

其实是可以直接在单个的node上应用滤镜的，不过这里需要给整个图像应用滤镜，有些svg缩进做的不好不在外面添加一个node的话怕没有整个包括住。

然后就是我们需要用什么滤镜来获取所需要的图像，先给整个图像附加滤镜1，复制到位图编辑软件，再应用滤镜2，复制到位图编辑软件。将位图2作为位图1的蒙版即可获得透明的图片了。

滤镜1 - 获取RGB图案

<filter id="去除Alpha">
    <feColorMatrix type= "matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 0 1" in="SourceGraphic" result="turb"></feColorMatrix>
    <feMerge>
        <feMergeNode in="turb"/>
    </feMerge>
</filter>

滤镜2 - 获取Alpha通道 for IE 注：这里获得的图像需要在图像制作软件里反色

<filter  id="图片Alpha">
    <feMerge>
        <feMergeNode in="SourceAlpha"/>
    </feMerge>
</filter>

滤镜2 - 获取Alpha通道 for Opera 注：这里因为网页背景也是白色所以你会看见一个全白的页面

<filter  id="图片Alpha">
    <feColorMatrix type= "matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 0.1  0 0 0 1 0" in="SourceGraphic" result="turb"></feColorMatrix>
    <feMerge>
        <feMergeNode in="SourceAlpha"/>
    </feMerge>
</filter>

完整流程图