svgcanvas

一个用于 VS Code 的 SVG 可视化编辑插件，支持直接预览、源码编辑、属性编辑、拖拽移动、删除元素、另存为，以及面向图形编辑场景优化过的撤销 / 重做。

功能

• 直接以自定义编辑器打开 .svg
• 左侧源码编辑区直接修改 SVG 文本，带基础语法高亮与行号，并可一键应用或还原草稿
• 中央画布实时预览 SVG
• 右侧属性编辑器修改常见属性、文本内容和新增属性
• 鼠标拖拽移动元素
• 删除选中元素
• 支持将当前源码内容“另存为”新的 .svg 文件
• 方向键微调位置，Shift 为 10 倍步长
• Ctrl/Cmd + Z 撤销，Ctrl/Cmd + Y 或 Ctrl/Cmd + Shift + Z 重做

使用方式

1. 在 VS Code 中打开任意 .svg 文件
2. 插件会默认以可视化编辑器打开
3. 在左侧源码区直接编辑 SVG 文本，点击“应用源码”同步到画布
4. 点击画布中的元素，在右侧属性面板编辑属性
5. 拖拽元素移动，或使用方向键微调
6. 按 Delete 删除选中元素
7. 使用顶部按钮进行“另存为”，或使用撤销 / 重做

当前实现说明

• 移动逻辑会优先复用已有的前置 translate(...)，避免重复叠加过多平移指令
• 拖拽操作会合并成单条历史记录，方向键连续移动也会进行短时间窗口合并
• 修改会同步回原始 SVG 文本，并尽量保留 <svg> 标签前后的声明内容

开发

npm install
npm run compile
npm run package:vsix

按 F5 启动扩展开发宿主进行调试。