应该了解的 Web 图标解决方案
SVG Symbol
我这里使用的是 https://segmentfault.com/a/svg-symbol 方案来合并 svg。
还有一个合并方法是 https://segmentfault.com/a/SVG defs，这个比 SVG Symbol 要鸡肋很多，在此就不介绍了。
通过使用 https://segmentfault.com/a/gulp-svg-symbols 来把 svg 文件合并：
var gulp = require('gulp');
var svgSymbols = require('gulp-svg-symbols');
gulp.task('sprites', function () {
return gulp.src('assets/svg/*.svg')
.pipe(svgSymbols())
.pipe(gulp.dest('assets'));
});
最终得到的 svg 文件：
使用方法
在 HTML 文件中声明 svg，然后通过 来使用：
你也可以通过 来直接使用存储在 CDN 上的 svg 文件，如果感觉每个都要写 CDN 的地址太麻烦，则可以封装 JS 工具，统一维护，统一管理。
inline SVG 目前没有什么特别推荐的开源解决方案，一般情况下，图标都是自己的，自己通过工具打包就已经很方便了，而且很难通过纯 CSS 或 JS 来解决，因为它跟 HTML 的关联性太大了，即使是这样，还是推荐一个库给大家了解了解：
https://segmentfault.com/a/SVGInjector
IconFont 与 inline SVG 方案对比
浏览器兼容性
IconFont
inline SVG
IE6+
IE9+ , Android 3.0+ 移动端支持很好，现在可以使用
尺寸、颜色是否容易控制
IconFont
inline SVG
浏览器会认为它是一个字体，因此只能使用 color 和 font-size 控制，而且尺寸特别不精细
支持多色、局部颜色控制、控制尺寸使用 width 和 height
访问的稳定性
IconFont
inline SVG
Font 在 CDN 上会有跨域问题；而且字体下载不下来是很常见的事；还有一些https://segmentfault.com/a/已知的Chrome的Bug ；貌似代理性质的浏览器，像 UC ，就不支持自定义 Font；一些浏览器拦截插件会拦截自定义字体......
Svg很正常
语义化
IconFont
inline SVG
根本不语义化，你要写多余没有意义的标签，对 SEO 很不利
Svg 是图形，人家就是图形，而且 SVG Symbol 支持 title 和 description 属性，非常友好
用起来是否顺滑
IconFont
inline SVG
自己生成 svg 然后使用工具打包成多个字体文件，然后用 unicode 对应使用
SVG Symbol 使用打包工具生成 SVG 集合，直接通过 ID 使用
IconFont 与 SVG 的 Demo
https://segmentfault.com/a/请去我的CodePen
总结
如果，你的产品需要支持 IE8 及以下，还是推荐使用 IconFont ，因为使用 SVG Symbol 的话，你需要考虑在低端浏览器下的兼容性，常见的做法是，生成一些 png 的图片做 fallback，然后在低端浏览器下显示，把 svg 隐藏.....
如果，你只需要考虑 IE9+ 和 Android 3.0 + ，毫无疑问，inline SVG 是唯一选择！
关键字：前端开发, css, html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！