🛠️ SVG 代码编辑器使用与配置指南

SVG 代码编辑器 是一款轻量、极速的矢量图形代码编辑与实时渲染工具。无需依赖任何后端服务与重型图形软件，即可在浏览器端完成 SVG 的编写、格式化、紧凑化压缩、黑白转换与导出。

---

🚀 核心功能

• 实时渲染与语法校验：采用 DOMParser 本地解析，实时呈现渲染效果；语法有误时自动捕获并提示错误位置。
• 撤销 / 重做 (Undo / Redo)：内置 50 步历史记录栈，支持撤销与重做。
• 黑白 / 彩色 双向切换：
  • 基于心理物理学灰度算法（$L = 0.299R + 0.587G + 0.114B$），一键将整图所有元素（含渐变色标 stop-color 与内联 style）转换为高质感灰度黑白。
  • 支持再次点击一键还原原色。
• 代码格式化与紧凑化：
  • 格式化：自动补齐缩进，规范 XML 标签层级。
  • 紧凑化：去除多余注释、空格与换行，无损压缩文件体积。
• 实时指标统计：自动计算 SVG 代码的字节大小（Byte/KB）、元素总数及属性数量。
• 舞台背景切换：支持棋盘格（透明度测试）、极夜黑、纯白及深灰四种预览背景。

---

📖 使用步骤

步骤 1：导入或编写 SVG 代码

• 手动编写：直接在左侧代码框中输入或粘贴 SVG 代码。
• 快捷新建：点击顶部 「新建 (300x200)」 按钮生成标准基础模板。
• 本地上传：点击 「上传」 按钮选择本地 .svg 文件（重新选择相同文件亦可正常触发刷新）。

步骤 2：代码处理与优化

• 排版整理：点击 「格式化」 规整代码结构，方便阅读。
• 体积压缩：准备部署时，点击 「紧凑化」 去除冗余字符，降低网络传输开销。
• 黑白效果测试：点击右上角 「黑白」 按钮，观察图形在单色/灰度场景下的表现；再点一次可恢复彩色。
• 误操作恢复：使用 「撤销」 / 「重做」 按钮自由回溯修改历史。

步骤 3：切换背景与检查

在右侧预览区右上角选择 背景（棋盘格/极夜黑/纯白/深灰），检查 SVG 在不同底色下的透明度与边界细节。

步骤 4：导出代码或文件

• 复制代码：点击 「复制」 提取当前文本框中的 SVG 代码。
• 下载文件：点击 「下载」 将当前图形保存为带时间戳的 .svg 文件。

---

💡 快捷技巧与注意事项

• 高安全隐私保障：代码不会上传至任何服务器，解析与黑白转换全程在本地浏览器 Canvas / DOM 内存中运行。
• 智能状态重置：当上传新文件或清空画布时，工具会自动解除黑白锁定并重置色彩状态。