投稿者: h.sato

論文や報告書では、フローチャートなどのように、矩形や円などの線画と文字列で構成された画像がしばしば使われます。これらの画像はビットマップではなくベクター画像として記述することで、拡大しても、縮小してもきれいに表示できるとともに、画像サイズを小さくすることができます。

Sol4ではWindows メタファイルというマイクロソフト社固有のベクター画像形式を利用することで、この目的を達成し、多くの利用者の支持を得ることができました。

Sol5では、2001年にW3Cによって標準化されたベクター画像形式であるSVG（Scalable Vector Graphics）に対応することで、同じ目的の実現を試みています。

本稿では、Sol5でのSVGの使い方と問題点、および、問題点の回避策をお話しします。なお、本稿はSol5-0.13.0以降のSol5を対象としています。

SVG対応の描画ツール

Adobe Illustrator がSVG対応の描画ツールの代表格ですが、最近では、Inkscapeなどフリーの高機能描画アプリも登場してきています。また、VISIOやastahなどの構造化ダイアグラム描画アプリもSVGに対応してきています。

マイクロソフト社のPowerPointなどのOffice画像も、近年SVGへの対応を考慮してきていますが、まだ一部の対応に止まっています。これについては後述します。

InkscapeのSVG画像の貼り付け

図1は、SVG描画ツールであるInkscapeで作成したフローチャートをコピーし、Sol5に貼り付けたものです。図2は図1の画像をSol5上で「Width=100%」にして拡大した画像です。ベクター画像ですので、どちらもきれいに表示されています。同じことですが、高解像度で印刷しても、これならきれいに印刷されます。

PowerPoint画像の貼り付け

図3はPowerPointで作成したフローチャートを普通にコピーしてSol5に貼り付けたものです。PowerPoint画像は普通に貼り付けますとPNGという形式のペイント画像になります。PowerPointの場合は、元のベクトル画像の約3倍のサイズのペイント画像になるようです。このオリジナルのペイント画像を約1/3に縮小したものが図3です。このように縮小すると一部の線は見えなくなり、やや読みにくい画像になります。

図4は図3のフローチャート画像を図2と同じサイズに拡大したものです。上で述べましたように元の画像がやや拡大されていましたので、比較的きれいな文字になっていますが、それでもややぼやけた画像になります。このことは300dpi程度で印刷するときれいですが、600dpiではやや粗さが見えるということになります。

PowerPoint画像のSVGファイル出力をインポート

今日のPowerPointは画像データをSVGファイルに保存することができます。PowerPoint上で画像を選択し、右ボタンクリックで表示されるコンテキストメニューで「図として保存…」を選び、表示されたファイル選択ダイアログの「ファイルの種類」で「SVG (*.svg)」を選ぶことで、SVGファイルとして画像データを保存することができます。

他方、Sol5 (5-0.13.0以降）は、メニュー「編集/画像データのインポート」を用いて画像データファイルを読み込み、選択中のトピックにその画像を表示することができます。

図5はPowerPointから出力された画像データのSVGファイルをSol5にインポートしたものです。図6はその画像をSol5上で拡大したものです。Inkscapeで作成したSVG画像と同じく、縮小しても、拡大しても画像の劣化はほとんど見られません。

PowerPoint画像をSVG形式で直接貼り付けられないのか？

実は今日のPowerPoint (Office 2016以降）で画像をコピーすると、SVG形式の画像データもクリップボードに保存されます。このことは InsideClipboard などのクリップボード内データ表示ツールを使うことで確認できます。

しかし、Sol5が開発に使用しているJava及びJavaFXがもつClipboardクラスでは、PowerPointのSVG画像データなどいくつかのタイプのデータを捕捉することができません。このことは海外でも話題になっており、Javaのバグではないかと言われています（How do I correctly get an Image from the Clipboard in JavaFX　https://stackoverflow.com/questions/54995198/how-do-i-correctly-get-an-image-from-the-clipboard-in-javafx-what-is-the-differ 2020）。

ただし、JavaのClipboardクラスはInkscapeのSVG画像コピーデータを正しく捕捉できています。これを見るとPowerPointの送出データに何か問題があるのかもしれません。どちらに原因があるのか分かりませんが、早急に改善してもらいたいところです。

PowerPoint画像をInkscape経由で貼り付ける

Inkscapeを間に挟んでPPT画像コピーをSol5貼り付けることで、SVG画像を貼り付けることができます。具体的には以下のようにします。

(1) PowerPoint上で画像をコピーする。
(2) Inkscape上に貼り付ける。
(3) Inkscape上で画像を選びコピーする。
(4) Sol5上に貼り付ける。

複数アプリを立ち上げて利用することに慣れている人であれば、ファイル渡しよりもこの方が簡単でしょう。

おわりに

Sol5はSVG画像に対応していますので、線画と文字列で構成されるベクター画像をきれいに表示・印刷することができます。

SVG画像を作成するにはInkscapeのようなSVG専用ツールを使うのが確実です。PowerPointに慣れている人の場合は、ファイル渡しなど少し手間をかける必要がありますが、PowerPoint画像をSVG画像として、Sol5に取り込むことができます。