inkscape将png图片转换为svg格式的矢量图
2016-02-27 15:27
1691 查看
1.导入png图片,也可以直接将图片拉入到窗口
这个是打开操作
![](http://img.blog.csdn.net/20160227153010543?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这个是直接拖入到新建文档的
![](http://img.blog.csdn.net/20160227153046568?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这样不会打开新的窗口来展示图片
![](http://img.blog.csdn.net/20160227153033708?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
二者不同之处
![](http://img.blog.csdn.net/20160227155235161?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
2、选中图片,按快捷键,shift+alt+b,调用“提取位图轮廓”功能窗口
左侧,模式选择颜色,下面三个单选,选择栈扫描,移除背景
功能如图
然后选择,更新--》确定
![](http://img.blog.csdn.net/20160227155304144?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
3、另存为就ok了
2、转后完成之后对svg图片进行设置
![](http://img.blog.csdn.net/20160227155325395?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
选中图片,右键,对象属性
![](http://img.blog.csdn.net/20160227155421692?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
可以自行设置 id以及标签,便于在html页面中加载后实用js进行操作
另外,左下角有个互动性,点开,可以看到许多常见的操作,比如onclick onload等等,可以直接写上名字,这样就不用在去翻看xml源码去设置了
xml编辑器打开方式右侧功能栏,或者菜单栏 编辑 中找到。或者直接shift+ctrl+x打开
![](http://img.blog.csdn.net/20160227155555788?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](http://img.blog.csdn.net/20160227155605132?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
常见问题介绍
1、明明将要展示的文件放在了文档中,在inkscape中能显示,为什么到了浏览器中就显示不全了?
![](http://img.blog.csdn.net/20160227155623865?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
2.如何调整画布的大小
第一种方法,文件--文档属性(shift+ctrl+D)
![](http://img.blog.csdn.net/20160227160026842?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](http://img.blog.csdn.net/20160227160036476?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
第二种方法
打开xml编辑器 shift+ctrl+x
![](http://img.blog.csdn.net/20160227160109983?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
3、在html中加载svg后为何会有边框?为什么不能随浏览器大小改变而是产生了内嵌的滚动窗口?
有边框是因为在html引入svg文件的时候未设置html的的标签属性为border:0;
<iframe src="t.svg" style="width:100%;height:100%;border:0"></iframe>
这样就没有边框了
![](http://img.blog.csdn.net/20160227160140055?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
可以看到出现了内嵌的滑动窗口
![](http://img.blog.csdn.net/20160227160153750?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
原因在于,svg的xml设置中width与heigh设置了绝对值,所以当浏览器窗口不够大小的时候就会出现内嵌的滚动条
解决很简单,只需要打开源码,修改一下参数就好,
这个是打开操作
这个是直接拖入到新建文档的
这样不会打开新的窗口来展示图片
二者不同之处
2、选中图片,按快捷键,shift+alt+b,调用“提取位图轮廓”功能窗口
左侧,模式选择颜色,下面三个单选,选择栈扫描,移除背景
功能如图
然后选择,更新--》确定
3、另存为就ok了
2、转后完成之后对svg图片进行设置
选中图片,右键,对象属性
可以自行设置 id以及标签,便于在html页面中加载后实用js进行操作
另外,左下角有个互动性,点开,可以看到许多常见的操作,比如onclick onload等等,可以直接写上名字,这样就不用在去翻看xml源码去设置了
xml编辑器打开方式右侧功能栏,或者菜单栏 编辑 中找到。或者直接shift+ctrl+x打开
常见问题介绍
1、明明将要展示的文件放在了文档中,在inkscape中能显示,为什么到了浏览器中就显示不全了?
2.如何调整画布的大小
第一种方法,文件--文档属性(shift+ctrl+D)
第二种方法
打开xml编辑器 shift+ctrl+x
3、在html中加载svg后为何会有边框?为什么不能随浏览器大小改变而是产生了内嵌的滚动窗口?
有边框是因为在html引入svg文件的时候未设置html的的标签属性为border:0;
<iframe src="t.svg" style="width:100%;height:100%;border:0"></iframe>
这样就没有边框了
可以看到出现了内嵌的滑动窗口
原因在于,svg的xml设置中width与heigh设置了绝对值,所以当浏览器窗口不够大小的时候就会出现内嵌的滚动条
解决很简单,只需要打开源码,修改一下参数就好,
相关文章推荐
- HTML5 HybridApp开发上手指引
- textarea如何实现高度自适应(不出现滚动条)?
- 用Java编写金字塔类型的结构
- Ulua_toLua_基本案例(四)_AccessingLuaVariables
- HDOJ-1016 Prime Ring Problem 素数环 DFS
- 004_Http之response响应头-01重定向
- EasyMonkeyDevice vs MonkeyDevice&HierarchyViewer API Mapping Matrix
- 使用Dmitry Sklyarov的方法来破解一款流行的4G调制解调器
- Leetcode problem 4:Median of Two Sorted Arrays
- android 仿nice实现在图片上打标签
- Android Fragment 生命周期图
- Python——异常编码细节
- C语言 指向结构体变量的指针
- bat文件编写(无线承载网络设置)
- 计算机工作的进行
- 第二天:图像标签及超链接的使用
- 译:在ASP.NET MVC5中如何使用Apache log4net 类库来记录日志
- JSP学习笔记三之response对象和request对象
- Ulua_toLua_基本案例(三)_CallLuaFunction
- 大型网站架构系列:分布式消息队列(一)