SVG 代码编辑预览

功能

• 左边写代码、右边实时出图，改一个字符就更新
• 背景可切棋盘格 / 浅色 / 深色 —— 棋盘格用于确认透明区域
• 缺 `xmlns` 时预览自动补上，并提醒你自己的文件里也要加
• 下载时导出的是补好 `xmlns` 的版本（少它的文件在别处不显示）
• 体检：缺 xmlns、缺 viewBox、引用外部资源、含 script / on*、结尾没闭合
• 显示 viewBox 尺寸、宽高与字节数
• 你的代码不会进入页面 DOM，脚本不会被执行
• 全部在浏览器本地完成，不上传

使用方法

1. 把 SVG 代码粘到左边（或点「载入示例」）
2. 右边立刻出图，改代码就改图
3. 看下方「检查」里有没有提示 —— 那些都是不报错但会失效的写法
4. 复制或下载 `.svg`（下载的版本已补好 xmlns）

常见问题

为什么预览用图片、不直接显示 SVG？

为了安全。把别人的 SVG 内联进页面（`innerHTML`）等于把任意代码放进本站的源里：`<svg onload="…">`、`<script>` 都会执行，而那是你从别处复制来的代码。作为 `<img src>` 渲染时，SVG 是一个独立文档 —— 脚本不执行、外部资源不加载，这是规范规定的行为，所以它读不到本站的任何东西。代价是看不到 SVG 的 DOM，而这个工具本来也不需要。

为什么我粘的 SVG 什么都不显示？

最常见的原因是少了 `xmlns`：`<svg>` 不带 `xmlns="http://www.w3.org/2000/svg"` 时，内联进 HTML 可以（父文档的命名空间会接管），但作为独立文件或图片就完全不显示，而且控制台只有一条干巴巴的加载失败。这个工具预览时会自动补上，检查区里也会提醒你自己的文件里也要加。其他原因：标签没闭合、里面引用了外部的图片或字体（作为图片不会加载）。

代码里有错为什么没提示？

因为浏览器对 SVG 相当宽容：标签没闭合、属性拼错、坐标写错，它往往照常渲染（只是少一块或位置不对），不会报错。这里只报「连图都出不来」的情况 —— 也就是 `<img>` 的加载失败。所以要判断「这段代码对不对」，最可靠的还是肉眼看预览，检查区列出的则是那些「不报错但一定失效」的写法（缺 xmlns、缺 viewBox、引用外链）。

viewBox 和 width / height 到底该写哪个？

都要写，而 `viewBox` 更重要。`viewBox` 定义坐标系（图形内容与尺寸的对应关系），`width` / `height` 只是默认显示尺寸。只写宽高没有 viewBox 时，SVG 不能缩放 —— 放大只会变糊（相当于位图）；只写 viewBox 是响应式写法：它会撑满容器，尺寸交给 CSS 决定（本站的图标就是这么写的，所以体检不会对它发提示）。