关闭

SVG字体图标格式解析

标签: SVGICONFONTAPP ICON
1603人阅读 评论(0) 收藏 举报
分类:

最近在写一个安卓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 下载


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:79549次
    • 积分:1133
    • 等级:
    • 排名:千里之外
    • 原创:41篇
    • 转载:5篇
    • 译文:2篇
    • 评论:16条
    文章分类
    最新评论