Hyvector – 高速でモダンなSVGエディタ
(hyvector.com)- ベクターグラフィック作業で重いデスクトップアプリを開く必要なく、Hyvectorはブラウザ上でSVGを数秒で編集・エクスポートできるワークフローを提供
- アイコン修正、ロゴの草案、SVGパスの整理といった素早い作業を、アカウント作成や大容量アプリのダウンロードなしですぐに処理可能
- すべての処理はローカルにとどまるプライバシー優先方式で、素早い起動と低メモリ使用量を目指す
- 双方向テキスト、複雑な文字体系、Arabicのような連結文字向けのクロスフォーマットシェーピングをサポート
- 1人の開発者が5年間かけて中核基盤を作り上げ、その安定化したコアエンジンの上にグローバルカラー、動的ストローク幅、可変フォントのような機能を追加中
インストール不要のSVG編集ワークフロー
- Hyvectorはブラウザ上でそのまま動作するSVGおよびベクターグラフィックエディタ
- すばやくファイルを開いて編集し、その後グラフィックをエクスポートするワークフローに焦点を当てる
- アカウント作成や大容量アプリのダウンロードなしで利用可能
- 素早く処理するのに向いている作業は次のとおり
- アイコン修正
- ロゴの草案作成
- SVGパスの整理
軽量な実行環境とプライバシー
- インストール不要でどこでも実行可能
- 素早い起動と低メモリ使用量を目指す
- すべての処理がローカルにとどまるプライバシー優先方式を採用
編集機能と開発状況
-
タイポグラフィ対応
- 完全な双方向テキストをサポート
- 複雑な文字体系を扱える
- Arabicのような連結文字に対してクロスフォーマットシェーピングをサポート
-
ベクター編集ツール
- ドラッグ＆ドロップ方式の要素ツリー表示を提供
- 傾斜、回転、サイズ変更を含む完全な変換ベースでパスを精密に制御可能
- 強力な消しゴムモードを含むペイントブラシを提供
-
1人開発プロジェクト
- 当初は手早いサイドプロジェクトとして始まったが、ベクターグラフィックの複雑さにより5年間続くことになった
- 中核基盤は完成しており、コアエンジンは安定化した状態
- 次の機能としてグローバルカラー(global colors)、動的ストローク幅(dynamic stroke widths)、可変フォント(variable fonts)などを準備中
1件のコメント
Hacker News のコメント
すばらしい。自分のサイドプロジェクトは C++ SVG レンダリングライブラリなのだが、よい SVG エディタを見つけるのが難しかった。
たいていは Illustrator で作業したあと、生成されたマークアップを整理するか、https://www.svgviewer.dev/ のようなテキストベースのエディタに戻ることになる。
UX はかなり洗練されていて、今の時点でも自分が調べたほかのツールより多くの機能をサポートしている。参考までに自分のプロジェクトは https://github.com/jwmcglynn/donner で、Web ベースの「エディタ」（現時点ではコードベースの編集のみ可能）のプロトタイプは https://jwmcglynn.github.io/donner-editor/ にある。
SVG は大きな可能性があるのにツールが乏しいせいで影響を受けてきた分野なので、この領域で新しい試みが出てくるのはうれしい。
よいスタートだ。欠けていると感じる明確な機能がいくつかある。
ノードツールは編集時に始点/終点ノード同士をスナップしようとするべきで、最初に作るとき、特に鉛筆ツールではスナップ距離をもっと大きくできるとよい。
編集用のノードツールよりも、Wick Editor の Flash/Futurewave SmartSketch 式の引っ張る/押す変形のような方式のほうが、モバイルにはずっと向いていそうだ。
多角形で角丸が機能しないなら、隠すか無効化すべきだ。
KDE の Karbon がこういう姿だったらよかったのにと思う。親しみやすいが高速で有能な SVG エディタだ。
可能なら SVG Path Editor0 にある機能も入るとよい。たとえば絶対座標を相対座標に変える機能や、各パスの線と曲線を個別に編集する機能などで、ほかのエディタでは見つけられなかった。
あればすばらしいが、作業量が膨大だったり別プロジェクトになったりするかもしれない機能としては、アニメーションもある。
よさそうだ。批判したいわけではないが、エディタにおいて SVG そのものは抽象化のレベルが間違った対象だと常々思っていた。欲しいのは SVG エディタではなく、ベクタードローイングプログラムだ。
もちろん最適化された SVG としてレンダリングすべきだが、パス、クリップパスのような SVG の概念を中心に UI/UX を作ると、エンドユーザーには親切ではない。Inkscape でいつも引っかかっていた部分もここだ。
本当に強力な機能は、Blender のモディファイア（配列、ミラーなど）のようなものをベクターエディタに入れて、非破壊編集を可能にすることだと思う。
最初の例外がクリップパスで、Hyvector ではストロークと塗り、そしてそのパスの外側で切り取られるコンテンツを持つパスとして扱う。SVG でのクリップパスの扱いはかなり面倒で直感的ではない。
開発を続けられるなら、パスの角丸、非破壊ブーリアン演算、可変ストローク幅、複数の塗り、歪みといった機能が続く予定だ。
ただしエクスポート形式は SVG のままにしたい。Web との相性が本当に良く、CSS でスタイリングできるからだ。なので効果は実際の SVG としてエクスポートできる必要があり、一部のエディタのように SVG として書き出すときに偽のビットマップを SVG の中に入れる方式は避けたい。たとえば円錐グラデーションは、いつか SVG が対応するまでは入らないだろう。
このアイコンを編集して矢印を円の中央に置こうとしたが、マスクが正しく認識されず黒い円だけが見えた。
http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink" width="20"
height="20" viewBox="0 0 20 20" stroke-width="2" stroke="black">
このアイコンにはマスクよりクリップパスのほうが適しているかもしれない。同じ形のアイコンを作りたいなら、マスク内の要素を取り出して Hyvector に貼り付けてから作業すればよい。
とてもよい。Web ベースのエディタが好きだ。
インポートした SVG で、すべてのオブジェクトとグループが正しいプレビュー付きで明確に見える点が気に入った。
欠けている、または見つけられなかった機能が 2 つある。線を図形に変換する方法があるのか、SVG コードを手で直接リアルタイム編集できるのかが気になる。一般ユーザーにはかなりニッチな機能かもしれないが、塗りなど一部の作業は視覚的ツールよりコードで編集するほうがずっと簡単だ。
オープンソースとして公開する可能性があるのかも気になる。
UX が本当に気に入った。Wacom 対応 Android タブレットでもかなり使える。
スプライン編集の方式、つまり個別のハンドルを調整する代わりに線上の任意の点をドラッグして動かせる機能が、自分で考案したものなのか他から取り入れたものなのかはわからないが、本当に気に入った。
左側のツリーでタッチスクロールが動かないことだけが目につき、それ以外はとてもスムーズだ。キーボードショートカットも実装しているのか気になる。
ドラッグ中に Shift を押すとハンドルの方向を維持するのも動作する。
左側のツリーは、すべてのデバイスでうまく合わせるのが難しい。クリック、タッチでクリック、ドラッグ＆ドロップ、スワイプスクロール、タッチスクロールなどをサポートする必要があり、同時に数百個の要素を含んでいるように動作しなければならない。iOS でのスワイプスクロールや少しのもたつきのような問題はまだあるが、リストには入れてある。
キーボードショートカットはモバイル以外のデバイスで実装されている。メニューバーでメニューを開くと、メニュー項目の右側にショートカットが表示される。
どう使えばいいのかわからなかった。線分を作ったが、移動したりサイズ変更したりする方法が見つからず、ドラッグハンドルは表示されていた。
四角形や円のような他の図形を作る方法もわからない。見えるボタンをほぼ全部、いろいろな順番で 20 回ほど押してみたが、ほとんど何も起きなかった。
すばらしい。このプロジェクトが成功してほしい。
第一印象という観点でいくつかフィードバックすると、起動時にすぐいじれる空の無題ドキュメントを開いておき、初期選択ツールとして Bezier 鉛筆のような楽しいツールを選んでおくのはどうだろう。
自分はあちこちクリックして、開いているドキュメントがないことを把握し、新しいドキュメントを作ってツールを変えて遊び始めるだけの動機があったが、多くのユーザーはそうしないだろう。特に、開いているドキュメントがないことが最大の障壁のように思う。
小さな点に見えるが、デフォルトのキャンバスをもう少し大きくしてほしい。たとえば 512 や 500 の正方形くらいだ。新しいツールを試すとき、現実的に人々が与える時間は最初の 10〜20 秒だけなので、その時間内につかめなければそのまま離れてしまい、多くのユーザーを失うことになる。
とてもよさそうで、共有してくれてありがとう。
新しいドキュメントを作って鉛筆を試そうとしても何も起きなかった。結局、使い方がわからなかった。
Bezier ツールでノードをいくつか追加することはできたが、どのツールでも操作できなかった。Chrome/Windows でドラッグが完全に壊れている可能性もあるのだろうか？
よくできていて、可能性が大きく見える。簡単なフィードバックとして、フローティングツールバーを上に置くのは気が散るし、実際の描画領域を食ってしまう。
通常のツールバーにするか、キャンバス下部に配置するほうがよさそうだ。あるいは移動可能にしたり折りたためるようにしたりするとよい。