ai怎么导出svg文件? ai导出svg并在html中使用的方法
发布时间:2015-11-12 14:37:13 作者:佚名 我要评论
ai怎么导出svg文件? svg包含很多ai信息,但是如果要在html中使用的话就需要重新提取修改,该怎么提取呢?下面我们分享ai中提取svg文件的详细方法,需要的朋友可以参考下
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将圆环分割成多份并填充不同颜色的技巧
ai圆环怎么分割成多份?ai绘制的圆环想要分割成多个部分,该怎么分割呢?下面我们就来看看ai将圆环分割成多份并填充不同颜色的技巧2023-05-04ai如何给任意区域上色填充颜色? ai给不规则形状上色的技巧
ai如何给任意区域上色填充颜色?ai中绘制的不规则几何图形,想要上色,该怎么操作呢?下面我们就来看看ai给区域图形上色的技巧2023-05-04- ai胶片颗粒艺术效果在哪?ai的文字想要制作一些特效,该怎么制作胶片颗粒下过呢?下面我们就来看看ai文字添加胶片颗粒特效的技巧2023-04-27
- ai怎么快速画王冠?ai中想要绘制一款立体的王冠,该怎么绘制呢?下面我们就来看看ai调用符号喷枪中王冠的技巧2023-04-27
- ai怎么绘制地理位置图标?地理位置标志时很常见的,想要绘制这样一个图标,该怎么绘制呢?下面我们就来看看ai画地理标位置的技巧2023-04-27
- AI如何配置键盘增量?ai想要配置键盘增量数值,该怎么设置呢?下面我们就来看看AI键盘增量默认数值设置方法2023-04-27
- ai怎么绘制细菌素材类海报?ai中想要手绘细胞,该怎么绘制呢?下面我们就来看看ai设计细菌主题海报的技巧2023-04-27
- AI怎么制作圆圈波纹效果?ai中想要绘制圆圈波纹效果,该怎么绘制呢?下面我们就来看看ai快速制作波纹纹理素材的技巧,详细请看下文介绍2023-04-26
AI文字其中一个笔画怎么做空心效果? ai文字任意位置空心效果的实现方法
AI文字其中一个笔画怎么做空心效果?ai输入的文字,想要找一个部分做成空心效果,该怎么实现呢?下面我们就来看看ai文字任意位置空心效果的实现方法2023-04-26- AI怎么等距离缩放?ai多个图形组成的部分,在缩放的时候想要等距离缩放,该怎么操作呢?下面我们就来看看AI形状内部的间隔等距离缩放技巧2023-02-27
最新评论