ベクター画像作成ツール(1) ｢SvgPathEditor｣(1)

今回からは無料で使えるベクター画像(SVG、Scalable Vector Graphics)作成ツールを幾つか使ってみます。最終的には多機能で多くの用途に使える「Inkscape」に行きつきたいと思いますが、先ずベクター画像について理解できるベーシックな範囲のツールとし、続いて利用目的に沿って簡易な操作にしているツールと進めてからにしたいと思います。

ベクター画像(Vector graphics)は拡縮自在である点が最大の特徴です。BMPやpngなどのビットマップ画像(Raster graphics)とベクター画像の違いを示したこちらを参照。

最初はWebアプリ｢SvgPathEditor｣です。こちらからアクセスすると、こちらの様に表示します。

❶は描画の手順を示すコマンドのパス、❷は各コマンドの詳細指定がパスの順に並べられたものです。❸はプレビューとしてできた画像を示します(例えばこちら)。

❹で出力ができます(こちら)。

コマンドを選択すると、描画のどこに対応するかが分かります(こちら)。

｢SvgPathEditor｣ではベクター画像について知る事が目標なので｢×｣で描画をクリアし、改めて｢＋｣のメニューで描画をします(こちら)。

｢M Move to｣により開始点を選択します(こちら)。そこに表示する｢･･･｣のメニュー｢+ Insert After｣→｢L Line to｣により、開始点と選択した点で線が結ばれます(こちら)。

選択した点から更に線や曲線を結んでいくのですが、ここでは再び｢M Move to｣メニューを選んで、別の図形を描画します。実際｢V Vertical Line to｣→｢H Horizontal Line to｣→｢V Vertical Line to｣を使い、描画の最後は｢Z Close Path｣で長方形を閉じます(こちら)。

改めてコマンドの詳細欄(❷)を見ると、操作コマンドが反映できているのが分かりますし、コマンドの付属情報として位置情報も入っています。

次回は既に作った描画を変更してみます。