Web上で使えるSVGエディタまとめ

SVGはHTML5になって標準化された画像フォーマットです。バイナリではなくベクターなので、拡大縮小に強いのが特徴です。しかしXMLベースなので手書きで作るのは難しく、専用のソフトウェアを使ってSVG出力するのが一般的です。

今回はそうした専用ソフトウェアを用意することなくSVGを作成できる、WebブラウザベースのSVGエディタを紹介します。

簡単なドロー機能を備えています。出力はPNGまたはSVGで可能です。レイヤー機能はありませんが、色や線の太さを変えるといった操作は可能です。テキストも利用できます。生成したコンテンツをWebサイトに埋め込むためのコードを出力させる機能もあります。

Webベースではありませんが、Electron向けなのでHTML5/JavaScript/CSSで作られています。円や多角形、ベジュ曲線を使ったドローにも対応しています。テキストは用意されていませんが、ごく簡単なドローであれば十分でしょう。

HTML5製のフロアマップエディタです。ドアを追加したり、壁を描けるようになっています。フロアマップに特化しているので会社の図面を作ったりするのが簡単です。

本格的に使えるSVGエディタです。直線、四角、円、曲線、文字、画像、連続線、テキストなどが用意されています。もちろん配置したオブジェクトの移動や回転もできます。保存機能はなく、XML（SVG）が表示されます。これをコピーしておけばまた再現も可能です。

ツールバーの並びなどがローカルアプリケーション風になっており、使い勝手の良いSVGエディタです。文字や円、四角、直線、ベジュ曲線、自由線が描けます。描画後、オブジェクトの移動や色の変更などもサポートされています。レイヤーにも対応しています。

Webブラウザベースなので、作成したSVGがそのまま表示できると考えて良いでしょう。機能はエディタによって異なるので、目的にあったものを選ぶ必要があります。

画面の高画質化が進むのに合わせて、画像などのバイナリではサイズの肥大化が大きな問題になっています。SVGは拡大表示しても綺麗なまま、ファイルも1ファイルで済みますので今後SVGがメインフォーマットとして活用されていくのではないでしょうか。