两种新型的图片格式 : SVG和WebP的比较

两者的优点

• SVG

  • 尺寸小, 压缩性强;
  • 矢量图片;
  • XML编写;
  • 图片内文字支持搜索, Web端适用;

• WebP

  • 精细度不降低的前提下缩小图片体积;

适用范围

• SVG
  • Web端: IE9开始兼容;
  • Android: 安卓3.X开始局部支持;
  • IOS: Safari简单支持, 复杂滤镜不可行;
• WebP
  • Web端: Chromium内核浏览器, 国内占比50%;
  • Android: 支持 ( Android4.0以上提供的原生支持, 4.0以下使用官方解析库) ;
  • IOS: 使用官方解析库;

测试例子

转换工具分别使用的 Vector Magic 和 iSparta, 下载地址:
VectorMagic: http://download.csdn.net/detail/j550341130/9749040
iSparta: http://download.csdn.net/detail/j550341130/9749036

两张jpg, 大小分别为183K, 30.3K.

转换为PNG后, 2.3M, 124K ;
转换为SVG后, 1.44M, 257K ; 有细微失真 ;
转换为WebP后, 91.5K, 16.3K ; 没有失真 ;

图片质量还不错, 这里无法上传上来直接预览, 可以下载下来用浏览器打开查看, 转换后的SVG和WebP图片下载地址:
http://download.csdn.net/detail/j550341130/9749109

自己总结

通过自己测试的两张图片, 发现目前SVG更适合做图标, 色彩变化较为精细的图片转化为SVG格式后会变得更大 ; 而WebP暂时没有发现什么弊端.
PS: 现在可以使用AndroidStudio直接转化webP, AS真乃亲爸

参考文献

• SVG: https://isux.tencent.com/why-svg.html
• WebP: https://isux.tencent.com/introduction-of-webp.html