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
  • 20760

SVG文档语法结构

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

字体图标的svg导入及寻找

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

详解使用icomoon生成字体图标的方法并应用

最近项目大量用到字体图标,大家也知道,字体图标任意缩放不会失真,也大大减少请求数量,非常好用。以下将讲解本人如何根据美工提供的.svg文件生成字体图标并应用。 借助一个在线生成工具:https://...

svg图标转Iconfont字体图标

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

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

svg中的path指令分析

使用path标签时,就像用指令的方式来控制一只画笔,比如:移动画笔到某一坐标位置,画一条线,画一条曲线,完事了抬起画笔,OVER!   path支持的指令有:   M = mo...

贝塞尔曲线 总结

基础Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线。 曲线定义:起始点、终止点(也称锚点)、控制点。通过调整控制点,贝塞尔曲线的形状会发生变化。 1962年,法国数学家Pie...

Android工具类---格式化文件

简述: 该工具类用于格式化文件大小,将文件大小格式化为用户熟悉的样式。 上代码: /** * 格式化为常见文件大小形式(保留两位小数) 如4.32G,2.15M等 * * @...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:SVG字体图标格式解析
举报原因:
原因补充:

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