78
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ブラウザベースSVGエディタまとめ

Last updated at Posted at 2019-08-25

いま個人的にSVGエディタを作っているので、ブラウザで使えるベクターグラフィックスツール(でSVGをエクスポートしたりできるもの)を調べたメモです。また、汎用なものを主に扱っていて、フォントエディタだとかフローチャートツールなどは載せていません。私にはBOXY SVGが一番参考になるかもと思いました。星は機能の数とか開発の活発さの目安です。

★★★★★Gravit Designer

有料版あり(100USD/YEARが今なら55USDくらい?)。活発に開発が続いており、多機能です。複数ページの編集もできたり、多角形の頂点ごとに丸みを設定できたりとSVGにもない機能も。PDFやIllustrator形式もインポートできるらしいです。UIも多言語化されています。つよい。レンダリングはWebGLでCanvasに描いているっぽいです。jQuery。でもSVGをインポートすると結構崩れます。

★★★★☆BOXY SVG

有料版あり(9USD/MONTH)。レンダリングは名前の通りSVGで内部のデータ構造もSVGらしく、SVGは崩れずにインポートできますし、Elements Panelで生SVG DOMツリーを見ることができるのがSVG手書き勢は喜びそうです。有料版のみですが、これもPDFやIllustrator形式もインポートできるらしいです。バックエンドにFirebaseを使っている気配があります。pakoPaper.jsDexie.jsgif.jsimagetracer.jsopentype.jsあたりを使っているのが参考になりそうです。

★★★☆☆Janvas 

36ユーロ/年。これも複数のページを持つことができます。機能は BOXY SVGと同程度か少し少ないくらい?デモがなくて、あまりどんな機能があるのか確認できていません。

★★★☆☆vectr

広告付き。有料版は将来用意するかも、とのこと。機能はシンプルですが、複数ページを持てます。描いたドキュメントにURLが割り当てられて、それをそのまま公開することができるみたいです。

★★★☆☆Vecteezy Editor

まだベータ版だそう。機能はかなりシンプルですが、ひと通りのことはできそうです。

★★☆☆☆henoc/svgeditor

ブラウザベースではなくてvscodeプラグインですが、参考になるかも知れないので載せておきます。複雑なドキュメントでは重かったり、読み込めないSVGドキュメントも。まだ開発は続いているんでしょうか。

★★☆☆☆SVG-edit

オープンソース(MITライセンス)。現在も開発は続いているようですが、開発者が減り滞っているようです。UIのデザインにちょっと古さを感じます。

★☆☆☆☆mrdoob/svg-editor 

Mr.doob(three.jsの人)もこういうの作ってたのか! 実用的なものではなくてデモみたいな感じ。

★☆☆☆☆Method Draw 

SVG Editのフォーク。すでに開発が終わっているようです。

まだよく調べていないもの

Figma

最近時々聞くUIデザインツール。ベクターグラフィックスツールとしても使えるとか。

78
75
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
78
75

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?