AI图标制作完成之后，保存的svg文件包含许多AI的信息，如果要在HTML中使用，我们需要在svg文件中提取/修改信息，重新保存。

1、在AI中已经完成图标，要保存SVG文件，点击“文件(File)”-“另存为(Save As)”，在弹出的对话框中保存类型选择SVG(*.svg)。

2、svg文件保存后，用文本编辑器打开，找到<path>这一个节点，d属性里面就是这个图片的路径数据【注：在保存svg图标的时候需要使用路径查找器工具将图标制作为复合路径，不然该svg文件中会有多个<path>节点】。

3、可以新建一个.svg文件，用文本编辑器打开，输入以下内容

复制内容到剪贴板

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <svg
  3. version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="左偏移量(px)" y="上偏移量(px)"
  4. width="宽度" height="高度" viewBox="0 0 宽度 高度" enable-background="new 0 0 宽度 高度"
  5. xml:space="preserve">
  6. <g>
  7. <path stroke="描边颜色" fill="填充颜色" d="图标路径数据"/>
  8. </g>
  9. </svg>
 
转载来自：http://www.cnblogs.com/binmengxue/p/7688748.html

SVG格式图片转成HTML中SVG的Path路径的更多相关文章

  1. png格式图片转为svg格式图片

    png格式图片转为svg格式图片 (2012-08-30 16:24:00) 转载▼ 标签: 杂谈 分类: linux 在ubuntu下将png格式的图片转换成svg格式步骤如下:1.安装 inksc ...

  2. 关于svg格式图片颜色更改

    利用 style="fill:#8a8acb" 放在path标签下面. 技巧:比如一个svg是一个圆圈内包含一个问号,问号内填充白色,圆圈内,问号外,填充其他颜色,如蓝色.可 设置 ...

  3. FFMpeg笔记（一） 使用FFmpeg将任意格式图片转换成任意格式图片

    void SrcToDest(char* pSrc, char* pDest,unsigned int nSrcWidth, unsigned int nSrcHeight, AVPixelForma ...

  4. 本地显示svg正常显示，在工程项目中无法正常显示

    提前说明:此文仅记录个人项目问题,不具有众参考意义. 原因: 工程中对引用的资源进行解析设置,即resource设置. 解决方法: 找到静态资源加载路径,添加 if(urlpostfix.equals ...

  5. echarts 支持svg格式

    今天研究了下echarts的svg格式.发现用ai生成svg格式的图片,echarts上面显示不了. 经过了多次的百度和谷歌终于找到了用Method Draw画出来的svg格式,echarts就能加载 ...

  6. BitmapUtil【缩放bitmap以及将bitmap保存成图片到SD卡中】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 用于缩放bitmap以及将bitmap保存成图片到SD卡中 效果图 代码分析 bitmapZoomByHeight(Bitmap s ...

  7. QT_SVG格式图片浏览器_源代码下载_详细注释

    源代码链接: http://pan.baidu.com/s/1pKA5Vcv 密码: ib2x 注:SVG格式图片特点: 1. 文件小 2. 图像中文字独立于图像, 可以编辑,可搜索. 3.没有字体限 ...

  8. Java中将JSON格式的数据转换成对应的Bean、Map、List数据

    简单说明: 为了方便数据在客户端及服务器端的传输,有时候我们会用一些比较方便组织的数据类型,比如json.xml等传给客户端,客户端也可以重新组织数据传回服务器端.JSON和XML提供了一套比较方便的 ...

  9. Python之os.path路径模块中的操作方法总结

    #os.path模块主要集成了针对路径文件夹的操作功能,这里我们就来看一下Python中的os.path路径模块中的操作方法总结,需要的朋友可以参考下 解析路径路径解析依赖与os中定义的一些变量: o ...

随机推荐

  1. Hadoop之父Doug Cutting：Lucene到Hadoop的开源之路

    Hadoop之父Doug Cutting:Lucene到Hadoop的开源之路 Doug Cutting,凭借自己对工作的热情和脚踏实地的态度,开创了Lucene和Nutch两个成功的开源搜索引擎项目 ...

  2. 0619-dedeCMS的安装、重装、目录说明、基本操作及注意事项

    一.安装步骤: 1.解压文件,将我们需要的uploads文件夹更名为dedeCMS 2.从站点下打开dedeCMS-install-index.php开始安装 3.安装完成后到php.ini中设置re ...

  3. [Swift通天遁地]二、表格表单-(9)快速创建一个美观强大的表单

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. 牛客小白月赛15 C 表单 ( map 使用）

    链接:https://ac.nowcoder.com/acm/contest/917/C来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言52428 ...

  5. 这里有最全的C/C++入门到进阶书籍推荐，你需要嘛？

    编程是操作性很强的一门知识,看书少不了,但只有学习和实践相结合才能起到很好的效果,一种学习方法是看视频->看书->研究书中例子->自己做些东西->交流->看书. 研究经典 ...

  6. easyui datagrid 页面详细使用

    //加载数据workflowName    onloadmyCgxList: function (id) { if (id != null && id != "" ...

  7. python--修改默认递归层级

    import sys sys.setrecursionlimit(最大递归次数)

  8. EF--ModelFirst

    EF框架有三种基本的方式:DB First,Model First,Code First.这里简单的说一下Model First,适合没有基础的同学照着做,学习基础的东西. 1.建立一个类库项目,这个 ...

  9. fcc jQuery 练习

    在页面顶端增加一行script元素,然后写上结束符, 浏览器会运行script 里所有的Javascript,包括jQuery <script>$(document).ready(func ...

  10. activity间传递参数

    传递值对象 值对象可以理解为自定义的数据类型对象. 为了完成这个知识点的讲解,先来创建一个User类型的类,它有name和age两个属性,然后请添加getter/setter方法,构造方法等基本方法. ...