ImageMagickの使い方を調べていたら、文字列を記述したSVGをImageMagickの機能で画像にすることができるようだ。
まず、ImageMagickで使えるフォントを確認する。
$ magick -list font
＜略＞
Font: VL-Gothic-Regular
family: VL Gothic
style: Normal
stretch: Normal
weight: 400
glyphs: /usr/share/fonts/vlgothic/VL-Gothic-Regular.ttf
$
「Font: VL-Gothic-Regular」が日本語フォントを含むものであるため、これを使う形でSVGを記述する。
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 200 100"
>
<g font-size="16" font-family="VL Gothic">
<text x="0" y="16" style="width:200px;height:100px;font-size:16pt" >文字列78901234567890123456789012345678901234567890</text>
</g>
</svg>
これで「magick test.svg test.png」とかやると生成される。上記の様にfont-familyをSVG内で指定していない場合は「magick -font VL-Gothic-Regular test.svg test.png 」という形で使用するフォントを指定する。
ただ、コレは自動改行されない。
調べたがSVGで簡単に文字列を自動改行させる方法は無い模様。
「foreignObject」というのを使うとできる、という記述もあったのだが、ImageMagickでは使えないようで、下記のSVGを作ってみたが、真っ白な画像ができあがった。
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="210" height="110" >
<foreignObject x="0" y="16" width="200" height="100">
<html xmlns="http://www.w3.org/xhtml/1999">
<div style="width:200px;height:100px;font-size:16pt" >文字列78901234567890123456789012345678901234567890</div>
</html>
</foreignObject>
</svg>
snibgo’s ImageMagick pages の「SVG text」にInkscape を使ってテキストを配置するアウトラインを作って、その範囲内に文字列を流し込む、ということができるらしい。
調べていくと「TextPath」を使うとPathで指定した線に沿ってテキストを配置できるので、その線を罫線みたいに引くことで対処できるようだ。
が・・・うちの環境のImageMagick v7では、テキスト文字列が出力されなかったので、調べたところ「RSVGが有効であること」が必要らしい。(参考:「convert SVG to PNG (textPath)」)
このため「yum install librsvg2-devel」でパッケージ追加した後に、「./configure」を実行したが「RSVG –with-rsvg=no no」のまま。「./configure –with-rsvg=yes」にしたところ「RSVG –with-rsvg=yes yes」となった。
しかし、それでもうまく描画はしてくれなかった・・・とりあえず現状はお手上げ状態。今後の記録のために実験したSVGの内容を下記に挙げておく。
その１：ぐるぐる巻きに文字列
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- to hide the path, it is usually wrap into a <defs> element -->
<!-- <defs -->
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<!-- </defs> -->
<text>
<textPath href="#MyPath" style="font-size:16pt;color:black">
The quick brown fox jumps over the lazy dog.
</textPath>
</text>
</svg>
その２：ノートみたいな罫線に文字
<svg width="200" height="200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<!-- define lines for text lies on -->
<path id="path1" d="M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"></path>
</defs>
<use xlink:href="#path1" x="0" y="35" stroke="blue" stroke-width="1" />
<text transform="translate(0,35)" fill="red" font-size="20">
<textPath xlink:href="#path1" fill="red">This is a long long long text ......</textPath>
</text>
</svg>
その３：1/4円上に文字
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1000px" height="707px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="MyPath" d="M 599,455 A 244,244 0 0,1 723,578" />
</defs>
<use xlink:href="#MyPath" fill="none" stroke="red" />
<text font-family="VL Gothic" font-size="16" fill="black" >
<textPath xlink:href="#MyPath">
We go up, then we go down, then up again
</textPath>
</text>
</svg>
librsvg2-toolsを入れると「rsvg-convert」コマンドによってsvgからpngを生成できるというので試してみたが、結果は同じだった。フォントが足らないのかな？と「yum install ipa-gothic-fonts.noarch ipa-mincho-fonts.noarch ipa-pgothic-fonts.noarch ipa-pmincho-fonts.noarch」を実行してみて、IPAフォントを追加し「IPAGothic」などを指定してみても結果は変わらず。
ImageMagickのgithub ISSUEに「Text by path not working #642」というのがあった。これは、librsvgのISSUE「[BZ#644624] no support for textPath element」ということで、librsvgがtextPathに対応していない、ということになる。
「Partial textPath support」という形でサポートするためのコードも送られているものの、現時点ではまだ取り込まれていないようだ。
現時点でとれる対処方法はInkspaceを使ってSVG to PNGをやらせることぐらいらしい。
