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. java的PrintStream(打印输出流)详解（java_io）

    java的PrintStream(打印输出流)详解(java_io) 本章介绍PrintStream以及 它与DataOutputStream的区别.我们先对PrintStream有个大致认识,然后再 ...

  2. QT Creater环境搭建

    需要的软件包: 1.qt-win-opensource-4.8.5-mingw.exe //Qt库 2.MinGW-gcc440_1.zip //QT编译器 3.qt-creator-opensour ...

  3. 面向对象软件工程与UML

    软件工程基本概念 软件危机 软件的功能.规模及复杂性与日俱增,软件的复杂性达到了它的开发者难以控制的程度 这种情况导致了严重的后果: 软件可靠性下降 开发效率低下 维护极为困难 这使软件开发者陷入困境 ...

  4. [Swift通天遁地]二、表格表单-(6)创建美观的表格弹性下拉刷新效果

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

  5. JavaSE 基础习题整理 - 面向对象篇

    大家好,今天空闲时间整理了一份JavaSE面向对象的常用习题,喜欢的朋友可以关注我.习题来自互联网,不喜勿喷 1.定义长方形类,含: 属性:宽.高(整型): 方法:求周长.面积: 构造方法3个:(1) ...

  6. IT架构师介绍-软件架构设计学习第一天（非原创）

    文章大纲 一.架构师定义二.架构师分类与具备能力三.研发人员发展的技术路线四.架构师知识体系五.参考文章   一.架构师定义   什么是架构师,这个聊架构话题时永恒的问题.每个公司对架构师的定位也有所 ...

  7. curl 采集的时候遇到301怎么办

    采集的时候遇到301,采集数据有错误 $ch = curl_init($url);curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);curl_setopt( ...

  8. An problem about date 根据年月日计算 星期几

    /W = (d+2*m+3*(m+1)/5+y+y/4-y/100+y/400) mod 7(1.2月需要看作上一年的13.14月) #include<stdio.h> #include& ...

  9. Eclipse 添加 YAML插件

    官网:https://github.com/oyse/yedit 离线版本:(链接: https://pan.baidu.com/s/1PJzkS1tI-VigZvfbYXUh9A 密码: gfep) ...

  10. C#内容格式刷html 转成txt

    /// <summary> /// 内容格式刷 /// </summary> /// <param name="strHtml">要格式的文本& ...