简体中文 | English
Vecsy 是一个运行在浏览器中的 SVG 编辑器，支持拖入 SVG 文件后实时查看、选择和调整内部图层。
- 拖拽或选择 SVG 文件导入
- 左侧图层树查看 SVG 内部元素，分组可展开 / 折叠
- 点击预览图中的元素，自动选中对应图层
- 图层显示 / 隐藏
- 添加图层：矩形、圆形、椭圆、直线、箭头、多边形、心形、五角星、文字
- 从内置 SVG 素材库添加：公司 Logo、动画示例、加载动画、创意动画等预设素材，点击即导入画布
- 复制 / 粘贴 / 删除图层，多选可一键编组
- 拖拽图层调整上下顺序
- 图层面板与画布元素均支持右键菜单（重命名 / 复制 / 删除 / 显隐）
- 选中文字图层可在画布上直接编辑文字内容
- 选择（V）/ 平移（H）工具切换，平移工具拖拽画布，双指捏合、触控板或鼠标滚轮缩放
- 空白处拖动框选多选，分组与多选包围盒内按下即可整体拖拽
- 四角缩放手柄调整尺寸（Shift 等比），矩形可修改圆角半径
- 多选时提供对齐与等间距分布工具
- 按住 Alt 查看 hover 图层与当前选区的间距参考线
- 实时编辑填充色、描边色、透明度、描边宽度
- 文字图层支持渐变填充；直线图层支持两端独立的端点样式（端帽与箭头装饰）
- 可折叠的属性检查器面板
- Preview / Source 视图，源码带语法高亮并可一键格式化为可折叠的层级树，点击源码元素可同步选中图层
- 修改历史记录，支持撤销 / 前进
- 导出面板支持 SVG / PNG / WebP 格式、倍率选择与体积优化
- 简体中文 / 繁體中文 / English / 日本語 四语界面
| Mac | Windows/Linux | 功能 |
|---|---|---|
| ⌘ + Z | Ctrl + Z | 撤销 |
| ⌘ + ⇧ + Z | Ctrl + Shift + Z | 重做 |
| ⌘ + C / ⌘ + V | Ctrl + C / Ctrl + V | 复制 / 粘贴图层 |
| ⌘ + A | Ctrl + A | 全选图层 |
| ⌘ + G | Ctrl + G | 图层编组 |
| Delete / ⌫ | Delete / Backspace | 删除选中图层 |
| 方向键 | 方向键 | 移动选中图层（按住 Shift 大步进） |
| Esc | Esc | 取消选择 |
应用内按 ? 可查看完整快捷键列表。
- React
- Vite
- Cloudflare Pages
- Wrangler
npm install
npm run dev启动后访问终端输出的本地地址，通常是 http://localhost:5173。
npm run build
npm run preview项目已接入 Cloudflare Pages Git 集成：推送 main 分支后自动构建部署（CI 会先运行测试），vecsy.top 始终与 main 保持一致。
也可手动 Direct Upload 将 Vite 构建产物上传到 Pages：
npm run build
npx wrangler pages deploy dist --project-name vecsy --branch main部署前需要先使用 Wrangler 登录 Cloudflare：
npx wrangler login应用入口负责编排，SVG 解析/几何/变换、共享文案、面板组件和状态 Hook 分别按职责拆分；样式仍集中在 src/styles.css。
.
├── public/
│ ├── favicon.svg # SVG favicon
│ ├── apple-touch-icon.png # iOS 触摸图标 (180×180)
│ ├── icon-192.png # PWA 图标 (192×192)
│ ├── icon-512.png # PWA 图标 (512×512)
│ ├── icon-maskable-512.png # PWA maskable 图标 (512×512)
│ ├── og-image.png # 社交分享图 (1200×630)
│ ├── manifest.json # PWA manifest
│ ├── robots.txt # 爬虫策略（覆盖 Cloudflare 托管默认）
│ ├── sitemap.xml # 站点地图
│ ├── _headers # Cloudflare Pages 安全与缓存策略
│ └── 404.html # 静态 404 页（解决 SPA 软 404）
├── src/
│ ├── main.jsx # 应用入口与业务编排
│ ├── app/copy.js # 四语文案（en/zh-CN/zh-TW/ja）和显示名称
│ ├── components/ # LayerPanel、CanvasPanel、InspectorPanel、Icon
│ ├── editor/ # SVG parser、geometry、transforms、security
│ ├── hooks/ # 文档状态和画布交互 Hook
│ └── styles.css # 全局样式
├── tests/
│ ├── unit/ # 纯函数单元测试（安全、矩阵、存储）
│ ├── browser/ # 浏览器集成测试（解析器、几何、拖拽）
│ └── fixtures/ # SVG 测试夹具
├── docs/
│ ├── v0.5/ # v0.5 Foundation 文档（PRD、路线图、发布说明）
│ ├── product-roadmap.md # 产品迭代计划
│ ├── browser-smoke-checklist.md # 浏览器手动验收清单
│ └── web-storage-options.md # Web 数据持久化方案选型
├── index.html
└── package.json
Copyright (c) 2026 wangruofeng. 本项目基于 GNU AGPL v3 开源。
- 任何人可自由使用、修改、分发本项目，包括商业用途。
- 但任何分发或通过网络提供服务（SaaS）的衍生作品，必须以 AGPL v3 开源全部源码，并向用户提供获取源码的途径。
- 如需将本项目用于不允许开源衍生代码的商业场景，请发邮件另行协商商业授权。