上篇文章讲到，其中举的小例子中用到了一个小图标，这个小图标我用的是背景图来显示：

.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}

delete.png图标的实际大小为20px，在pc端显示基本正常：

然而一放到手机上，哎呀！图标怎么变模糊了？！

啥？还是有点模糊？

那就再大点……累不累？就没有更好的解决方法么？答案当然是有！

用矢量图放上，也就是SVG要出场了！

当然，SVG的具体语法本文就不详述了，这里就简单讲讲上述例子如何直接将PNG位图换成SVG矢量图：

1、点击进入，搜索关键词delete

         
     
        
              
      
                       
                        
                        
                    
               
          
     
    
     
      
       
      
      
      删除
     

/*CSS部分*/.del{ font-size: 20px;}.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px; vertical-align: middle; fill: currentColor;}.del span{ vertical-align: middle;}

以上CSS部分就不做解释了，这里简单说下HTML部分。

上面隐藏的那部分SVG可以看做是一个SVG库，你可以将页面中需要用到的SVG图标都放在这里面，其中每个symbol代表一个SVG图标，然后在你需要使用图标的地方使用通过xlink:href的方式根据id调用就好了，这个专业术语叫SVG Sprites，感觉比CSS Sprites方便多了，而且最关键是矢量图，怎么放大缩小都不失真。

举个栗子吧~~

假如我现在需要把上面的图标换掉，改成一个“×”，而又想保留之前图标做备用，怎么办？

很简单，直接将“×”的SVG代码添加到“SVG库”中就好了，就像酱紫：

     
    
          
      
                   
                    
                    
                
               
               
                   
                    
                
           
      
     
     
      
       
        
       
      
      删除
     

然后就变成下面这样，替换成功！

本文为原创文章，转载请注明出处，谢谢！