本文将带你了解Illustrator快速入门之将SVG转换为位图的方法（保持浏览器显示的样式），希望本文对大家学Illustrator有所帮助。

如何将SVG转换为位图（保持浏览器显示的样式）
      怎么将SVG的图片转换为位图，最开始我是用Illustrator这种矢量图编辑工具，但是后来发现Illustrator对SVG滤镜支持不好，并不能保持图像的原样式。
      于是我就想到是不是可以直接在浏览器上复制浏览器渲染出的位图，然后就发现Opera和IE都是支持复制位图的，那我们就可以直接将图片复制出来就好了呀。
   
   
    但是使用后发现有个问题，就是复制的图片是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""//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">   <svg width="100%" height="100%"   version="1.1"xmlns="//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>
   
    你可能会想为什么要先应用滤镜1，请看下图
   
    我创建一个RGBA(255,123,172,255)到RGBA(255,123,172,0)的图片，然后附上不使用滤镜1和使用滤镜1的效果对比图。（图片有点大，自己新窗口打开看）
   
      可以发现，不使用滤镜1会导致图片透明部分出现了背景色，最后添加蒙版后的图片就会和原图有出入，所以如果想完美的还原图片，滤镜1还是很有必要的。
    想详细了解 ColorMatrix 请参考GDI+ ColorMatrix的完全揭秘    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标常用软件之Illustrator！