【转】小谈PNG转SVG的方法 在线转换网站与illustrator
转自: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可能有两种形式:
- 真SVG:<svg>+<path>+fill属性的组合
- 假SVG:<image>+base64图片
在线转换 适用于颜色较单一的图片
网络中,大部分JPG/PNG转SVG都转出的是假SVG(这里说的假SVG是我个人意念,非专业术语)。然而如果我们想得到一个真正的矢量svg时,需要得到真SVG编码。我找寻了国外网站,仅找到两个:
http://www.pngtosvg.com/ 免费 功能单一 测试过,可以用 颜色选的一个
https://vectormagic.com/ 收费还挺贵,功能强大
这里要注意的是,由于SVG是画出来的,颜色越多,代码越多。所以如果颜色较为单一时(如5个颜色以下),用在线转换网站已可以满足要求,但如果渐变图片就头疼了。我找了一张颜色较为单一的google图,和一张有渐变的chrome图做对比。
谷歌图看起来还行,也就是缺了点感觉。chrome就有点惨不忍睹了。
所以真的颜色较多的时候,或者真有个渐变,那么下面介绍的Illustrator可能更好用一点。
使用Adobe Illustrator编辑后导出SVG
首先,只要jpg或者png图片没有太小,比如宽高都大于200px,并且没有阴影等乱七八糟的效果,我认为用Illustrator就可以做出比较好的矢量SVG。操作流程如下:
1. 用Illustrator打开JPG/PNG图片。
2. 点击图片,进入选择状态,上面的工具栏点击“图像描摹”右侧的下拉箭头,选择“高保真度图片”。
这时无敌的illustrator已经把普通jpg/png转换成了矢量图。但还有一个问题,就是仔细观察的话,这个图是有白色背景的。如果你恰好需要这个背景那太好了,否则我们必须把这个背景弄掉。
3. 打开描摹面板。两种方法,第一种,点击工具栏上的按钮。第二种,右上角切换工作台模式。二选一,如图:
4. 展开高级,方法选择第一个“临接(创建木刻路径)”,选项勾选“忽略白色”,看图就明白了:
这时拖到外侧看一下图片背景,没了就对了。如果还有,我没招了。
5. 菜单栏选择文件->导出->导出为…,选择保存路径后,跳出SVG选项卡,样式部分我一般选择内部CSS,其他默认值。 OVER.
【转】小谈PNG转SVG的方法 在线转换网站与illustrator相关推荐
- html5svg在线编辑器,SVG to Canvas在线转换工具
https://github.com/samsha/svg2canvas canvg.js 是的确实有人在做这样的事,canvg.js 就是一个将SVG转换成Canvas的工具库,甚至有些SVG的动画 ...
- 学会这3个小招式,轻松实现aac在线转换mp3
我们在传输或者接收文件的时候会发现,现在音频也具备着各式各样的格式,并且各有各的优缺点,就以aac格式来说,虽然它是一种较高级的音频编码格式,支持多种高低音轨,且兼容和比特率方面表现的不错,体积也比常 ...
- c语言合并jpg成pdf,JPG在线转换成PDF文件的简单方法
在现在的工作性质中.大家不管是在工作中还是在学习中,都会用到JPG图片文件,就连我们平时朋友聊天之间,也会传送很多图片文件,但是图片文件在聊天中很方便,但是在工作中传送图片就显得很不正式了,领导都会要 ...
- 手机录音amr怎么转mp3?三种方法直接转换!
将AMR录音文件转换为MP3格式的重要性在于MP3格式具有更好的兼容性和广泛的支持.事实上,许多设备和应用程序不支持AMR格式,因此将其转换为MP3格式可以使文件更加普遍可用,并能够在各种平台和设备上 ...
- JPG在线转换成PDF文件的简单方法
在现在的工作性质中.大家不管是在工作中还是在学习中,都会用到JPG图片文件,就连我们平时朋友聊天之间,也会传送很多图片文件,但是图片文件在聊天中很方便,但是在工作中传送图片就显得很不正式了,领导都会要 ...
- 由su和su -的区别谈学习linux运维方法
由su和su -的区别谈学习linux运维方法一例 老男孩Linux培训新班刚开始,老男孩发现群里就在讨论这个su和su -的区别,有的同学们说,直接su就可以,有的说必须要su -.有的同学直接发问 ...
- 经验 | 清华大学计算机系教授~浅谈研究生学位论文选题方法
点上方蓝字计算机视觉联盟获取更多干货 在右上方 ··· 设为星标 ★,与你不见不散 编辑:Sophia 计算机视觉联盟 报道 | 公众号 CVLianMeng 转载于 :清华大学,专知 AI博士笔 ...
- click 点击图片不起作用_JavaScript 练手小案例:基于SVG的图片切换效果
最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解 ...
- 浅谈tcpwrapper的基本使用方法
浅谈tcpwrapper的基本使用方法 曾几何时,不知道你是否与笔者小神一样,有在FreeBSD下实现与WIN2000中的IPSec安全策略实现访问控制的一样功能的想法呢?也许这对刚刚接触FreeBS ...
- 趣谈唯一邀请码生成方法
趣谈唯一邀请码生成方法 前段时间项目上需要生成唯一邀请码!嘿嘿,多简单的一件事,心里就已默默将代码写了一遍.但小小的邀请码生成却也小有乾坤,这就是后话了. 一.最简单的实现 很多人 肯定都和我一开始一 ...
最新文章
- 挑战弱监督学习的三大热门问题 AutoWSL2019挑战赛正式开赛
- 如何判断字符串所用何种加密编码
- 轻量NuGet服务—BaGet
- 硬盘序列号示例_序列化代理模式示例
- css的再深入9(更新中···)
- 腾讯视频下载转mp4_腾讯视频如何上传自己的视频
- java多态子父类的构造器、成员变量、方法的调用关系
- Java基础 | 专业排行榜前7的Java代码审计工具
- 瑞吉外卖QQ邮箱登录
- Git 团队协作机制
- aria2 linux 编译,Centos 7 编译安装Aria2
- [HDU]6069 Counting Divisors
- 红警2共和国之辉如何打7冷酷
- Kettle 实现数据同步
- https://api.douban.com 不在以下 request 合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/net
- win10 右下角WiFi图标不见了
- 《大上海》《血滴子》票房不佳很可能都赔钱
- 世纪互联运营的office365登陆手机Outlook
- 魔塔之拯救白娘子~我的第一个VB6+DX8做的小游戏源码~18开始游戏-物体碰撞检测
- Android Studio 导入项目运行按钮灰色的完美解决方法
热门文章
- python(xlwt的简单运用)
- Qt5.2.1 + VS2012 环境配置
- 古诗词html模板,田圆格古诗词书法模板
- MCSA 70-740 windows 安装和部署工具汇总学习
- 小米系列手机开源代码
- 单例模式几种实现方式和代码
- 解决“ssh服务器拒绝了密码 请再试一次”问题
- 微信小程序上传图片到服务器总是失败_微信小程序上传图片到服务器实例
- unity游戏开发毕设_基于unity游戏引擎的游戏设计毕设论文.doc
- HTML 事件参考手册:全局事件属性