拿qq图标来说事
1.将红色和灰色的qq图标放到一个png图片里，通过background-position、over:hidden来控制图标的展示。
2.将qq图标制作成font字体，通过font-face引用字体，比如qq图标对应者字母a，那我可以这样用：a
3.使用svg-filter滤镜对qq图片上色，下面是一个svg的滤镜。
svg xmlns=http://www.w3.org/2000/svg width=160 height=160 viewbox=0 0 160 160>defs>filter id=a color-interpolation-filters=srgb>fecomposite in2=sourcegraphic operator=arithmetic k2=1 result=composite1/>fecolormatrix in=composite1 values=1 type=saturate result=colormatrix1/>feflood flood-opacity=1 flood-color=#3a9e00 result=flood1/>feblend in=flood1 in2=colormatrix1 mode=multiply result=blend1/>feblend in2=blend1 mode=screen result=blend2/>fecolormatrix in=blend2 values=1 type=saturate result=colormatrix2/>fecomposite in=colormatrix2 in2=sourcegraphic operator=in result=fbsourcegraphic/>fecolormatrix result=fbsourcegraphicalpha in=fbsourcegraphic values=0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0/>fecomposite in2=fbsourcegraphic operator=arithmetic k2=1 result=composite1 in=fbsourcegraphic/>fecolormatrix in=composite1 values=1 type=saturate result=colormatrix1/>feflood flood-opacity=1 flood-color=#3a9e00 result=flood1/>feblend in2=colormatrix1 in=flood1 mode=multiply result=blend1/>feblend in2=blend1 mode=screen result=blend2/>fecolormatrix in=blend2 values=1 type=saturate result=colormatrix2/>fecomposite in2=fbsourcegraphic in=colormatrix2 operator=in result=composite2/>filter>defs>ellipse cx=310.637 cy=460.673 rx=162.715 ry=154.262 transform=matrix(.38065 0 0 .4103 -38.244 -109.02) fill=#d3d7cf stroke=#2e3436 stroke-width=30 stroke-linecap=round stroke-linejoin=round stroke-opacity=.571 filter=url(#a)/>svg>
view code
把这个svg保存到当地文件夹中，命名为filter-test.svg，如果图标想要换种颜色，很简单，css中加入代码：filter:url(filter-test.svg#a)-------------------注意：我的这份svg中只有一个id为a的滤镜。
总结下：第一种方式累设计师，图标图片会很大,css控制麻烦，如果是一个图集需要计算位移；第二种方式，简单但是效果有限，比如说打灯光、做渐变等等；第三种方式呢，很优秀，给图标添加样式，只需要制作一份svg滤镜集，然后通过filter应用就可以，占的资源少，兼容性呢，只要浏览器支持svg和filter即可。
就这些了，个人觉得最后一种方式渐渐会取代前面，因为它是滤镜，可以挂到网上复用，实现共享。