2013年4月10日

アイコンを動的に生成する

XUL ではいろんな場所に画像が表示できるようになっています。例えばリストボックスのセルであったり、メニューの項目の隣であったり。そういうアイコンが固定のものであれば画像を用意しておいてその URL を書くだけで良いのですが、画像を動的に変化させたい場合どういう手段があるでしょうか。

画像は開発中の字幕表示ソフトの設定画面です。字幕の色や種類に応じたアイコンを表示しています。テキストなら T、HTML で書くなら H、画像なら I、また文字色と枠の色と背景色も反映させます。

で、この画像、data URI で表現された SVG なのです。

SVG が登場した頃は色々触って遊んでいたのですが、個人がウェブ上に置くという点から言えば特に大きなメリットもなくそのまま忘れておりました。(Inkscapeのファイルフォーマットとしては多用していましたが……)

しかしこういう場合、SVG には大きなメリットがあります。画像の属性を直接記述できるし、一旦 canvas を通して色々するなんて面倒な事も必要ありません。今回はほぼ文字ですが、ちゃんとデータを用意すれば細かい画像にも使えそうです。
 

0 件のコメント:

コメントを投稿