使用 SVGO 来减小 SVG 文件大小的三种方法

在这篇文章中我将建议你三种方法,利用 SVGO 让你对 SVG 进行优化,使之适合 Web 使用。

为什么你需要对 SVG 做优化

SVG (全称是 Scalable Vector Graphics) 是一个跟分辨率无关的图形格式。其最大的好处就是不基于像素,在现今的视网膜屏设备的时代这是非常棒的一种格式,在响应式的网页中表现良好。

如果你跟我一样不是一个图像设计师,你就会发现有很多开源的在线资源来获取 SVG 素材。这样做的缺点就是这些资源往往不是为 Web 所设计的。这意味着你会发现你下载的这些资源充满和复杂的路径信息,就跟 PhotoShop 处理后的图像一样。同时,因为 SVG 本身是基于 XML 的,查看源码就会发现有大量的不必要的标签。除了我强迫症似得要求代码必须简洁,这些非常复杂的文件导致文件体积膨胀得厉害,直接影响网站的性能。

不要以为 SVG 是你自己绘制的就会很精简。虽然最新版本的 Adobe Illustrator 可以导出尽可能小的 SVG 数据,而老的版本或者是其他的向量图形编辑工具仍然保留大量不必要的注释、doctype 声明和私有的属性信息。

阅读全文

转载于:https://my.oschina.net/coyeecom/blog/894469

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值