[关闭]
@Gizmosir 2016-03-16T10:40:14.000000Z 字数 9728 阅读 831

date: 2016-03-16
categories: Computer graphics
tag: [SVG, 矢量图]
博客

title: 矢量图像进阶技巧（I）

前言

这是矢量图的第二篇，如果你没有看过第一篇，可以点击这里。

在第一篇中我们介绍了基础的SVG使用方法，在这一篇中我们将来着重介绍SVG的大杀器——滤镜。

图层（Layers）

相信大家或多或少也都接触过Photoshop，对图层这个概念也不陌生。图层实际上就是独立的图形，通过覆盖的方式组合成一张图像，如上图所示。

而图层的概念在SVG中也是存在的，其用法与Photoshop的相似，只是覆盖的顺序是后添加的图层（以下称为后图层）将覆盖在前面添加的图层（以下称为前图层）之上。

实际上你可以将不同的图层理解成不同的滤镜效果，将所有的滤镜效果叠加之后生成了最终显示的图像。

滤镜（Filters）

就如同我在第一篇中说的一样，几乎所有出色的SVG图像都离不开滤镜。通过将不同的滤镜组件（primitives）叠加在一起生成复合滤镜的方法更是重中之重，那么首先我们来看下都有哪些基本的滤镜组件：

一下子你肯定会觉得这么多滤镜名字已经不同的功能，怎么记得住
？那么下面我们结合图例来从逐个解释下每个滤镜组件，好让你对每个组件有个更好的了解，相信看完你一定都大致记住了。

图像（feImage）

虽然图像不符合SVG可以无限放大且不产生锯齿的特性，但是有时我们仍然需要使用图像来生成SVG图像，比如名片。这个时候我们就可以使用feImage。

  1. <!--该例子读取一张图片，并将其作为滤镜填充到矩形中。-->
  2. <svg
  3.     <!--使用feImage时一定要添加下面两句来提示外链图片的位置-->
  4.     xmlns="http://www.w3.org/2000/svg"        
  5.     xmlns:xlink="http://www.w3.org/1999/xlink" >
  7.     <defs>
  9.         <filter id="feImage_demo">
  10.             <feImage xlink:href="smile.jpg" /> 
  11.         </filter>
  13.     </defs>
  15.     <rect y="0" x="0" height="500" width="500" style="filter:url(#feImage_demo)" />
  17. </svg>

当然feImage除了导入外链图像，也能导入使用代码生成的SVG图像，如下例：

  1. <!--该例子首先生成一个“太阳”圆，并将其作为滤镜填充到矩形中。-->
  2. <svg
  3.     xmlns="http://www.w3.org/2000/svg"     
  4.     xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.     <defs>
  8.         <circle id="pretty_circle" cx="300" cy="300" r="200" style="stroke-width:80; stroke:yellow; fill:red" />
  10.         <filter id="feImage_demo">
  11.             <feImage xlink:href="#pretty_circle" />
  12.         </filter>
  14.     </defs>
  16.     <rect y="0" x="0" height="500" width="500" style="filter:url(#feImage_demo)" />
  18. </svg>

合并（feMerge）

如果我们想要将上下图层叠加，总共有三个指令可以使用，分别是feMerge，feBlend和feComposite。首先我们来看下比较简单的feMerge。其作用是简单地将图层合并成一张，后图层直接覆盖在前图层之上。所以如果要保证能够通过后图层看到前图层的东西，则必须保证对应位置的透明度（alpha）为0.

  1. <!--本例子中首先读取三张图片，并将其合并成一个滤镜，最后将滤镜应用到一个矩形上。-->
  2. <svg
  3.     xmlns="http://www.w3.org/2000/svg" 
  4.     xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.     <defs>
  7.         <filter id="layers" 
  8.         color-interpolation-filters="sRGB"> <!--声明了滤镜的插值方法-->
  10.             <feImage xlink:href="liquid_image.jpg" result="background"/> 
  11.             <feImage xlink:href="small_fish.png" result="layer1" width="500" x="500" y="-180"/>
  12.             <feImage xlink:href="big_fish.png" result="layer2" width="800" x="80" y="30"/> 
  14.             <feMerge>
  15.                 <feMergeNode in="background"/>
  16.                 <feMergeNode in="layer1" />
  17.                 <feMergeNode in="layer2"/> 
  18.             </feMerge>
  20.         </filter> 
  21.     </defs>
  23.     <rect y="0" x="0" height="960" width="1280" style="filter:url(#layers)"/>
  25. </svg>

混合（feBlend）

而另外一个将图层叠加的方法是混合（feBlend）。feBlend相对于feMerge，能够根据不同的属性实现稍微复杂一点的效果。属性（ normal | multiply | screen | darken | lighten ）与其对应的效果如下：

  1. <!--本例子中首先读取两张图片，然后用相乘的方式将两张图片混合并生产滤镜，最后将滤镜应用到矩形上。-->
  2. <svg
  3.     xmlns="http://www.w3.org/2000/svg" 
  4.     xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.     <defs>
  7.         <filter id="demo_of_feBlend" 
  8.         color-interpolation-filters="sRGB">
  10.             <feImage xlink:href="rainbow.png" result="background_image"/> 
  11.             <feImage xlink:href="pony.png" result="foreground_image" width="500" x="100"/>
  13.             <feBlend mode="multiply"
  14. in="foreground_image" in2="background_image" /> 
  16.         </filter>
  17.     </defs>
  19.     <rect x="0" y="0" width="100%" height="100%" filter="url(#demo_of_feBlend)"/>
  21. </svg>

复合（feComposite）

最后一个可以将图层添加到一起的命令是复合（feComposite），是应用效果是能够根据属性不同来显示不同图层的不同部分，属性( over | in | out | atop | xor | arithmetic )和其对应效果如下：

由于复合使用的例子需要的滤镜组件我们还没介绍到，所以例子稍后再给。

平铺（feTile）

之前在第一篇的时候我们介绍过使用模式的方式来生成连续不断的图片，实际上更加普遍的做法是使用平铺（feTile）。

  1. <!--本例子中首先读取图片，并平铺生成滤镜，最后将滤镜应用到矩形上。-->
  2. <svg
  3.     xmlns="http://www.w3.org/2000/svg" 
  4.     xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.     <defs>
  7.         <filter id="carpet" 
  8.         color-interpolation-filters="sRGB">
  10.             <feImage xlink:href="carpet.jpg" width="294" height="374"/>
  11.             <feTile />
  13.         </filter>
  14.     </defs>
  16.     <rect x="0" y="0" width="100%" height="100%" filter="url(#carpet)"/>
  18. </svg>

矩形

如果平铺的图形十分简单且有规律的话，我们也能够通过自定义形状并使用feTile来进行平铺。

  1. <!--本例子中首先生成四个矩形，接着将矩阵合并并平铺生成滤镜，最后将滤镜应用到矩形上。-->
  2. <svg
  3.     xmlns="http://www.w3.org/2000/svg" 
  4.     xmlns:xlink="http://www.w3.org/1999/xlink">
  6.     <defs>
  7.         <filter id="chessboard"
  8.         color-interpolation-filters="sRGB">
  10.             <feFlood x="0" y="0" width="100"
  11. height="100" flood-color="black" result="stage1"/>
  12.             <feFlood x="0" y="100" width="100"
  13. height="100" flood-color="white" result="stage2"/>
  14.             <feFlood x="100" y="100" width="100"
  15. height="100" flood-color="black" result="stage3"/>
  16.             <feFlood x="100" y="0" width="100"
  17. height="100" flood-color="white" result="stage4"/>
  19.             <feMerge>
  20.                 <feMergeNode in="stage1"/>
  21.                 <feMergeNode in="stage2"/> <feMergeNode in="stage3"/> 
  22.                 <feMergeNode in="stage4"/>
  23.             </feMerge>
  25.             <feTile />
  27.         </filter>
  28.     </defs>
  30.     <rect x="0" y="0" width="100%" height="100%" filter="url(#chessboard)"/>
  32. </svg>

色彩调节（feComponentTransfer）

有时候我们需要对图形/图像的颜色进行调整，那么我们可以使用feComponentTransfer来调整。feComponentTransfer可以调整（ feFuncR | feFuncG | feFuncB | feFuncA ）四路通道值，其调整曲线有（ Identity | Linear | Discrete | Table | Gramma ）五种。

如果图形/图像整体偏暗，我们可以通过同时提高R、G、B值，能使得图像更加明亮些。

  1. <!--本例子中首先读取图片，使用feComponentTransfer提高R、G、B通道的值并生成滤镜，最后将滤镜应用到图片上，并将修改后的图像与原图像进行对比-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.   <defs>
  8.     <filter id="brighter"
  9.        color-interpolation-filters="sRGB">
  11.       <feComponentTransfer>
  12.         <feFuncR type="linear" slope="1.4" intercept="0"/>
  13.         <feFuncG type="linear" slope="1.4" intercept="0"/>
  14.         <feFuncB type="linear" slope="1.4" intercept="0"/>
  15.       </feComponentTransfer>
  17.     </filter>
  19.   </defs>
  21.   <text x="10" y="145">Before:</text>
  23.   <image x="70" y="0" width="500" height="751"
  24.      xlink:href="Thailand.jpg" />
  26.   <text x="610" y="145">After:</text>
  28.   <image x="670" y="0" 
  29.      width="500"
  30.      height="751"
  31.      xlink:href="before.jpg"
  32.      style="filter:url(#brighter)" />
  34. </svg>

有些古老的照片可能褪色，也就是说白色不白了，黑色不黑了，那么我也可以通过色彩调节来改善图片效果。

  1. <!--本例子中首先读取图片，使用Linear曲线调整R、G、B通道的值并生成滤镜，最后将滤镜应用到图片上，并将修改后的图像与原图像进行对比-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.   <defs>
  8.     <filter id="incContrast"
  9.        color-interpolation-filters="sRGB">
  11.       <feComponentTransfer>
  12.         <feFuncR type="linear" slope="1.5" intercept="-0.3"/>
  13.         <feFuncG type="linear" slope="1.5" intercept="-0.3"/>
  14.         <feFuncB type="linear" slope="1.5" intercept="-0.3"/>
  15.       </feComponentTransfer>
  17.     </filter>
  19.   </defs>
  21.   <text x="10" y="145">Before:</text>
  23.   <image x="70" y="20" 
  24.     width="465"
  25.     height="592"
  26.     xlink:href="old_photo_man.png" />
  28.   <text x="550" y="145">After:</text>
  30.   <image x="600" y="20" 
  31.      width="465"
  32.      height="592"
  33.      xlink:href="old_photo_man.png"
  34.      style="filter:url(#incContrast)" />
  36. </svg>

最后，我们也能够将色彩值的表示范围进行压缩，甚至“二值化”从而使图形/图像变得不真实。

  1. <!--本例子中首先读取图片，使用Discrete曲线调整R、G、B通道的值并生成滤镜，最后将滤镜应用到图片上，并将修改后的图像与原图像进行对比-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.   <defs>
  8.     <filter id="posterization"
  9.        color-interpolation-filters="sRGB">
  11.       <feComponentTransfer>
  12.         <feFuncR type="discrete" tableValues="0 1"/>
  13.         <feFuncG type="discrete" tableValues="0 1"/>
  14.         <feFuncB type="discrete" tableValues="0 1"/>
  15.       </feComponentTransfer>
  17.     </filter>
  19.   </defs>
  21.   <text x="10" y="145">Before:</text>
  23.   <image x="70" y="-80" 
  24.      width="600"
  25.      height="600"
  26.      xlink:href="pretty_car.jpg" />
  28.   <text x="10" y="550">After:</text>
  30.   <image x="70" y="350" 
  31.      width="600"
  32.      height="600"
  33.      xlink:href="pretty_car.jpg"
  34.      style="filter:url(#posterization)" />
  36. </svg>

高斯模糊（feGaussianBlur）

高斯模糊（feGaussianBlur）滤镜使用2维高斯函数对图形/图像进行模糊，从而产生一些很棒的效果。

将小协方差的高斯滤镜应用到人物照片上，会产生模糊的效果，从而淡化原本很明显的一些缺点。

  1. <!--本例子首先生成一个协方差为1.5的高斯滤镜，然后将滤镜应用在读取的图片上。-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.   <defs>
  8.     <filter id="both_axes_blur"
  9.        color-interpolation-filters="sRGB">
  11.       <!--高斯滤镜的输入是图片，直接声明SourceGraphic就可以。-->
  12.       <feGaussianBlur
  13.          in="SourceGraphic"
  14.          stdDeviation="1.5 1.5" />
  16.     </filter>
  18.   </defs>
  20.   <image x="550" y="20" 
  21.      width="400"
  22.      height="400"
  23.      xlink:href="spotty_face.png"
  24.      style="filter:url(#both_axes_blur)" />
  26. </svg>

将只作用在某个方向上的高斯滤镜应用到图片上时，会产生模糊的效果，从而使得图片呈现在作用方向上运动很快的感觉。

  1. <!--本例子首先生成一个X轴方向上的高斯滤镜，然后将滤镜应用在读取的图片上。-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" 
  5.    style="background-color: black" >
  7.   <defs>
  9.     <filter id="xblur"
  10.        color-interpolation-filters="sRGB">
  12.     <feGaussianBlur
  13.             in="SourceGraphic"
  14.             stdDeviation="10 0.0001" /><!--需要注意的是SVG并不支持0赋值，所以只能尽可能的小。-->
  16.     </filter>
  18.   </defs>
  20.   <image x="640" y="0" 
  21.      width="468"
  22.      height="351"
  23.      xlink:href="superman.jpg"
  24.      style="filter:url(#xblur)" />
  26. </svg>

另外，高斯滤镜还常被用来产生阴影效果。结合着feBlend能够产生一些很棒的文字效果，如：

  1. <!--首先生成一个协方差较大的高斯滤镜，并对文字进行模糊，最后叠加上文字并产生最后的效果。-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink"
  5.    style="background-color: black" > 
  7.   <defs>
  9.     <filter id="glowing"
  10.             color-interpolation-filters="sRGB">
  12.             <feGaussianBlur in="SourceGraphic" result="glow"
  13.               stdDeviation="15" />
  15.             <feBlend mode="normal" in="glow" in2="SourceGraphic"/>
  17.         </filter>
  19.   </defs>
  21.   <text y="200" x="100" font-size="145" 
  22.      height="300"
  23.      width="300"
  24.      style="fill:red;filter:url(#glowing)"> Halloween </text>
  26. </svg>

偏移（Offset）

另外一个常用于产生阴影的命令是feOffset。其作用就是将图形/图像往X轴/Y轴方向进行移动。所以结合着feGaussianBlur和feBlend也能够产生一些不错的文本阴影效果：

  1. <!--本例子中首先生成高斯滤镜，并作用于文本，接着将文本移动一定距离，最后与文本合并并产生最后的效果。需要注意的是由于我们的文本是有颜色的，但是阴影不需要有颜色，所以我们只取文本的alpha值来做高斯模糊。-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" >
  6.   <defs>
  8.     <filter id="shadow" color-interpolation-filters="sRGB">
  10.             <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"/>
  11.             <feOffset in="blur" dx="20" dy="20" result="offsetBlur"/>
  13.             <feBlend mode="normal" in="SourceGraphic" in2="offsetBlur" /> 
  15.     </filter>
  17.   </defs>
  21. <text x="0" y="200" font-size="200pt" font-family="Arial" style="filter:url(#shadow)">
  23.     <tspan x="20">It's</tspan>
  25.     <tspan x="0" dy="230" fill="red">Hot</tspan>
  27. </text>
  29. </svg>

转换（Transform）

虽然转换并不属于滤镜组件，但是结合着转换能够生成一种超级棒而且也很实用的镜面效果，所以我忍不住还是想要在这里介绍一下。有好几种能够用于SVG转换的命令（ Translate | Rotate | Scale ）。

  1. <!--本例子中首先生成高斯滤镜，并且定义了线性渐变，接着对文本进行翻转并将滤镜和渐变同时应用与翻转文本上。之所以使用高斯滤镜的原因是加上一点模糊会使得翻转文字看上去更加真实。-->
  2. <svg
  3.    xmlns="http://www.w3.org/2000/svg"
  4.    xmlns:xlink="http://www.w3.org/1999/xlink" 
  5.    style="background-color: black" >
  7.   <defs>
  9.     <linearGradient id="vertical_gradient"  x1="0%" y1="0%" x2="0%" y2="100%">
  10.     <stop offset="0.2" style= "stop-color:black"/>
  11.     <stop offset="1" style= "stop-color:grey"/> 
  12.     </linearGradient> 
  14.     <filter id="reflection_blur"
  15.        color-interpolation-filters="sRGB">
  17.             <feGaussianBlur in="SourceGraphic" 
  18.               stdDeviation="1" />
  20.     </filter>
  22.   </defs>
  24.   <text y="200" x="100" font-size="145" font-family="verdana"
  25.      style="fill:lightgrey"> Reflection </text>
  27.   <text y="200" x="100" font-size="145" font-family="verdana"
  28.      style="fill:url(#vertical_gradient);filter:url(#reflection_blur)" 
  29.     transform="translate(0,405) scale(1,-1)" >  Reflection  </text>
  32. </svg>

参考与其他

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注