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. Tool：安全狗

    ylbtech-Tool:安全狗 安全狗,互联网安全品牌,云安全服务与解决方案提供商 .企业用户遍布互联网金融.电商.游戏.移动互联网.政府单位等多个行业. 1.返回顶部 1.   2. 2.返回顶部 ...

  2. 02_jni_hello_c函数介绍

    介绍NDK平台都有哪些工具.通过NDK这套工具做安卓下的JNI开发. 可能有一些需求更适合通过C去做,有一些功能要通过C去实现.一个安卓程序,它本身还是一个Java应用.有一些功能/方法不通过Java ...

  3. oracle查询时间段

    select count(*) tt from crm_cisco_call_detailwhere DateTime between to_date('2016-4-5 00:00:00','yyy ...

  4. THE DRUNK JAILER

    http://poj.org/problem?id=1218 题意:门的状态有两种开或关,初始化为开,每次进行状态转换,第一次把门号是1的倍数的门状态转换,第二次把门号是2的倍数的门状态转换,.... ...

  5. mysql大数据的分表

    在实际业务运作中,我们经常遇到一个表中数据量过大的问题,这样的话,问题就来了.如何将一个表中的数据均衡的放到多个表中? 我的建议是,新建一个表,但是只有一个自增的id字段,将其作为分表的依据.有大数据 ...

  6. OpenResty / Nginx模块，Lua库和相关资源的列表

    OpenResty / Nginx模块,Lua库和相关资源的列表 什么是OpenResty OpenResty是一个成熟的网络平台,它集成了标准的Nginx核心,LuaJIT,许多精心编写的Lua库, ...

  7. JavaScript--Array 数组对象

    Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的 数组定义的方法: 1. 定义了一个空数组: v ...

  8. Android Unable to add window -- token android.os.BinderProxy@3a067204 is not valid错误分析记录

    打开APP时,出现闪退的情况,查看android studio报错信息,主要为: Unable to add window -- token android.os.BinderProxy@3a0672 ...

  9. C#入门经典 Chapter5 变量的更多内容

    5.1类型转换 1.类型转换 1.1隐式转换:所有情况下可进行,编译器执行转换. 1.2显示转换 强制转换:强迫数据从一种类型转换为另一种类型. (<destinationType>)&l ...

  10. JS——sort

    1.a-b升序 <script> var arr = [2, 3, 1, 5, 0]; function compare(a, b) { return a - b; } console.l ...