写于2021/03/29

1.常规图标

如果考虑自适应，尽量使用SVG格式原因？SVG是自适应大小不会失真的，而PNG是固定的。（并不是SVG格式的就直接自适应，还是要根据代码设定进行自适应变化）
image.png

2.文本图标

有一些文本使用SVG图标，即使用字体图标的原因？图片属性下的大小可以随窗口变化自适应，而文本属性下的大小不会随窗口变化。
image.pngimage.png

3.SVG的优劣势

优势：

  • SVG是矢量图文件，自适应大小不会失真的；而PNG是位图，放大缩小会失真。
  • SVG可以被CSS控制外观，自由改变图标颜色，尺寸；PNG不可以改动。
  • 所有的SVG可以全部放在一个文件中，节省HTTP请求。
  • 使用SML.CSS或者js可以制作有交互动画的效果。

劣势：

  • 如果是将文本转成SVG字体图标，当文本内容需要更改，就需要设计师重新做图标给到前端进行替换；而常规text属性需要改内容时，只需要前端改文案内容即可。

4.SVG使用取舍

在考虑是否需要用SVG格式时，根据：自适应的需求必要性、后期修改的效率成本，来衡量是否要设置字体图标？如果确认要使用字体图标，再考虑在哪些地方设置，不要全篇设置。比如在AntD中，黄色部分是设置了字体图标，其余字段保留text属性。
image.png