SVG字体图标格式解析

最新推荐文章于 2024-06-23 09:36:47 发布

平平定

最新推荐文章于 2024-06-23 09:36:47 发布

阅读量1w

点赞数

分类专栏： Android 文章标签： SVG ICON FONT APP ICON

本文链接：https://blog.csdn.net/do168/article/details/51545937

版权

Android 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

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

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

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

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

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

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

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

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

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

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

数据获取：

在font标签内获取默认字符宽度horiz-adv-x，例：<font id="fontawesomeregular" horiz-adv-x="1536" >
在font-face标签内获取默认高度units-per-em 和下移量 ascent，例：<font-face units-per-em="1792" ascent="1536" descent="-256" />
在每个符号中查询是否存在特别的宽度horiz-adv-x，有则替换默认字符宽度。例：<glyph unicode="" horiz-adv-x="1792"
在每个符号中获取绘制数据 d 。例：<glyph glyph-name="emo-wink2" unicode="" 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 下载