.svg-icon{overflowhiddendisplayinline-blockwidth1emheight1em&-wrapper{displayflexalign-itemscenter>>>svg{width100%height100%fillcurrentColor*[fill='none']{fillnone}*[stroke='none']{strokenone}}}}这可能是有些人写过很多次的话题，但好像是因为兼容性？图标是以Iconfont还是CSSSprite的形式显示？我希望通过将旧酒装在新瓶中，我可以重定向问题。SVGvsImage例如，现在我们要有如下图这样的视觉效果：分析：可能需要三张图片背景图片鼠标移动时渐变色前景图片白色前景图片鼠标移动时独立图像的大小版式（我做图的时候颜色拿错了，其他都是一样的，只要能说明真相，见谅）。可以看出，在肉眼差别不大的情况下，WebP格式最小，其次是SVG，而PNG的尺寸偏大??。这个SVG是从Sketch设计稿导出的。源码中包含大量冗余无效代码，其实可以优化一下，如下。优化内部源码后，优化后可减少约1K字符。当然，这需要使用内联（InlineSVG）CSSSprite。使用CSSSprite可以减少HTTP请求，而且看起来还可以减少整体图像大小。这里我们使用前景图像进行比较。事实上，背景图片和前景图片都可以组合成一个精灵。可以看出，CSSSprite的体积比InlineSVG+CSS大很多。SVGvsImage结语绿色部分表示SVG略优于Image的地方，黄色部分表示欠缺的地方，灰绿色表示差不多。1、现在已经接近2019年了，对于IE9（2011）等老牌浏览器来说，都是支持SVG的，所以过分强调低兼容性是没有意义的。2.InlineSVG在浏览器中应该被渲染为DOM节点，因此需要注意DOM节点的性能优化；一张SVG图片可能有很多条路径，也就是DOM节点，DOM节点太多势必会影响浏览器的渲染性能和内存占用，而纯位图渲染方式应该没有这方面的顾虑。（DOM数量的影响参考：GoogleWEBDeveloperDocumentation）结论：除了复杂的图像，选择InlineSVG或![]()
标签引入SVG优于使用独立图像或组合图像（CSSsprite）。SVGvsIconfont写法对比首先看一下Iconfont和SVG图标的用法。来源为阿里iconfont平台。很明显，SVGSprite使用起来没有Iconfont方便。它需要写3行代码，而后者只需要写1行。当然上面不是重点，重点是下面的变色和多色支持变色和多色支持变色1.iconfont可以很方便的通过CSS颜色来改变图标颜色。2、虽然SVGSprite比较麻烦，但是SVGSprite的代码原理如下。//定义符号//使用渲染的DOM结构是这样的：在ShadowDOM中渲染（关于ShadowDOM的知识可以看这篇文章或这篇文章），这样的DOM元素样式是有作用域的，外面的CSS对里面的元素没有影响shadow-root才会生效.如果要改变元素的颜色，需要使用/deep/来穿透添加样式，如下。svg/deep/path{fill:red;}当然，其实只要在父元素上加上fill:red就可以达到同样的效果，里面的元素会继承父元素的样式。PS：/deep/是shadowDOMv0的写法，v1放弃了这种写法，实际上支持v1的shadowDOM，父级的样式可以直接影响shadow-root中的元素。多色支持1.Iconfont不支持多色图标。2.SVGSprite可以使用CSS变量或者shadowDOM来支持多色图标。shadowDOM方法上面已经解释过了。借用别人的文章讲解CSS变量实现多色，如下。但是，使用CSS变量或shadowDOM的兼容性并不好。CSS变量：Edge15+shadowDOM：更糟。兼容性列表3.InlineSVG可以很好地支持多色多色变化。渐变支持Iconfont，SVGSprite不支持渐变。InlineSVG支持渐变色，兼容性好。Renderwithoutjitter使用Iconfont，因为字体文件是异步加载的，所以在字体文件加载前，图标位置会空白，加载完后显示，流程会出现如下图（来自GitHub博客）这样的抖动，而SVGSprite或InlineSVG内联加载不会有这样的抖动。当然Iconfont也可以内联加载，但是需要转成base64和样式表一起加载，转换后的文件大小会变成原来大小的1.3倍左右，这是由base64编码决定的（链接编码知识）。字体转base64的在线工具：https://transfonter.org/尺寸较大这是SVG相对于Iconfont的劣势，如下图。内联SVG的大小与SVGSprite大致相同。开发成本三者的开发成本差不多，但是SVG的两种方式都需要前期进行一些配置，后期开发会容易很多（单页应用）。以vue+vuecli为例，说明InlineSVG的便捷使用。1.配置Webpackloader:{//排除需要转成InlineSVG的目录exclude:[resolve('src/svgicons')],test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,loader:'url-loader',options:{limit:1,name:utils.assetsPath('img/[name].[hash:7].[ext]')}},{//指定InlineSVG的具体目录include:[resolve('src/svgicons')],test:/\.svg$/,use:[//readSVGsource{loader:'raw-loader'},//精简和优化的SVG源代码{loader:'svgo-loader',options:{plugins:[{removeTitle:true},{removeViewBox:false},{removeDimensions:true},//...其他参数]}}]}2.创建SvgIcon.vue组件：
