svg画像にはtextタグで文字列を書く事ができます。 でもこれって環境によって意外と見え方が違うんですよね。 吹き出しに収まるようにセリフを入れたつもりでも、別の環境で見たらはみ出したり、変な余白が空いてたり...
この問題は、文字をパスに変換すればある程度解決できます。 例えば、inkscapeならtextを選んでメインメニューから「パス/オブジェクトをパスへ」を選択すればok。 これで環境で見え方が変わる問題は軽減されます。 (svgのどの要素でも、レンダリングエンジンによって多少は描画が変わるので完璧ではないです。 見え方の差は誤差の範囲ですが。)
ただ、このやり方は万能薬ではありません。 次のような欠点があります。
- データサイズの肥大。
- フォントの著作権について注意が必要。
- フォントサイズが小さいときのフォントを見やすくするための仕組みが働かない。
- ネタのテンプレートとして「テキストはご自由に書き換えてください」みたいなのができない。
データサイズの肥大についてはそのまんまですね。 1文字1文字がノードをたくさん抱えたパスに変わるんだから仕方がありません。
フォントの著作権について、svg画像は基本的にフォント情報を持たず、レンダリングエンジンがフォントを用意します。 なのでtextで書いている限りはフォントの著作権について考える必要がありませんでした。 しかし、フォント情報をパスに変えて、svgファイルに持たせて配布すると著作権を侵害してしまう可能性が出てきます。 趣味で適当に描く分には気にしなくてもいいのかも知れませんが、商業的な絵や公共で使われる絵などの場合は注意しなければなりません。 趣味で個人的に描く絵だとしても、その辺をキッチリしたいのならライセンスの内容が明確に分かっているフォントやフリーフォントを使うようにしましょう。
フォントサイズが小さいときについて、多くのフォントには潰れて読めなくなるのを防ぐような仕組みがあります。 ビットマップフォントやヒント情報、ClearTypeなどがそれに当たります。
- ビットマップフォント ... フォントが小さいときはアウトライン情報を元にレンダリングするのではなくビットマップ画像を使う。
- ヒント情報 ... フォントが小さいときに使用される、文字が潰れたりバランスが崩れたりしないようにするための補足情報。
- ClearType ... サブピクセルの光の三原色単位まで考慮したアンチエイリアス。Windowsで採用されている。
svgファイルにMS PGothicのテキストを書いたときの比較を見てみましょう。 「ネット」という文字をキャプチャーしました。 左がtextタグ、右がパスに変換した文字です。
4倍に拡大すると、(注 : 画像をクリックしてリンク先で見てください)
多少違いますが、それほど違和感はないですね。 MS PGothicは、フォントサイズを小さくするとビットマップフォントが使用されます。 このサイズだとどっちなんだろ?
フォントサイズを小さくすると様子がぜんぜん変わります。
4倍に拡大すると、(注 : 画像をクリックしてリンク先で見てください)
textタグの方は完全にビットマップフォントですね。 パスの方は滑らかですがぼやけています。
さらに小さな文字にした場合、視認性に影響が出ます。
4倍に拡大すると、(注 : 画像をクリックしてリンク先で見てください)
視認性に影響が出るとはいえ、「表示が崩れては困る資料」とかでここまで文字を小さくするってことは無さそうですよね。 アート作品なら視認性とかそんなに問題にならないでしょうし、視認性だけが問題ならパスにした方がいいのかな?
これらの欠点をふまえて、svg画像で文字列を使うときの方針を考えてみました。
- svg画像のファイルサイズに制限が無いならパスへの変更が望ましい。 修正があったときや検索キーワード(ネットに載せる作品の場合)のため透明のtextで元の文字列を残しておく。 文字列のコピー&ペーストをしやすいようにスクリプトなどでパスとtextタグの切り替えができるようになっていたらよりユーザーフレンドリー。 ただしこの場合は文字列の修正でパスとtextタグの食い違いが発生しないように注意する必要がある。 リリースした後変更されない画像向け。
- 「svg画像のファイルサイズに制限がある場合」や「文字列の中身が頻繁に修正される可能性がある場合」、「パスとtextタグの切り替えスクリプトなんて用意する気が無い場合」など、textタグを使ったほうがよい場合は表示確認をしたときの環境を明記する。
う～ん。 しょっぱい。
でお買い物
