自从龙哥接触了矢量图svg后,感觉真的很方便而且优势很大。
首先,svg图片是矢量图,不会失真。其次,svg图片很小,对于网页加载很快。第三,svg图片是由代码组成,很容易且方便编辑。第四,svg图片代码可直接放到网站源码里,很方便实现hover效果。
但是如果是复杂的图片,特别是有渐变的图片,不建议搞成svg,因为这样的svg图片反而很大,因为需要很多代码实现。所以svg主要是单色或者多色组成的图片比较有优势。
今天龙哥先介绍下如何精简svg的方法,后面再介绍如何把图片转换成svg图片,实现高清矢量图。
svg图片精简方法:
首先保存成.svg格式,记住,是带svg和path的svg格式,这种才是真的svg源码格式图片。
第二用浏览器打开,切换到开发者模式。
第三展开模式里的源码,一个一个 path 去点,看是图片里是哪里,如果没用的 path 右键删除。
最后把保留的源码复制,黏贴到 svg 源码里保存即可。这样可以减少无用源码,减少图片大小。