文字列画像をSVGで作る


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の内容を下記に挙げておく。

その1:ぐるぐる巻きに文字列

<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>

その2:ノートみたいな罫線に文字

<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>

その3: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をやらせることぐらいらしい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください