SVG长话短说

一、何为SVG？

SVG是可伸缩的矢量图形，用来定义用于网格的基于矢量的图形，它使用XML格式定义图形，图像在放大或缩小的情况下，其图形质量不会有损失，SVG还是万维网联盟的一个标准。

二、与JPEG和PNG等图像相比有何优点？

JPEG和PNG等图像属于位图，是由像素点所构成，图片放大或缩小时容易造成失真。而SVG则属于矢量图，无论如何放大缩小都可以保证其清晰度不会降低。

三、如何使用SVG?

1、直接内联引入

    
    删除

2、使用img标签引入，与引用位图方式无异

< img src="svg/delete.svg" />删除

3、使用iframe标签引入

删除

4、SVG Sprites，使用use引入（可以看这篇文章"移动端小图标模糊问题"有介绍）

    
    
删除

当然，类似于写CSS时使用style标签写在HTML内一样，在页面内直接写过多的SVG代码总感觉不太好，会让页面感觉很臃肿。那么当然与使用link标签外链样式类似的，SVG也能通过外链的方式引入，就像这样：

删除

其中demo.svg中则可以保存许多可供调用的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方式的实例效果图：

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