图片转Svg格式以及压缩优化方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了图片转Svg格式以及压缩优化方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

除了文中方法，还可以使用svgo工具对svg图片进行压缩：可参考svgo

背景

前端有些时候需要把像png、jpg等格式的图片转为svg格式的矢量图使用，但是直接去一些网站里转换，得到的svg代码往往因为冗余信息实在太多，大得离谱
看着都头疼
图片转Svg格式以及压缩优化方法

以至于cv到QQ里都发不出去
图片转Svg格式以及压缩优化方法
所以查了一波资料，发现了一种可以使用Photoshop将不复杂的图片进行svg转化并且极大降低其大小的方法

下面通过实战演示这种方法

先将需要转化的图在PS中打开，选中图层 --> 栅格化图层。接着把不需要的部分都扣掉，留下背景透明的图片，抠图的方法这里省略。

然后走到这一步，开始进行压缩（我用的是已经用ps以svg格式导出的原图）
图片转Svg格式以及压缩优化方法

压缩步骤

首先选择魔棒工具或者快速选择工具，左键图片透明位置 --> 右键选择反向，或者使用使用快捷键Shift+Ctrl+I进行反选，选中需要的图层。

图片转Svg格式以及压缩优化方法
反选后得到这种

可以看到虚线框已经选中我们需要的图层了

接着光标放到图层上，右键，选择建立工作路径 ，然后选择容差，我用的3.0，这里说一下容差是什么。容差就是魔棒在自动选取相似的颜色选区时的近似程度，容差越大，被选取的区域将可能越大。简单来说，容差就是控制选取工具的偏差值。
图片转Svg格式以及压缩优化方法
确定后，目前进度是这样

可以看到已经建立好了路径

接着，在PS左侧工具栏找到钢笔工具使用
图片转Svg格式以及压缩优化方法
选择好后，在画布上右键，选择定义自定形状，然后给获取到的形状命名，这名字就是后面svg代码里的data-name值

接着在左侧工具栏找到那个派大星一样的图标(形状工具)，选择自定形状工具
图片转Svg格式以及压缩优化方法
这里注意下，选择自定形状工具后，因为它默认还是那颗树的，所以你要手动设置为自己刚才建立的形状，在这里

选择了自己获取的形状后，在画布上左键，会弹出创建自定形状的框
图片转Svg格式以及压缩优化方法

然后自己设置宽高，自己能看到，方便后续操作就行，后面在<svg>的with和height属性还可以再设置

然后就会发现画布上已经建立好了图形
图片转Svg格式以及压缩优化方法
但是这时候要注意，实际上这个路径是透明的，只是现在标出了路径方便看，所以为了后续操作，还要对其填充，在这里

填充色和描边颜色自己选就行了，你也可以先用提取器提取原图的颜色，然后进行填充，填充完毕，在右边关闭原图层的可见性
图片转Svg格式以及压缩优化方法
然后就只剩提取出来的图了

下一步就是设置画布大小，不然图片的透明box太大，而图片实际上却占了很小一部分。画布大小在左上角那一排，也可以使用快捷键Alt+Ctrl+c直接打开。当然你也可以直接在导出的时候设置画布大小
图片转Svg格式以及压缩优化方法
然后自己设置宽高调整合适