フルブラウザ対応SVGアプリケーション『SVG-edit』の使い方

SVGに普及のきざし

A complete vector graphics editor in the browser

ブラウザにおける2Dベクターグラフィックの利用にSVGが普及する気配を見せている。SVGは登場してからだいぶ経つが、Webコンテンツにおける主要なデータフォーマットのひとつとはいえない状況にある。

しかしHTML5でHTMLページに組み込むことが可能になること、IE9でサポートされる可能性が出ていること、IE以外の主要ブラウザですでに利用できること、グラフィックアプリケーションでの対応が進んでいること、といった状況があり、今後普及を見せる可能性がある。

SVGを扱うことができるグラフィックアプリケーションは多い。中でも最近注目されはじめているアプリケーションにSVG-editがある。Webアプリケーションとして開発されており、ブラウザからアクセスするだけで利用できる。

SVG-edit 2.4 Arbelos登場

SVG-editはJavaScriptで開発されたSVGエディタ。ブラウザからアクセスするだけで利用できる。サポートされているブラウザは次のとおり。

SVG-editサポートブラウザ

Firefox 1.5およびそれ以降のバージョン
Opera 9.50およびそれ以降のバージョン
Safari4およびそれ以降のバージョン
Chrome1およびそれ以降のバージョン
Google Chrome FrameをインストールしたIE


SVG-edit 2.4 on Firefox 3.6 / FreeBSD 9-CURRENT	SVG-edit 2.4 on Opera 10.50 / FreeBSD 9-CURRENT


SVG-edit 2.4 on Chrome5 / Windows XP	SVG-edit 2.4 on Safari4 / Mac OS X Snow Leopard

加えて、Operaにはウィジェットが提供され、Firefoxにはアドオンが提供されている。Operaウィジェット版のSVG-editはネイティブアプリケーションと同じように利用できるほか、ローカルファイルの読み込み機能も追加されている。Opera 10.50以降ならOperaを起動する必要がなく、SVG-editのみで実行可能。


SVG-edit 2.4 Opera Widgets / Windows XP	SVG-edit 2.4 Firefox extension / FreeBSD 9-CURRENT

SVG-edit 2.4で提供されている主な機能は次のとおり。2.3と比較して大幅な機能強化が実施されている。現在開発が進められているSVG-edit 2.5で追加が予定されている機能もすでに公開されている。

SVG-edit 2.4機能

フリーハンド描画
線描画
多角形描画
UIリサイズ
長方形描画
楕円描画
テキスト描画
ラスターイメージ取り込み
選択機能
移動機能
リサイズ機能
回転機能
アンドゥ
リドゥ
カラー選択
グラデーション
グルーピング
角度機能
ズーム機能
レイヤ機能
ワイヤフレームモード
SVG対応
UIローカライズ
キャンバスリサイズ
背景の変更
ダイアログドラッグ

SVG-edit 2.5で追加される機能

メインメニュー
ローカルファイル対応(Firefox 3.6のみ)
アロー
SVGサポートの拡大
プラグインアーキテクチャ
スムーズフリーハンドパス機能

SVGに対応したデスクトップグラフィックアプリケーションと比較するとサポートしている機能は少ないが、すでに基本的な機能をサポートし、開発も活発に継続されている。しかもインストールする必要がなく、アクセスするだけで利用できるエディタという点で興味深い。簡単なSVG画像を作成する程度であればSVG-editで事足りる。

SVG-editの操作方法はほかのグラフィックアプリケーションと同じ。特に癖のある操作はなく、提供されているボタンをクリックしていくだけだ。作成した画像はSVGボタンをクリックすることでソースコードを表示させることができる。Opera Widgetsを使っている場合にはそのままローカルファイルとして保存できる。