svg制做及使用

关于浏览器图标解决方案，一直就有不少CSS Sprite,iconFont,以及SVG.相对而言svg矢量图标以及支持浏览器自身解析的优势，不少团队都已经在使用了。这篇文章主要说明svg图标的使用和制做。

svg的制做

步骤： 一、按照正常导出图片的方式导出后缀为png的雪碧图和单个icon，而后用AI打开该类文件，而后直接导出为svg后缀的图片便可 二、能够安装压缩工具，对svg文件进行压缩 三、安装svg压缩工具

npm install svgo -g

svgo xx.svg (能够将多余的代码删减掉)
复制代码

压缩前的效果

压缩后的效果（其实使用ai导出的文件已是删减后的了）

步骤：

文件-->导出-->导出为-->svg后缀 （此方法导出，能够减小svg的大小，相对于直接存储的方式）

使用AI制做的svg能够直接使用，可是使用ps直接导出的svg文件，会使svg中的image标签受损，在html中没法显示

使用AI制做svg时，使用导出后缀为svg的文件，而不是存储为svg的图片

svg的使用

• 直接在img标签中使用

<img src="qiy-icon1.svg"/>
复制代码

• 直接经过background:url()在css中引入

background:url("qiy-icon1.png");
background-size:100% 100%;
复制代码

也能够作成后缀为svg的雪碧图，用法与png的雪碧图同样

svg的兼容处理

在安卓4.2.2 版本上能够正常展现（因此业务中，不须要作降级处理）

降级写法

<img src="qiy-icon1.svg" alt=""class="img" onerror="this.src=qiy-icon1.png">

background-image:url("qiy-icon1.png");
/*降级处理不能方便地使用CSS修改Icon的颜色和边线属性。*/
background-image:url("qiy-icon1.svg"),none;
background-size:100% 100%;
复制代码

svg与png的对比

• 单个图片，大小接近相同
• 雪碧图，svg比png的大，经过AI导出的svg图片，已经很小了，此时再经过svgo进行压缩，也只压缩了几至十几kb

多有不足，欢迎指正哦！！！