inkscape将png图片转换为svg格式的矢量图

时间:2022-11-11 21:06:42
1.导入png图片,也可以直接将图片拉入到窗口

这个是打开操作
inkscape将png图片转换为svg格式的矢量图
这个是直接拖入到新建文档的
inkscape将png图片转换为svg格式的矢量图
这样不会打开新的窗口来展示图片
inkscape将png图片转换为svg格式的矢量图
二者不同之处
inkscape将png图片转换为svg格式的矢量图
2、选中图片,按快捷键,shift+alt+b,调用“提取位图轮廓”功能窗口
左侧,模式选择颜色,下面三个单选,选择栈扫描,移除背景
功能如图
然后选择,更新--》确定
inkscape将png图片转换为svg格式的矢量图
3、另存为就ok了

2、转后完成之后对svg图片进行设置
inkscape将png图片转换为svg格式的矢量图
选中图片,右键,对象属性
inkscape将png图片转换为svg格式的矢量图
可以自行设置 id以及标签,便于在html页面中加载后实用js进行操作
另外,左下角有个互动性,点开,可以看到许多常见的操作,比如onclick onload等等,可以直接写上名字,这样就不用在去翻看xml源码去设置了

xml编辑器打开方式右侧功能栏,或者菜单栏 编辑 中找到。或者直接shift+ctrl+x打开
inkscape将png图片转换为svg格式的矢量图     inkscape将png图片转换为svg格式的矢量图
常见问题介绍
1、明明将要展示的文件放在了文档中,在inkscape中能显示,为什么到了浏览器中就显示不全了?
inkscape将png图片转换为svg格式的矢量图
2.如何调整画布的大小
第一种方法,文件--文档属性(shift+ctrl+D)
inkscape将png图片转换为svg格式的矢量图   inkscape将png图片转换为svg格式的矢量图
第二种方法 打开xml编辑器 shift+ctrl+x
inkscape将png图片转换为svg格式的矢量图
3、在html中加载svg后为何会有边框?为什么不能随浏览器大小改变而是产生了内嵌的滚动窗口?
有边框是因为在html引入svg文件的时候未设置html的的标签属性为border:0;
<iframe src="t.svg" style="width:100%;height:100%; border:0"></iframe>
这样就没有边框了
inkscape将png图片转换为svg格式的矢量图
可以看到出现了内嵌的滑动窗口
inkscape将png图片转换为svg格式的矢量图
原因在于,svg的xml设置中width与heigh设置了绝对值,所以当浏览器窗口不够大小的时候就会出现内嵌的滚动条
解决很简单,只需要打开源码,修改一下参数就好,
inkscape将png图片转换为svg格式的矢量图