字型轉換為 SVG

想在網頁上放幾個中文字, 但並非固定的字, 就找找看有沒有字型轉換為 SVG 格式的工具。結果找到 Apache Batik SVG Toolkit, Java 寫的工具包, 這工具包大概有五、六年沒更新了, 試用了一下, 用 command line:

java -jar batik-ttf2svg.jar ./BHei01e.ttf -l 24503 -h 24503 -id mysvg -o mysvg.svg

再用 Inkscape 打開 svg 檔, 並沒有看到我要的結果; 接著用 sublime 查看, 原來是放在 defs 標籤裡。格式長這樣子:

<glyph unicode="!" glyph-name="null" d="M207 805L214 229H298L312 805H207ZM200 116V-7H323V116H200Z" />

於是異想天開地想用 PHP 的 shell_exec() 呼叫 Java 程式拿到某幾個字元的 SVG 格式。事與願違, 要 3 個字的資料 PHP 跑了 1 秒多, 要 6 個字的資料跑了近 3 秒, 這樣看起來是行不通的。原因應該是, 取得一個字的資料 Java 就開檔、關檔一次, 耗時間是難免的。


後來的解法是把耗費時間的事一次做完 (其實大概 10 幾秒), 用下式拿到一個約 10M 的 SVG 檔。

java -jar batik-ttf2svg.jar ./BHei01e.ttf -l 1 -h 65535 -id mysvg -o mysvg.svg

然後用 PHP 的 DOMDocument 物件拿到字碼和 d 屬性, 塞到 SQLite 資料庫 (大概也是 10 幾秒左右), 所有資料就算到手了。接著用 PHP 寫個服務, 讓 JS 告訴 PHP 文字的字碼, PHP 再以 JS/JSON 格式傳 d 屬性給 JS 就完成了。

做用 PHP 服務之後, 在慢機器上跑, 10 個中文字大概在 200 ms 以下, 跟之前的情況比快很多。

拿到的字型 SVG 資料其實也不是立即就可以使用, 必須縮放及鏡像, 不知道為什麼用 batik 拿到的資料是上下顛倒的。

利用之前聖誕電子卡改的新年電子卡。修改網址列的文字內容, 可以變更頁面裡的文字。