您的位置：首页 > 运维架构

[OpenType 1.70 笔记] SVG 表

2016-03-16 11:55 232 查看

现在 off 或 ttf 文件都可以包含可选的

'SVG '

表，这允许定义带有彩色、渐变、动画等效果的 glyphs。

使用 fontTools 工具包里

ttx

命令修改字体文件。以下都是字表的 XML 形式。

SVG Table 格式

导出命令：

ttx -t 'SVG ' -o svg.ttx fontfile

导入命令：

ttx -m fontfile svg.ttx

<?xml version="1.0" encoding="UTF-8"?>
<ttFont sfntVersion="\x00\x01\x00\x00" ttLibVersion="2.5">

<SVG>

<svgDoc endGlyphID="62" startGlyphID="62">
<![CDATA[
... (这里放 SVG 文档)
]]>
</svgDoc>
<colorPalettes></colorPalettes>

</SVG>

</ttFont>

注意

svgDoc

元素指定了 GlyphID 的范围，相应地要在 svg 文档中有这样的 id 号，譬如上面是 [62, 62] 的范围，svg 文档里要有 id=”glyph62” 的元素，这个元素下的内容就属于 glyph62。

这样说来，多个 glyph 可以复用一个 svg 文档（基于范围的复用）。

SVG 文档复用格式

<?xml version="1.0" encoding="UTF-8"?>
<ttFont ttLibVersion="3.0">

<SVG>

<svgDoc endGlyphID="8" startGlyphID="5">
<![CDATA[

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g id="glyph5">
<g id="glyph6">
<g id="glyph7">
<g transform="translate(0 -2048) scale(7)">

<g id="glyph8">
<line fill="none" stroke="#231815" stroke-miterlimit="10" x1="110.997" y1="168.78" x2="108.331" y2="172.05"/>
</g>
<path fill="#FFFFFF" stroke="#231815" stroke-miterlimit="10" d="M170.544,131.552c0,2.145,0.551,6.229-2.627,6.229
c-2.65,0-3.494-2.6-3.494-5.463C166.021,132.155,169.272,131.745,170.544,131.552z"/>

</g>
</g>
</g>
</g>
</svg>

]]>
</svgDoc>
<colorPalettes></colorPalettes>
</SVG>

</ttFont>

上面 glyph 5、6、7 共享了相同的 svg 绘图内容，而 glyph 8 使用了部分绘图内容。

Adobe 提供的 FDK 工具包有个

importSVGDocsToSVGTable.py

脚本可以将 SVG 文件导入字体，但是它要求 glyphID 号出现在 SVG 元素上，也就是限制成一个 SVG 对应一个 glyph。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 字体 OpenType SVG 彩色字

相关文章推荐

新的分享

章节导航