Atom中SVG实时预览必须安装atom-svg-preview插件，它基于Chromium内核动态注入DOM实现毫秒级重绘，支持内联CSS、<use>引用等浏览器级行为；而image-view仅静态展示，不解析命名空间和样式，无法正确渲染。
装对插件：认准 atom-svg-preview，别装 image-view
Atom 自带不渲染 SVG，image-view 插件虽能打开 .svg 文件，但它只做“图片式”静态展示，不解析 <style>、忽略 xmlns 命名空间、对 <use href="#xxx"> 引用完全失效——你看到的可能是空白或错位图形。真正支持实时渲染的只有 atom-svg-preview（作者：nami01），它基于 Atom 的 Chromium 内核直接注入 DOM，还原浏览器级 SVG 行为。
安装方式：Ctrl+Shift+P → 输入 Install Packages → 搜索 atom-svg-preview → 点击 Install。装完不用重启，但要确认插件状态页显示 “Enabled”。
触发预览：快捷键比右键更可靠
双击 .svg 文件不一定自动弹出预览——尤其当文件被其他程序（如 Figma、Sketch）占用时，Atom 会静默失败。推荐固定用快捷键：Ctrl+Alt+V（Windows/Linux）或 Cmd+Alt+V（macOS）。这个组合键由插件原生注册，绕过文件焦点判断逻辑，只要当前编辑器里打开的是合法 SVG 源码，就能强制唤起右侧 Dock 面板。
常见卡点：
- 快捷键无效？检查是否和其他插件冲突（比如 vim-mode 的
Ctrl+Alt+V绑定），可在Keymap设置里重映射 - 预览区空白？右键预览面板 →
Inspect Element，看控制台是否有DOMException: Namespace error—— 多半是缺了xmlns="http://www.w3.org/2000/svg" - 图形错位或缩放异常？预览面板默认按容器宽度自适应，鼠标滚轮可缩放；按住空格 + 拖拽可平移视图
实时刷新：改代码就重绘，但 JS 和外部 CSS 不生效
atom-svg-preview 监听的是 text-editor:did-change 事件，不是保存动作。这意味着你敲一个字符，预览区就会立刻重新解析整个文档并重绘——真正的毫秒级响应。但它的渲染上下文是隔离的 iframe，有明确边界：
- 支持：内联
<style>、所有 SVG 原生属性（fill、stroke、transform）、<defs>+<use>引用、<image xlink:href>（需相对路径且同域） - 不支持：
<script>标签（直接剥离）、@media查询（无视断点）、import语句、外部 CSS 文件（<link rel="stylesheet">被忽略） - 警告：若 SVG 里写了
console.log()或调用了document.getElementById()，控制台不会报错，但 JS 完全不执行——这不是 bug，是插件主动禁用脚本以保安全
含交互或响应式的 SVG 怎么调试？必须走 Live Server
一旦 SVG 里出现 :hover 动画、window.addEventListener('resize')、或依赖构建工具注入的路径（如 Vite 的 import.meta.env.BASE_URL），atom-svg-preview 就彻底失效。这时唯一办法是新建一个 preview.html，把 SVG 内容内联进去：
<html> <body style="margin:0"> <svg xmlns="http://www.w3.org/2000/svg"> <!-- 把你的 SVG 代码完整粘贴到这里 --> </svg> </body> </html>
然后右键 preview.html → Open in Browser（需提前装 open-in-browser 插件），或用 http-server 启服务。注意：不要用 <img src="icon.svg">，那样会丢失内联样式和 JS 上下文；必须把 SVG 标签直接写进 HTML 的 <body> 里。
复杂点在于，SVG 里的 id（比如 <circle id="handle">）在页面中必须全局唯一——如果 preview.html 里还有其他 SVG 或元素也用了相同 id，JS 就选不到目标节点。这点容易被忽略，但一卡就是半小时。
