图片转Svg格式以及压缩优化方法

作者：Monodyee | 2024-02-23 02:03:03

踩

图片转svg

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

背景

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

以至于cv到QQ里都发不出去
在这里插入图片描述
所以查了一波资料，发现了一种可以使用Photoshop将不复杂的图片进行svg转化并且极大降低其大小的方法

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

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

然后走到这一步，开始进行压缩（我用的是已经用ps以svg格式导出的原图）
在这里插入图片描述

压缩步骤

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

在这里插入图片描述
反选后得到这种

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

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

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

接着，在PS左侧工具栏找到钢笔工具使用
在这里插入图片描述
选择好后，在画布上右键，选择定义自定形状，然后给获取到的形状命名，这名字就是后面svg代码里的data-name值

接着在左侧工具栏找到那个派大星一样的图标(形状工具)，选择自定形状工具

这里注意下，选择自定形状工具后，因为它默认还是那颗树的，所以你要手动设置为自己刚才建立的形状，在这里
在这里插入图片描述

选择了自己获取的形状后，在画布上左键，会弹出创建自定形状的框
在这里插入图片描述

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

然后就会发现画布上已经建立好了图形
在这里插入图片描述
但是这时候要注意，实际上这个路径是透明的，只是现在标出了路径方便看，所以为了后续操作，还要对其填充，在这里

填充色和描边颜色自己选就行了，你也可以先用提取器提取原图的颜色，然后进行填充，填充完毕，在右边关闭原图层的可见性
在这里插入图片描述
然后就只剩提取出来的图了

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

接下来点击左上角文件 --> 导出 --> 导出为，选择svg格式 --> 导出

再看输出文件，明显小了很多了
在这里插入图片描述
这就可以直接放到vscode里使用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/132876