ai怎么导出svg文件? ai导出svg并在html中使用的方法
论坛排名,女婴被弃垃圾堆,雷政富qvod
ai图标制作完成之后,保存的svg文件包含许多ai的信息,如果要在html中使用,我们需要在svg文件中提取/修改信息,重新保存。
1、在ai中已经完成图标,要保存svg文件,点击“文件(file)”-“另存为(save as)”,在弹出的对话框中保存类型选择svg(*.svg)。
2、svg文件保存后,用文本编辑器打开,找到<path>这一个节点,d属性里面就是这个图片的路径数据【注:在保存svg图标的时候需要使用路径查找器工具将图标制作为复合路径,不然该svg文件中会有多个<path>节点】。
3、可以新建一个.svg文件,用文本编辑器打开,输入以下内容
复制内容到剪贴板
- <?xml version="1.0" encoding="utf-8"?>
-
- <svg
-
- version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="左偏移量(px)" y="上偏移量(px)"
-
- width="宽度" height="高度" viewbox="0 0 宽度 高度" enable-background="new 0 0 宽度 高度"
-
- xml:space="preserve">
-
- <g>
-
- <path stroke="描边颜色" fill="填充颜色" d="图标路径数据"/>
-
- </g>
-
- </svg>
viewbox 和enable-background 的宽高不要修改,使用从ai保存的svg中的数据。
4、将从ai保存的svg中复制路径数据到上面新建的svg图标路径数据属性中,设置好颜色大小的信息,保存后就可以在html中正常使用了。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!!
点击进行留言回复
相关文章:
-
-
详解AI灵活调节色彩的技巧
这篇教程是向大家详细讲解AI灵活调节色彩的技巧,教程非常地实用,很适合新手来学习,推荐到脚本之家,喜欢的朋友可以跟着教程一起来学习吧... 15-05-28
[阅读全文]
-
-
基础:AI画笔使用技巧详解
这篇教程是向脚本之家的朋友详解AI画笔使用技巧,教程比较基础,很适合新手来学习,推荐到脚本之家,喜欢的朋友可以跟着教程一起来学习吧... 15-05-31
[阅读全文]
-
-
-
-
Ai 圆角矩形的绘制方法介绍
这篇教程是向脚本之家的朋友介绍Ai 圆角矩形的绘制方法,教程比较基础,很适合新手来学习,推荐到脚本之家,喜欢的朋友可以跟着教程一起来学习... 15-06-08...
[阅读全文]
-
-
AI钢笔工具使用技巧和方法介绍
这篇教程是向脚本之家的朋友介绍AI钢笔工具使用技巧和方法,教程比较基础,很适合新手来学习,推荐都脚本之家,喜欢的朋友可以跟着教程一起来学习... 15-06-1...
[阅读全文]
-
网友评论