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. canvas上的像素操作(图像复制，细调)

    canvas上的像素操作(图像复制,细调) 总结 1.操作对象:ImageData 对象,其实是canvas的像素点集合 2.主要操作: var obj=ctx.getImageData(0,0,10 ...

  2. ubuntu/linuxmint下java环境变量设置

    1.root权限下使用vi或gedit打开/etc目录下的profile文件,末尾加入环境变量. 1)命令: sudo gedit /etc/profile 2)环境变量个人案例: export JA ...

  3. El Dorado(dp)

    http://acm.hdu.edu.cn/showproblem.php?pid=2372 题意:给出n个数,求长度为m的递增子序列的数目. 思路:状态转移方程 dp[i][j] = sum(dp[ ...

  4. jquery得到焦点和失去焦点

    鼠标在搜索框中点击的时候里面的文字就消失了,经常会用到搜索框的获得焦点和失去焦点的事件,接下来介绍一下具体代码,感兴趣的朋友额可以参考下   input失去焦点和获得焦点 鼠标在搜索框中点击的时候里面 ...

  5. Akka源码分析-Persistence-AtLeastOnceDelivery

    使用过akka的应该都知道,默认情况下,消息是按照最多一次发送的,也就是tell函数会尽量把消息发送出去,如果发送失败,不会重发.但有些业务场景,消息的发送需要满足最少一次,也就是至少要成功发送一次. ...

  6. 【BZOJ4025】二分图（可撤销并查集+线段树分治）

    题目: BZOJ4025 分析: 定理:一个图是二分图的充要条件是不存在奇环. 先考虑一个弱化的问题:保证所有边出现的时间段不会交叉,只会包含或相离. 还是不会?再考虑一个更弱化的问题:边只会出现不会 ...

  7. ACM_水题你要信了（修改版）

    水题你要信了 Time Limit: 2000/1000ms (Java/Others) Problem Description: 某发最近又认识了很多妹(han)子,可是妹(han)子一多不免有时会 ...

  8. Linq学习(五)-多表连接

    本将主要介绍 内连接与 外连接 1.join Linq to sql from a in Blog_Users join b in Blog_UserInfo on a.UserId equals b ...

  9. 【Java设计模式】工厂模式

    简单工厂模式 简单工厂模式不是23种里的一种,简而言之,就是有一个专门生产某个产品的类.比如下图中的鼠标工厂,专业生产鼠标,给参数0,生产戴尔鼠标,给参数1,生产惠普鼠标. 示例代码: //一个产品接 ...

  10. 【转】Centos7 ftp 配置及报错处理

    原文链接: https://www.cnblogs.com/GaZeon/p/5393853.html Centos7网络配置,vsftpd安装及530报错解决 今天在虚拟机安装CentOS7,准备全 ...