https://github.com/igapyon/svg-part-editor
SVG part editor on Web Browser
https://github.com/igapyon/svg-part-editor
html javascript staticwebapp svg
Last synced: 2 months ago
JSON representation
SVG part editor on Web Browser
- Host: GitHub
- URL: https://github.com/igapyon/svg-part-editor
- Owner: igapyon
- License: apache-2.0
- Created: 2025-12-30T09:35:21.000Z (3 months ago)
- Default Branch: devel
- Last Pushed: 2025-12-31T11:26:27.000Z (3 months ago)
- Last Synced: 2026-01-02T23:05:52.262Z (3 months ago)
- Topics: html, javascript, staticwebapp, svg
- Language: HTML
- Homepage:
- Size: 61.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# svg-part-editor
**svg-part-editor** is a lightweight, browser-only SVG WYSIWYG editor
that treats `` elements as the minimum editable parts.
本アプリは Static Web App（静的Webアプリ）として設計されています。単一HTMLで完結し、ビルドやサーバは不要です。
SVGを **DOMとして扱い**、**``（group）をパーツの最小単位**として編集することに特化した、
ミニマルなWebブラウザ向けSVGエディタです。
公開URL: https://igapyon.github.io/svg-part-editor/
---
## Features
- 🧩 `` を最小編集単位としたパーツ指向編集
- 🖱 Webブラウザ単体で動作（サーバ・ビルド不要）
- 🔍 ズーム / パン対応
- ✋ ドラッグによるパーツ移動
- 🎨 fill / stroke / stroke-width の編集
- ↩️ Undo / Redo
- 💾 編集結果をSVGとして保存
---
## MVP Spec
**Minimum editable unit**
- 最小編集単位は `` 要素
- `` が存在しない場合のみ、単一のSVG要素をパーツとして扱う
- 移動・変形・属性編集は常にパーツ単位で行う
**Included**
- SVGの読み込み・表示
- `` 単位の選択
- ドラッグ移動
- fill / stroke / stroke-width 編集
- Undo / Redo
- SVGとして保存
**Excluded (Future Work)**
- パス編集
- グループ内部編集
- 高度な整列・レイアウト機能
---
## Getting Started
### Run Locally
1. リポジトリをクローン or ダウンロード
2. `index.html` をブラウザで開く
```sh
# no build, no server required
open index.html
```
### Release (Static Hosting)
- `index.html` をそのまま静的ホストに配置する
- CDN経由で依存を読み込むため、追加ビルドは不要
---
## Non-Goals（やらないこと）
svg-part-editor は **フル機能のSVGエディタを目指しません**。
以下はMVPでは意図的に対象外です：
- パス（ノード）編集
- グループ内部要素の個別編集
- フィルター / マスク / クリッピング
- 高度なテキスト編集
- Inkscape / Illustrator 互換を目指すこと
---
## Design Philosophy
### `` as the Minimum Editable Unit
本プロジェクトでは、人が「1つの部品」と認識する単位を最優先します。
- 編集対象の最小単位は **`` 要素**
- `` が存在しない場合のみ、単一のSVG要素をパーツとして扱う
- 移動・変形・属性編集は **常にパーツ単位**で行う
```svg
この前提により：
• 複数の線で構成されたアイコンを自然に扱える
• transform や属性管理が単純になる
• 将来的な拡張（内部編集）を段階的に進められる
⸻
Transform Handling
• 変形は SVG属性（transform）として反映
• CSS transform は使用しない
• transformは可能な限り に集約する
これにより、保存・再読み込み・他ツールとの相互運用性を保ちます。
⸻
View vs Edit Separation
• ズーム・パンは viewBox操作
• 編集操作（移動・属性変更）とは責務を分離
⸻
Tech Stack
• SVG.js — SVG構造・属性操作
• Interact.js — ドラッグ等のポインタイベント
• svg-pan-zoom — ズーム / パン制御
すべてCDN経由で利用可能です。
Project Status
🚧 Work in Progress (MVP)
設計思想の検証と、軽量SVG編集の実装実験を目的としたプロジェクトです。
⸻
License
Apache License 2.0
See LICENSE for details.