Hyvector – 高速でモダンなSVGエディタ

• Hyvector は、高速かつモダンに SVG（Scalable Vector Graphics）画像を効率よく編集できるウェブベースのエディタ
• JavaScript のサポートが必要で、有効化しないと正常に動作しない
• 複雑なインストールや環境設定なしで、すぐに ブラウザ から利用できる
• 高い性能とモダンなデザインを組み合わせ、直感的なユーザー体験 を提供する
• テキストやコードレベルでの SVG 編集ではなく、視覚的インターフェース による使いやすい編集環境

主な利点と重要性

• オープンソースおよび商用の SVG エディタと比べて、高速な応答性とモダンな UI を備える
• ウェブベースという特性上、OS を問わずどこからでもアクセスできる
• デザイナーと開発者の双方にとって効果的なベクター画像作業環境を提供する
• 別途プラグインや追加プログラムをインストールする負担なく、すぐに使い始められる
• 直感的な編集ツールにより、SVG リソースを簡単に作成・修正できる

[GN⁺]

Hacker Newsの意見

• 自分はC++のSVGレンダリングライブラリをサイドプロジェクトとして開発していて、良いSVGエディタを探したことがなかったので、主にIllustratorを使って結果のマークアップを整えるか、テキストベースのエディタであるsvgviewer.devを使っていた。あなたのUXはとても洗練されていて、これまで見つけたほかのツールよりもすでに多くの機能をサポートしている点が印象的だった。自分のプロジェクト donner でもWebベースのコードエディタのプロトタイプを提供している。SVGは大きな可能性があるのに、ツールの限界に足を引っ張られていた分野だったので、革新が起きていてうれしい
  • inkscapeの何が問題なのか気になる。多少のバグはあるけれど、全体としてはよく動いている印象がある
• 出だしは良さそう。明らかに足りていない機能がいくつかある。ノードツールで編集するとき、開始ノードと終了ノードが互いにくっつくよう簡単にスナップできるとよいし、特に鉛筆ツールで描くときはスナップ距離がもう少し広いとよい。Wick Editor風の変形・歪みツールはモバイル向けにも相性がよさそう。多角形でコーナーの丸めができないなら、その機能は隠すか無効化したほうがよい
  • こういうフィードバックを本当に求めていた。ありがとう
• ハイレベルな制御ができるのがとてもよかった。たとえばパスの反転のように、実際には見た目に現れない変更にも制御が効く点が気に入った。ただ、反転が実行されたかどうか分かりにくいので、何らかのフィードバックがあるとよい。選択範囲をコピーすると、使用されているすべてのフォントがbase64でSVGに埋め込まれ、ファイルが肥大化する現象がある。SVGとの1対1の対応を今後も維持するつもりなのか、それとも抽象化も考えているのか気になる。自分はFigmaのVector Networksという機能があるため、今でもそちらを使い続けている。有効なパスデータへの内部変換は必要になるだろうが、とても有用だと思う。技術的にSVGレンダリング方式を採用している点には驚いた。canvasベースだと思っていた。最近SVGで3Dオブジェクトをレンダリングしてみたら、すぐに性能問題にぶつかったが、原因はまだ見つかっていない。古いデバイスでストレステストした経験があるのか気になる
  • Vector Networks（自分はpath graphと呼んでいる）が、実際にはブーリアンパス作業をするときにすでに持っていた中間構造だったことに、しばらく気づいていなかった。最近までVector Networksには懐疑的だったが、最近はAI生成画像が増えているので、ビットマップのベクター化結果として面白そうだと思うようになった。導入したい機能ではあるが、優先順位としてもっと差し迫った作業が山ほどある。ストレステストも引き続き行う予定で、100ユーロのとても遅い古いAndroidタブレットでも動かしてみた。Hacker Newsへの投稿は勢いで出してしまい、もう少しテストしておくべきだった。以前は古いThinkPadですぐに性能問題を感じ取るようにしていたが、IDEがどんどん重くなって不可能になった。それでも古い機器は残しておいて、ちゃんと動くか確認し続けたい。コメントに出てきた提案はすべて見てissueにする予定。とても有益なフィードバックがあまりに多くて驚いている。5アップボートとコメント2件くらいしか期待していなかった。SVGレンダリング方式を使った理由は、保存されたSVGファイルとレンダリング結果を完全に同じ見た目にしたかったから。オーバーレイはCanvasやWebGLも検討したが、今のところほとんどの画像で十分高速に動いている
• KDEのKarbonが、こういう直感的で高速なSVG編集ツールになってくれていたらよかったのにと思う。特にSVG Path Editorが提供している機能（例: パス座標を相対値に変換する、path内の曲線・直線を個別に編集するなど）は本当に必要だが、まだほかのどのエディタでも見つけられていない。また、非常に大きな作業にはなるが、アニメーション機能が追加されたらとてもよいと思う
  • SVG Path Editorという名前のプロジェクトはたくさんあるが、ここで紹介されている yqnn.github.io のプロジェクトは、これまで使った中で最も進んでいて実用的なツールだ
• このプロジェクトにはぜひ成功してほしい。最初のユーザー体験についてひとつ提案がある。起動したらすぐ、すでに作成済みの「空の未命名ドキュメント」をひとつ用意して、すぐ試せるようにするとよい。たとえばBezier pencilのような楽しいツールが自動選択されているとなおよい。自分は何度もクリックして、ドキュメントがないことに気づき、新規ドキュメントを作ってからツールを切り替えて使ってみたが、たいていのユーザーはここで早々につまずくと思う。あと、キャンバスのデフォルトサイズがもう少し大きいとよい（例: 512または500の正方形）。新しいものを試すとき、普通は10〜20秒で面白くなければすぐ離脱するのが現実で、その間に引き込まないといけない。とてもよくできている
  • 同感。自分はすぐにペンシルをクリックして落書きしてみようとしたが、何も起きずがっかりした。新規ドキュメントを作ってからもやはりペンシルは動かなかった。結局、使い方を理解できなかった。Bezierツールでノードを追加することはできたが、ほかのツールで操作することには失敗した。Chrome/Windowsではドラッグ機能がまったく動いていないように見える
• どう使えばよいのか見当がつかなかった。線分をひとつ作ってみることはできたが、移動やサイズ変更の方法が分からず、ドラッグハンドルは表示できた。四角形や円のようなほかの図形を作る方法もまったく見つけられない。ボタンをほぼ20回ずつ押してみたが、何も起きなかった
  • メインツールバーで、テキストツールと画像ツールの間にあるのがshape toolだ。最初の2つのオプションが四角形と円になっている
  • こういうアプリは、使い方のヒントが非常に豊富に表示されるようにして、それをオフにもできるようにするのがよいと思う
• このツールを試してみて、とても高速で直感的なので本当に楽しかった。特にズーム/パンの性能は過去のツールより格段によかった。ひとつ気になるのは、生成系ワークフローに合わせたプラグインあるいはAPIレイヤーを追加する計画があるかどうかだ。SVG編集にスクリプティングやAIベースの視覚効果を組み合わせるユーザーは増えているので、Hyvectorにミニ言語やJSブリッジのようなプログラム可能な層ができれば、はるかに強力になると思う。公開おめでとう。創造的なベクター作業のハードルを下げてくれる新しいツールが増えるのは、いつでもうれしいことだ
  • ありがとう。最近は本業の別プロジェクトでAIを少しずつ使い始めていて、AI生成との統合を許容するのが重要だという点には同意する。AIとベクターエディタをどう組み合わせたいのか、もう少し詳しく聞かせてほしい。自分はAIで生成したビットマップをベクター化・カラー化する用途は考えたことがあるが、それ以外はまだあまり考えていない
• このUXは本当に気に入った。Wacom機能のあるAndroidタブレットでとても使いやすかった。スプライン編集のやり方（つまり個別ハンドルではなく、線上の任意の地点をドラッグして調整する方式）がどこから来たアイデアなのか分からないが、確かによい。ひとつ残念なのは、左側ツリーでタッチスクロールが効かないことだ。それ以外はとても滑らか。ショートカットは実装されているのか気になる
  • 曲線ドラッグの実装方法は意外と簡単だった。ずっと前のGoogleフォーラムの議論から実装のアイデアを得た。Shiftを押しながらドラッグすると、ハンドルの方向も維持される。左側ツリーはどのデバイスでも完璧に処理するのが難しい。クリック、タッチでのクリック、ドラッグアンドドロップ、スワイプスクロール、タッチスクロールなどをすべてサポートしつつ、数百の要素もきちんと表示しなければならないので複雑だ。まだiOSではスワイプスクロールや多少の引っかかりなどがあるが、リストには登録してある。キーボードショートカットはモバイルを除き、デスクトップでメニューバーを開くと項目の右側に表示される
• 実際に使ってみると、スタートは非常によいと感じた。特にUXには満足している。ペンツールが直感的で、オブジェクトパネルで各レイヤーのプレビューが出る点、クリッピングパスがうまく統合されている点、テキストのアウトライン化やブーリアン演算など、珍しい機能がある点が気に入った。批判的なフィードバックとしては、ツール切り替えのショートカットがあるとよく、ツールチップにも一緒に表示されるべきだと思う。Ctrl +/- でズームイン・アウト、スペース+ドラッグでパンできるようにしてほしい。グループ編集時、そのグループ内の個別オブジェクトを選びにくく、ダブルクリックするとすぐノードツールに切り替わるので、グループのアイソレーションモードがあるとよい。ペンツールの使用中には、前のポイントのコントロールポイントを調整できるべきだし、ペンモードでの取り消しがパスポイントの追加ではなく、その前の操作しか戻せないのも不便だ。テキスト対応は限定的で、@font-face のような埋め込みフォントが表示されず、フィルター対応も同様。SVGレンダリングが独立して行われていて、ブラウザでは正しく描画できていないように見える
  • すばらしいフィードバックに感謝する。これから数日で作成するissueが本当に多くなりそうだ。実際、Hacker Newsに投稿したときは5アップボートとコメント2件くらいしか期待していなかったのに、反応はとても大きい。グループ内の個別オブジェクト選択は Ctrl + クリック で可能。まだ選択ロジックは洗練されておらず、今後さらに改善する予定だが、当面はこの方法が役立つはずだ
• 可能性が大きいと感じてよかった。クイックフィードバックとして、ツールバーがキャンバス上部に表示される構造は集中を削ぎ、作業スペースも狭くなる面がある。一般的なツールバー配置か、キャンバス下部のほうがよいと思う。あるいはツールバーを移動可能・折りたたみ可能にしてほしい
  • ありがとう。ツールバーのデザインと位置はすでに何度も変えてきた。ウィンドウが狭くなると自動で折りたたまれる機能はすでにあり、折りたたみボタンを追加するのもとても簡単に実装できる