SVG字体图标格式解析
来源:互联网 发布:文章网站源码 编辑:程序博客网 时间:2024/04/29 23:32
最近在写一个安卓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 下载
0 0
- SVG字体图标格式解析
- SVG转为字体图标
- svg字体图标
- svg图标转Iconfont字体图标
- vue引用svg字体字体图标
- 在stylus格式的图标字体里url无法解析
- 字体图标的svg导入及寻找
- 制作自定义图标字体,html引用web svg矢量字体
- 在SVG中使用Bootstrap或FontAwesome图标字体
- ttf、eot、otf、woff、svg字体格式介绍
- SVG格式
- 将图片( PNG, BMP, JPEG )转成 svg, 再转成字体图标
- DOCX4J 解析DOCX文档字体格式
- VUE-SVG图标
- SVG的字体操作
- svg转成字体
- 字体图标
- 字体图标
- 关于Asp.net中GridView控件不显示部分列数据的方法
- NSURLCache使用的坑
- 再谈终端设备
- Android代码中设置字体大小
- 勤劳的蜜蜂
- SVG字体图标格式解析
- 使用ftp4j类来实现FTP操作
- 突然想到的seo问题
- MYSQL查询表达方式
- 奇偶分割数组
- 不良贷款回收是印度银行的重中之重
- 如何自己开发一款js或者jquery插件
- HTML页面每次打开的时候都清除页面缓存
- mybatis报了一个java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符