SVG字体图标格式解析

原创 2016年05月31日 15:09:24

最近在写一个安卓APP,没有美工,UI也只能自己弄。

界面结构XML文件都搞定了,但部分图标总找不合适的,找到合适的,还要存成5种分辨率大小,好一个烦字了得!

做为程序员,我身上的黑客基因告诉我,绝对不能干这种重复的工作!我要自动化!解决这个问题!

于是花了一周时间写了个小工具AppIconTools,使用网阿里图标库和一个SVG字体图标来生成APP图标。

软件的核心就是解析生成SVG文件。经过研究发现阿里图标库内也使用的是SVG字体。下面将SVG字体几个要点解说一下:


首先推荐两款有名的SVG字体图标

  1. 系出名门来自Bootstrap的的Font Awesome:http://www.bootcss.com/p/font-awesome/
  2. Fontello:http://fontello.com/

下载时里面会有一个SVG格式的字体图标文件,其实就是个XML文件。下面介绍一下这个文件的结构


最重要的标签有三个font、font-face、glyph。

我们要从这三个标签里获取的数据主要有:宽、高、基线偏移量、绘制数据

数据获取:

  1. 在font标签内获取默认字符宽度horiz-adv-x,例:<font id="fontawesomeregular" horiz-adv-x="1536" >
  2. 在font-face标签内获取默认高度units-per-em 和下移量 ascent,例:<font-face units-per-em="1792" ascent="1536" descent="-256" />
  3. 在每个符号中查询是否存在特别的宽度horiz-adv-x,有则替换默认字符宽度。例:<glyph unicode="&#xf00b;" horiz-adv-x="1792"
  4. 在每个符号中获取绘制数据 d 。例:<glyph glyph-name="emo-wink2" unicode="&#xe802;" d="M664 800c-61 0-110-65-110-144 ........."

XML的解析获取应该不是难事,这里就不进行解说了。

获取出了数据之后,我用上面的数据生成了标准的SVG图元文件,再用

为了很好的将字体图标绘制出来,需要知道:宽、高、下移量
构造一个类来存这些数据用org.apache.batik绘制生成PNG图标

生成XML的代码:

    public static String makeSvgXml(DrawSize d) {
        StringBuilder sb = new StringBuilder();
        sb.append("<?xml version=\"1.0\" standalone=\"no\"?>\n");
        sb.append("<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"\n");
        sb.append("\"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n");
        sb.append("<svg width=\"").append(d.size).append("\" height=\"").append(d.size).append("\" viewBox=\"0 0 ").append(d.size).append(" ").append(d.size).append("\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n");
        sb.append("<g class=\"transform-group\">\n");
        sb.append("<g transform=\"translate(").append(d.x).append(", ").append(d.y).append(") scale(1, -1) scale(").append(d.scale).append(", ").append(d.scale).append(")\">");
        sb.append(d.oSize.svgPath.replace("#737383", d.color));
        sb.append("</g></g></svg>");
        return sb.toString();
    }

AppIconTools源码已开源,可从https://code.csdn.net/do168/appicontools/tree/master 下载


版权声明:本文为博主原创文章,未经博主允许不得转载。

SVG语法标签属性

1. SVG元素模块 Animation.Module animate animateColor animateTransform animateMotion set mpath ...
  • lujunql
  • lujunql
  • 2011年12月16日 22:26
  • 21243

解析svg格式并显示MFC视图

  • 2015年08月22日 10:30
  • 237KB
  • 下载

Text-svg元素详解

http://www.eramx.com/forum/printthread.php?p=2494Text-svg元素详解 本文为Scalable Vector Graphics (SVG) 1.1 ...
  • mydriverc
  • mydriverc
  • 2007年11月11日 02:01
  • 8363

SVG文档语法结构

SVG 语法结构说明文档说明版本日期作者说明1.02006.1.29很少想起你第 1 页 共 23 页SVG 语法结构说明SVG语法结构一、SVG文档结构格式(为了方便说明,在文中加入标号和冒号;为了...
  • calm_agan
  • calm_agan
  • 2011年04月25日 23:18
  • 11584

svg图标转Iconfont字体图标

最近在实际开发项目中用到了SVG格式的图片,在web中用着挺麻烦的,所以想到了把svg转换成字体图标。 找到一个比较好用的svg转iconfont的网站,而且免费 附图  选中图标然后点击G...
  • qq_28027903
  • qq_28027903
  • 2017年05月04日 11:44
  • 4023

关于SVG的中文显示问题

(1)首先要注意的是字体问题  要在svgviewer中显示中文字体,需要将中文字体名称进行“国际化”,即将汉字字体名称改为英文名称,  如将“宋体”改为“Simsun",“黑体”改为"Simhei"...
  • lne818
  • lne818
  • 2006年06月24日 10:14
  • 1098

web项目中添加图标(unicode引用方式)

在web前端开发时,我们可能会为了美观添加一些图标,类似下图这种: 先推荐一个很不错的图标素材库阿里巴巴矢量图标库 想到添加图标我们首先想到是用标签,但这种方式使用起来不是很灵活,大小调节起来很麻...
  • laptoper
  • laptoper
  • 2017年09月14日 17:05
  • 445

svg文本。填充和边框

字符 :unicode表示 字形 :字符的可视化表现形式  例如 abcd  啊哈 字体:字形的集合 ...
  • onepunchmen00
  • onepunchmen00
  • 2017年11月16日 21:06
  • 95

字体图标的svg导入及寻找

字体图标的使用方法 —— icon-fonts 第一步:选择所需的字体图标,权威字体图标网站链接:https://icomoon.io点击打开链接 第二步:点击网站右上角处...
  • yuwq123
  • yuwq123
  • 2016年04月15日 10:36
  • 3311

SVG字体图标格式解析

SVG字体图标格式解析,并生成APP图标
  • do168
  • do168
  • 2016年05月31日 15:09
  • 2860
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SVG字体图标格式解析
举报原因:
原因补充:

(最多只允许输入30个字)