除了文中方法，还可以使用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里使用

图片转Svg格式以及压缩优化方法相关推荐

jpg , png 图片转SVG格式（资源篇）
jpg , png 图片转SVG格式(资源篇) 在线工具: 在线转换工具使用说明: 打开网站,打开文件上传,设置尺寸,直接转换,下载即可. 以上就是"jpg , png 图片转SVG格式( ...
如何在iconfont上传图标，将图片转为svg格式？
文章目录一. 下载工具 1. 下载软件 - inkscape 2. 安装教程 3. 使用二. 上传iconfont 一. 下载工具 1. 下载软件 - inkscape 链接:https://pa ...
VALSE 2017 | 神经网络模型压缩优化方法
本文首发在个人微信公众号:计算机视觉life上. 近年来,深度神经网络在计算机视觉.语音识别等领域取得了巨大成功.为了完成更加复杂的信息处理任务,深度神经网络变得越来越深,也使得其计算量越来越大. ...
微信小程序绘图实现图片拉伸，裁剪与压缩的方法，亲测使用实用
注意:本文转载自https://blog.csdn.net/vivian_jay/article/details/68933161 一.canvas绘图API 工欲善其事:必先利其器. 隆重请出主角 ...
压缩html页面 seo,WordPress前端html代码压缩优化方法
为了优化网站的访问速度,对网页进行压缩是非常不错的一条方法.压缩页面减少了页面的体积提升了访问速度. 部署功能代码 //压缩html代码 function wp_compress_html(){ fu ...
inkscape将png图片转换为svg格式的矢量图
1.导入png图片,也可以直接将图片拉入到窗口这个是打开操作这个是直接拖入到新建文档的这样不会打开新的窗口来展示图片二者不同之处 2.选中图片,按快捷键,shift+alt+b,调用" ...
小程序图片转换Base64格式的三种方法
一.使用小程序自带的网络请求 1.wx.request() 这种方式适合网络https路径图片,但无法解析wxfile://xxxx导致转化报错 image2Base64(imgUrl) {retur ...
Super Vectorizer使用教程：将PNG，JPG等图片转换为SVG格式
Super Vectorizer是一款能够轻松制作转换编辑矢量化图像的最佳软件,将任何位图图像转换为Ai,SVG,DXF和PDF的可调整矢量图形.如果大家想要知道如何在 Mac 上将 PNG 转换为 ...
java png转svg_png格式图片转为svg格式图片
UML类图关系--继承(泛化).实现.关联.聚合.组合.依赖在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Associat ...

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

背景

压缩步骤

图片转Svg格式以及压缩优化方法相关推荐

最新文章

热门文章