SVG描画ツール
このページは、Geminiとともに作成しているSVG描画ツールの各バージョンへのリンクを提供しています。
※SVG描画ツールは、直線、円、自由描画パス、長方形、三角形、文字など、多様な図形を描画できるアプリケーションとして開発しております。描画した図形は、色、線の太さ、破線スタイル、端点スタイル、文字サイズ、回転角度などの詳細なプロパティを設定できます。
また、図形の選択、移動、コピー、ペースト、削除といった基本的な編集操作に加え、独特な機能を備えています。完成したSVGは、コードとしてクリップボードにコピーしたり、SVGファイルとして保存したりすることが可能です。
現在、Geminiとバイブコーディングによる共同製作作業を行っており、このサイトで、更新があればその経過を適時更新していく予定です。
ツールリンク(新しいバージョン順です）
2025/11/25
SVG保存とSVG読込に関する諸々の不具合とデスクトップ版パネルの配置改善対応
【改修機能】
１．接続線装飾に位置ずれ対応
SVGファイルとして保存した時に、矢印線の装飾がずれて保存されていたので修正しました。
２．SVGファイルのtext読込不具合修正
SVGファイルを読み込み時、textの配置が正しく配置されない不具合を修正しました。
３．SVGファイル読込時に、一つのグループ化の処理をしない修正
SVGファイルを読み込んだ時に、全ての図形が一つのグループにまとめられてしまう不具合を修正しました。
４．SVGファイル読込後、textが編集できない不具合修正
SVGファイルを読み込んだ後、text図形が編集できない不具合を修正しました。
５．デスクトップ版コントロールパネルや各パネルの改善対応
コントロールパネルのレイアウトや各パネルを見直し、使いやすさを向上させました。
2025/06/07
GeminiにSVG描画ツールがないかを教えてくれと依頼したら、
さくっとキャンバスで作ってくれたものを、いろいろと依頼して改造したものです。
直線、円、自由描画パス、長方形、三角形、文字の描画に対応し、図形のプロパティ（太さ、破線、端点スタイル、文字サイズ、回転）を設定できます。
図形選択、移動、コピー、ペースト、削除、線の位置合わせ機能も備わっています。
2025/06/22
Reactという技術を知ってから、
Reactが推薦しているフォルダ構成で作成しなおしたバージョンです。
この版は最初から作成し直ししたものです。
その後、あれこれと思った事を実装してみました。Geminiとのやりとりが楽しいと思いました。
【追加機能】
①固定パーツとして星と月、太陽を装備してみたり、既存のSVGを読み込んで使用可能としました。
②背景に画像を読み込んで、それをもとに線を引いたりしたら良いかもと思って実装しました。
③32×32の画像をPixelEditorで作成して、挿入できるようにしました。（但しimageです）
④図の上下配置を調整できるようにしました。
⑤選択した図形をパーツとして再利用可能なように「パーツとして保存」する機能を実装しました。
⑥各SVGタグにつけたIDを変更できるようにしました。
⑦SVG保存時に、描画した図形内容にフィットして保存する指定と、座標を整数化して丸めて保存する指定をできるようにしました。
2025/06/29
描画ツール作成で表示部をまだ、専用のSVGPaserライブラリを使用していない版です。
transform属性やグラデーション等の高度なSVG機能を正確に解釈するには、無理があると悟ってから、何度か、高機能なSVGパーサライブラリに切替ようとして
導入しては、結果失敗を繰り返しておりました。
その結果、Geminiとの共同製作がなかなか思うように進まなくなり、もうバージョンアップはしないで終了しようかなとも考えておりました。
2025/07/06
やっぱり機能アップをするためには、どうしても高機能なSVGパーサライブラリ(fabric.js)を使用する必要があると思いを強くして、fabric.jsを使用する方向で何度もチャレンジした結果もとに戻す作業をせずに、Geminiがやりたいと思う方向（ある程度私の意向を押さえながら）やらせてみたらようやく導入する事ができました。
大幅にデグレを起こしましたが、ある程度は修正した版になります。
（ライブラリを変更する作業は大変だという事を認識できました。）
【注意】このバージョンは前バージョンと比べデグレードしていて正しく動かない機能が多く含まれてます。
2025/07/12
fabric.jsにしてから不具合を改修していっています。まだグループ化している図形の扱いについて問題がありますが、それ以外であればほぼ使えるのではと考えています。
【追加機能】
①アンドゥ＆リドゥ機能（最大50)を追加
②パン機能（表示されている図形の倍率や向きを変えずに、画面の表示領域だけを上下左右に平行移動させる機能）
③ズーム機能（表示されているキャンバスの倍率を変更する機能）
④SVG保存時に、背景読込した画像も含めるかどうかを選択可能にしました。
⑤直線選択時のメニュー「X座標を揃える(垂直)」と「Y座標を揃える(水平)」の機能がデグレていたので元に戻しました。
⑤PixelEditor はこれまでイメージ(PNG)形式で出力していましたが、それをSVGタグで出力するように変更しました。
2025/07/17
fabric.jsのグループ化とグループ解除がこれまでうまくいってなかったのがひとまず動作できるようになったので公開する事にしました。
【追加機能】
①グループ化とグループ解除機能を実装
②地図パーツを追加
③パーツの90度右回転機能を追加
2025/07/19
コンテクストメニューの整理
【追加・改修機能】
①コンテキストメニューに表示されていた「最前面へ」「前面へ」「背面へ」「最背面へ」の4つの重ね順操作を、「順序」という一つの親メニュー項目にまとめ、サブメニューとして表示するように変更
②複数の図形を選択した際に、コンテキストメニューに「図形整列」サブメニューを追加し、その中に「左に整列」「右に整列」「上に整列」「下に整列」の機能を追加しました。
【補足】
今後、携帯でも使えるようにしたいと考えておりますが、まだまだ先になりそうです。
2025/07/26
モバイルデバイス対応版
【追加・改修機能】
①フローチャート描画用パーツを追加しました。
KIROに実装を依頼し作成してもらいました。
②モバイルUI専用のコンポーネントを追加しました。
要件定義はGEMINI(WEB)、KIROの SPECSで作成してもらいました。
③コントロールパネルのレイアウトを変更しました。
モバイルデバイスのUIを当初は共通化で！と考えてました。
しかし、モバイル専用が必要と判明しデスクトップ用のUIはその変わったままの状態になりました。
④その他修正（キャンバスサイズ変更、グリッド表示有無等
2025/09/01
モバイルデバイスへの対応強化と描画オブジェクトのスタイリングオプションの拡充
【追加・改修機能】
①モバイルUI/UXの強化と新コンポーネントの導入
モバイルデバイスに特化した多数のUIコンポーネントを導入しました。
②描画オブジェクトのスタイリングオプションの拡充
グラデーション、不透明度 (Opacity)、ストローク結合 (StrokeLineJoin)、テキスト装飾の改善をしました。
③Flowchartプラグインの機能強化と堅牢性向上
グラデーション、不透明度、ストローク結合などのプロパティをFlowchartShapeが継承・処理する基盤を整備しました。
④その他、バージョンアップに伴うデグレの修正を行いました。