SVG 标签

SVG 是一个矢量图形格式。它文字的意思是可扩展矢量图形(Scalable Vector Graphics)。基本上说,就是你Adobe Illustrator上面使用的。你能够在web上轻松的使用SVG图标,而这里有很多你需要了解的知识。

到底为啥要使用SVG?

  • 在压缩后文件大小比较小
  • 能被放缩到任何大小,而且不会失掉清晰度(及其小除外)
  • 在视网膜屏上表现良好
  • 能够控制一些特效样式,比如交互和阴影

尽管SVG的普及,并在我们的浏览器当中得到很好的支持,我们还是缺少好的构造icons的方法。是时候填补这个缝隙开始将SVG作为icons应用于我们的项目当中。

很多伟大的方法和原则的出现使得CSS越来越模块化、结构化和灵活。但是想想你的icons。在icons上使用光栅图意味着他们不容易被css控制。如果我们需要去改变icon的hover、active、focus时候,我们应该怎么办呢?我们需要在种状态下的icon我们都需要去增加一个图片。另外对于图片的尺寸,每一个icon尺寸大小我们也都需要增加另外一个icon图片。对于图片的形状,阴影?我们都需要去对应增加图片数量。相当不方便对吧?