一、何为SVG？
SVG是可伸缩的矢量图形，用来定义用于网格的基于矢量的图形，它使用XML格式定义图形，图像在放大或缩小的情况下，其图形质量不会有损失，SVG还是万维网联盟的一个标准。
二、与JPEG和PNG等图像相比有何优点？
JPEG和PNG等图像属于位图，是由像素点所构成，图片放大或缩小时容易造成失真。而SVG则属于矢量图，无论如何放大缩小都可以保证其清晰度不会降低。
三、如何使用SVG?
1、直接内联引入
<div class="del">
<svg class="icon" width="20" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</svg>
<span>删除</span>
</div>
2、使用img标签引入，与引用位图方式无异
<div class="del">< img src="svg/delete.svg" /><span>删除</span></div>
3、使用iframe标签引入
<div class="del"><iframe class="icon" src="svg/delete.svg" frameborder="0"></iframe><span>删除</span></div>
4、SVG Sprites，使用use引入（可以看这篇文章"移动端小图标模糊问题"有介绍）
<body>
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-delete" viewBox="0 0 32 32">
<title>delete</title>
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>
</svg>
<div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-delete"></use></svg><span>删除</span></div>
</body>
</html>
当然，类似于写CSS时使用style标签写在HTML内一样，在页面内直接写过多的SVG代码总感觉不太好，会让页面感觉很臃肿。那么当然与使用link标签外链样式类似的，SVG也能通过外链的方式引入，就像这样：
<div class="del"><svg class="icon icon-bin"><use xlink:href="demo.svg#icon-delete"></use></svg><span>删除</span></div>
其中demo.svg中则可以保存许多可供调用的SVG：
<!--demo.svg-->
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-delete" viewBox="0 0 32 32">
<title>delete</title>
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>
<!--省略-->
</svg>
但是需要注意的是，以上SVG Sprites外联方式在IE下全军覆没，甚至IE11都不行！
那么，如何改变SVG的大小与颜色呢？
很简单，直接给调用SVG的标签上设置CSS样式即可，比如上面的例子可以这样设置：
.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle; fill: red;}
注意：以img标签和iframe标签方式调用的时候改变SVG颜色无效！
最后贴上以上四种使用SVG方式的实例效果图：
本文为原创文章，转载请注明出处，谢谢！
网友评论