【转】小谈PNG转SVG的方法在线转换网站与illustrator

我会带着你远行 2022-09-10 13:12 275阅读 0赞

转自：[https://www.aspirantzhang.com/network/png\_to\_svg.html][https_www.aspirantzhang.com_network_png_to_svg.html]

本文主要探讨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/ ][http_www.pngtosvg.com] 免费 功能单一 测试过，可以用 颜色选的一个**

[https://vectormagic.com/][https_vectormagic.com]    收费还挺贵，功能强大

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

![6e78e2d9d845bb1e0117d8968d0b2210.png][]

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

![1b1cf9bb7dd3a9c205b7fee4868c4c4c.png][]

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

## 使用Adobe Illustrator编辑后导出SVG ##

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

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

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

![d59245927d94ee3524dfd3d335e0f4b1.png][]

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

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

![8664bc4e8c0508eec633f0c720b496bc.png][]

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

![4102d4fd4d75907e2a824b8f29ee21ed.png][]

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

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

[https_www.aspirantzhang.com_network_png_to_svg.html]: https://www.aspirantzhang.com/network/png_to_svg.html
[http_www.pngtosvg.com]: http://www.pngtosvg.com/
[https_vectormagic.com]: https://vectormagic.com/
[6e78e2d9d845bb1e0117d8968d0b2210.png]: /images/20220829/a6bf0bcf36a249ccb021c818fc1b72aa.png
[1b1cf9bb7dd3a9c205b7fee4868c4c4c.png]: /images/20220829/f4adcc1438644d5bb7da6d2223b039c4.png
[d59245927d94ee3524dfd3d335e0f4b1.png]: /images/20220829/4aa7eea216a847019801ac37dbd7453e.png
[8664bc4e8c0508eec633f0c720b496bc.png]: /images/20220829/b426dbcd6c31479aae19bc5d9fb2b1d1.png
[4102d4fd4d75907e2a824b8f29ee21ed.png]: /images/20220829/15b858094fea493682d98eeca2ffc154.png