本文主要探讨JPG/PNG转SVG矢量格式并支持FILL的方法,介绍在线转换网站和通过illustator转换的经验。

应该说,国内网站很少用到SVG格式,在此之前我只是听过,而没有用过。前些天遇到一个外国网站,在重要的动画位置使用了SVG图片,当我想修改的时候发现里面大有乾坤,分享一下感想和经验。前提我想说,SVG格式适用于如LOGO、图标这类颜色并不多的图,颜色太鲜艳图还是谨慎为好。

注:本文中使用的illustrator版本为Adobe Illustrator CC 2017,其他版本未测试。

初探和原理

右键打开SVG文件一看,<svg>和一堆<path>标签映入眼帘,原理看起来像一张白纸,然后用path来画出路线,用fill属性来填充每个区域的颜色,从而实现矢量缩放。很神奇,关键是大小和颜色可以随便改,用css或者js可以直接控制图形的颜色和大小,这个操作太给力了,在部分场景非常实用。

不过,我随便找了一张png图像,用Photoshop打开,发现也可以到处为svg格式。但是用PS导出的SVG,我看了代码,完全是另一片天地。简单来说就是一个<image>标签里面包着一个base64编码的图片,这样的话我就不能改颜色了呀,这我要你何用!

所以SVG可能有两种形式:

  1. 真SVG:<svg>+<path>+fill属性的组合
  2. 假SVG:<image>+base64图片

在线转换 适用于颜色较单一的图片

网络中,大部分JPG/PNG转SVG都转出的是假SVG(这里说的假SVG是我个人意念,非专业术语)。然而如果我们想得到一个真正的矢量svg时,需要得到真SVG编码。我找寻了国外网站,仅找到两个:

http://www.pngtosvg.com/  免费 功能单一 测试过,可以用 颜色选的一个

https://vectormagic.com/    收费还挺贵,功能强大

这里要注意的是,由于SVG是画出来的,颜色越多,代码越多。所以如果颜色较为单一时(如5个颜色以下),用在线转换网站已可以满足要求,但如果渐变图片就头疼了。我找了一张颜色较为单一的google图,和一张有渐变的chrome图做对比。

android 开发png转svg png转svg代码_chrome

谷歌图看起来还行,也就是缺了点感觉。chrome就有点惨不忍睹了。

android 开发png转svg png转svg代码_html_02

所以真的颜色较多的时候,或者真有个渐变,那么下面介绍的Illustrator可能更好用一点。

使用Adobe Illustrator编辑后导出SVG

首先,只要jpg或者png图片没有太小,比如宽高都大于200px,并且没有阴影等乱七八糟的效果,我认为用Illustrator就可以做出比较好的矢量SVG。操作流程如下:

1. 用Illustrator打开JPG/PNG图片。

2. 点击图片,进入选择状态,上面的工具栏点击“图像描摹”右侧的下拉箭头,选择“高保真度图片”。

android 开发png转svg png转svg代码_html_03

这时无敌的illustrator已经把普通jpg/png转换成了矢量图。但还有一个问题,就是仔细观察的话,这个图是有白色背景的。如果你恰好需要这个背景那太好了,否则我们必须把这个背景弄掉。

3. 打开描摹面板。两种方法,第一种,点击工具栏上的按钮。第二种,右上角切换工作台模式。二选一,如图:

 

android 开发png转svg png转svg代码_Adobe_04

4. 展开高级,方法选择第一个“临接(创建木刻路径)”,选项勾选“忽略白色”,看图就明白了:

android 开发png转svg png转svg代码_android 开发png转svg_05

这时拖到外侧看一下图片背景,没了就对了。如果还有,我没招了。

5. 菜单栏选择文件->导出->导出为…,选择保存路径后,跳出SVG选项卡,样式部分我一般选择内部CSS,其他默认值。 OVER.