svg滤镜, 更丰富的色彩魔法!!

一直想了解SVG的滤镜使用, 无奈网上找不到高级的用法实例(如果有请留言分享), 只能自己动手了.╮(╯▽╰)╭

svg的滤镜非常复杂且强大, 一日突然的灵感发现有一个”奇技淫巧”可以轻松实现复杂的svg滤镜, 在此分享一下.

首先是基本的使用语法

在css中可以通过设置

filter

使用svg滤镜

filter: url(svg-url#element-id)

多个滤镜可以叠加

filter: <filter-function> [<filter-function>]* | none

css滤镜可以做到的svg滤镜同样可以做到

不同内核浏览器的滤镜实现略有不同,本文的图片效果以FF为准

高斯模糊滤镜

stdDeviation参数为模糊半径, 值越大越模糊

css实现

filter: blur(5px)

svg实现

<filter id="svgBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>

原图	CSS3	SVG

亮度滤镜

方案1分别改变三个通道的值, 方案2利用了色彩矩阵

css实现

filter: brightness(0.2)

svg实现

<!-- 方案1 -->
<filter id="svgBrightness">
<feComponentTransfer>
<feFuncR type="linear" slope="0.2"/>
<feFuncG type="linear" slope="0.2"/>
<feFuncB type="linear" slope="0.2"/>
</feComponentTransfer>
</filter>
<!-- 方案2 -->
<filter id="svgBrightness2">
<feColorMatrix values="0.2 0   0   0 0
0   0.2 0   0 0
0   0   0.2 0 0
0   0   0   1 0"/>
</filter>

原图	CSS3	SVG

对比度滤镜

对比度值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。

其中, 方案2的数字2 就是对比度值, 矩阵中的 -0.25 由[-(0.5 *2 ) + 0.5]/2求得

css实现

filter: contrast(200%)

svg实现

<!-- 方案1 -->
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="2" intercept="-(0.5 * 2) + 0.5"/>
<feFuncG type="linear" slope="2" intercept="-(0.5 * 2) + 0.5"/>
<feFuncB type="linear" slope="2" intercept="-(0.5 * 2) + 0.5"/>
</feComponentTransfer>
</filter>
<!-- 方案2 -->
<filter id="contrast">
<feColorMatrix values="2 0 0 0 -0.25
0 2 0 0 -0.25
0 0 2 0 -0.25
0 0 0 1  0"/>
</filter>

原图	CSS3	SVG

灰度滤镜

css实现

filter: grayscale(100%)

svg实现

<filter id="svgGrayscale">
<feColorMatrix values="0.299 0.587 0.134 0 0
0.299 0.587 0.134 0 0
0.299 0.587 0.134 0 0
0     0     0     1 0"/>
</filter>

原图	CSS3	SVG

色相旋转滤镜

values参数为旋转角

css实现

filter:  hue-rotate(90deg)

svg实现

<filter id="svgHueRotate">
<feColorMatrix in="SourceGraphic" type="hueRotate" values="90" />
</filter>

原图	CSS3	SVG

反色滤镜

css实现

filter: invert(100%)

svg实现

<filter id="svgInvert">
<feColorMatrix  values="-1 0 0 0 1
0 -1 0 0 1
0 0 -1 0 1
0 0  0 1 0 " />
</filter>

原图	CSS3	SVG

透明度滤镜

css实现

filter: opacity(50%)

svg实现

<!-- 方案2 -->
<filter id="svgOpacity">
<feColorMatrix values="1 0 0 0   0
0 1 0 0   0
0 0 1 0   0
0 0 0 0.5 0 " />
</filter>
<!-- 方案2 -->
<filter id="svgOpacity2">
<feComponentTransfer>
<feFuncA type="linear" slope="0.5" />
</feComponentTransfer>
</filter>

原图	CSS3	SVG

饱和度滤镜

values的值为0是完全不饱和，值为1则图像无变化。其他值，则是效果的线性乘子。超过1的值是允许的，则有更高的饱和度。

css实现

filter: saturate(400%)

svg实现

<filter id="svgSaturate">
<feColorMatrix in="SourceGraphic" type="saturate" values="4" />
</filter>

原图	CSS3	SVG

css滤镜做不到的svg滤镜也可以做到

虽然svg滤镜也能实现css滤镜的效果, 但是用起来会复杂许多, 所以实现css滤镜无法实现的效果才是svg滤镜的强大之处.

黑光滤镜

svg实现

<filter id="blackLight">
<feColorMatrix type="luminanceToAlpha" result="result2" />
<feComposite in2="SourceGraphic" operator="arithmetic" in="result2" k3="2" result="result4" />
<feBlend in2="result2" in="result4" mode="multiply" result="result3" />
<feComposite in2="SourceGraphic" operator="in" in="result3" />
</filter>

原图	SVG

曝光滤镜

svg实现

<filter id="overLight">
<feColorMatrix type="hueRotate" values="0" result="fbSourceGraphic" />
<feColorMatrix in="fbSourceGraphic" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 " result="result91" />
<feBlend in2="result91" mode="darken" in="fbSourceGraphic" result="result92" />
<feBlend in2="result92" mode="screen" result="result93" />
<feComposite in2="SourceGraphic" operator="in" />
</filter>

原图	SVG

柔和滤镜

svg实现

<filter id="soft">
<feColorMatrix type="saturate" values="1" result="result91" />
<feComposite in2="result91" result="result15" operator="arithmetic" k2="0.4" k1="0.3" k3="0.3" />
<feGaussianBlur in="result15" result="result8" stdDeviation="5" />
<feComposite in2="result8" operator="in" result="result13" />
<feComposite in2="result13" k3="0.3" k1="0.3" k2="0.4" operator="arithmetic" in="result15" result="result6" />
<feFlood flood-color="rgb(128,172,0)" flood-opacity="1" in="result6" result="result10" />
<feBlend in2="result10" result="result12" in="result6" mode="darken" />
<feBlend in2="result6" result="result14" mode="screen" />
<feComposite in2="SourceGraphic" in="result14" operator="in" result="result2" />
</filter>

原图	SVG

软焦点滤镜

svg实现

<filter id="softFocus">
<feGaussianBlur stdDeviation="5" result="result3" />
<feComposite in2="result3" operator="arithmetic" in="result3" k1="0.5" k3="0.5" result="result1" />
<feBlend in2="result1" result="result5" mode="screen" in="SourceGraphic" />
<feBlend in2="result5" mode="darken" in="result5" result="result6" />
<feComposite in2="SourceGraphic" operator="in" />
</filter>

原图	SVG

油画滤镜

svg实现

<filter id="oilPainting">
<feMorphology radius="2" in="SourceGraphic" result="result0" />
<feTurbulence numOctaves="1" baseFrequency="0.078" result="result91" />
<feDisplacementMap in2="result91" in="result0" scale="6.3" xChannelSelector="R" yChannelSelector="G" />
</filter>

原图	SVG

浮雕滤镜

svg实现

<filter id="relief">
<feColorMatrix result="result2" type="luminanceToAlpha" />
<feDiffuseLighting diffuseConstant="0.6" result="result1" surfaceScale="-10">
<feDistantLight azimuth="225" elevation="35" />
</feDiffuseLighting>
<feComposite in2="SourceGraphic" result="result3" k3="0.5" k1="1.5" in="result1" operator="arithmetic" />
<feComposite in2="result3" result="result5" operator="in" in="result3" />
<feBlend in2="result1" result="result6" mode="normal" in="result5" />
<feComposite in2="result6" result="result7" operator="arithmetic" k2="1" />
<feComposite in2="SourceGraphic" in="result7" operator="in" />
</filter>

原图	SVG

碎片滤镜

svg实现

<filter id="debris">
<feTurbulence baseFrequency="0.14299516908212559" numOctaves="1" type="fractalNoise" />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 6 -3.5 " result="result5" />
<feComposite in2="result5" operator="in" in="SourceGraphic" result="result6" />
<feMorphology result="result3" radius="5" operator="dilate" in="result6" />
<feDisplacementMap in2="result3" result="result4" scale="0" yChannelSelector="A" xChannelSelector="R" in="result3" />
<feComposite in2="result4" operator="arithmetic" result="result2" k1="1" k3="1" />
<feBlend in2="result2" mode="darken" in="result2" />
<feConvolveMatrix order="3 3" targetX="1" targetY="1" divisor="2" edgeMode="duplicate"
kernelMatrix="2 0 0 0 1 0 0 0 -1" />
</filter>

原图	SVG

粗糙纸滤镜

svg实现

<filter id=" rawPaper">
<feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" seed="0" result="result4" />
<feDisplacementMap in2="result4" in="SourceGraphic" yChannelSelector="G" xChannelSelector="R" scale="10" result="result3" />
<feDiffuseLighting lighting-color="rgb(233,230,215)" diffuseConstant="1" surfaceScale="2" result="result1" in="result4">
<feDistantLight azimuth="235" elevation="40" />
</feDiffuseLighting>
<feComposite in2="result1" operator="in" in="result3" result="result2" />
<feComposite in2="result1" result="result5" operator="arithmetic" k1="1.7" />
<feBlend in2="result3" in="result5" mode="normal" />
</filter>

原图	SVG

撕裂边滤镜

svg实现

<filter id="tornEdge">
<feTurbulence baseFrequency="0.05" numOctaves="5" type="fractalNoise" result="result91" />
<feDisplacementMap in2="result91" scale="25" result="result5" xChannelSelector="R" in="SourceGraphic" />
<feComposite in2="result5" in="SourceGraphic" operator="atop" />
</filter>

原图	SVG

锐化滤镜

svg实现

<filter id="sharpen">
<feConvolveMatrix order="3 3" divisor="1" in="SourceGraphic" targetX="1" targetY="1"
kernelMatrix="0 -0.15 0 -0.15 1.6 -0.15 0 -0.15 0"  />
</filter>

原图	SVG

奇技淫巧

上面这些还远不是svg滤镜的极限, 但是svg滤镜的代码也实在是太反人类了, 就算是技术流恐怕也难以驾驭, 说好的”奇技淫巧”呢?别急, 看完下面就知道这一切so easy了.

其实上面的代码也不是我手写的, 全是来自inkscape(一个免费的svg编辑软件).

inkscape里面就有”滤镜”功能, 操作步骤如下:

1. 把图片拖入inkscape

2. 以所见即所得的方式编辑好效果

3. 导出为svg格式文件

4. 用sublime打开文件, 取出

<filter>

标签之间的内容即是滤镜代码.

是不是很简单呢?其实软件也不一定要是inkscape, 大名鼎鼎的AI等包含svg滤镜效果的编辑软件也可以. 用这种方法可以得到可视化的编辑, 使得我们可以更专注于效果而不是代码的细节.

总结

svg滤镜是比css更强大的web端滤镜解决方案, 利用工具也可以轻松实现滤镜效果, 而目前最大的问题就是浏览器兼容性(IE8是指望不上了, Edge也不行, chrome和FF还比较靠谱), 希望日后能够看到这种技术的应用.