vscode默认不渲染svg，必须安装svg viewer（作者cssho）插件双击预览；它轻量快速、支持自动刷新，但不执行css/js、不加载外部资源，含样式或脚本的svg需用live server在浏览器中预览。
VSCode 本身不渲染 SVG，必须装插件才能看到图形；装错或漏配置，就只能对着 <path d=""></path> 猜形状。
用 SVG Viewer 插件实现双击即预览
这是目前最轻量、响应最快、且默认支持保存后自动刷新的方案。它专为 SVG 设计，不跑 JS、不加载外部 CSS，但能准确渲染 <svg></svg> 标签内所有原生属性（fill、stroke、transform 等）。
- 安装时认准作者
cssho，搜索SVG Viewer—— 别选SVG Preview（已多年未更新，不兼容 VSCode 1.84+） - 装完无需重启，直接双击项目里的
icon.svg，就会在右侧或新标签页自动打开渲染视图 - 保存 SVG 源码时默认自动刷新，但前提是文件没被其他程序独占（比如同时用 Sketch 或 Figma 打开该文件，预览会卡住）
- 右键预览区域可导出 PNG、复制 SVG 代码、缩放/重置视图；按
Ctrl+Shift+P输入SVG: Open Preview也能手动触发
为什么 SVG Viewer 不显示中文或图片
不是插件坏了，是它根本不走系统字体链，也不解析 @import 或绝对路径资源。常见失效点就三个：
-
<text></text>标签里写了font-family="PingFang SC"或"Microsoft YaHei"—— 预览器 fallback 到默认无衬线体，应改用font-family="sans-serif"或显式指定 Web 安全字体 -
<image href="xxx.png"></image>中路径是绝对路径（如/assets/logo.png）或data:URL—— 只认相对于 SVG 文件的相对路径（如./logo.png），错则显示红叉，且不报错 - 用了
<style></style>块或外部 CSS 类（如class="icon"）—— 插件不执行 CSS 计算，样式全部失效，必须内联写fill="#333"这类属性
含 CSS/JS 的 SVG 必须走 Live Server 浏览器预览
只要 SVG 里有 <style></style>、@media、<script></script> 或依赖外部字体/CSS，插件预览就完全不可靠。这时得绕道浏览器，但要注意路径陷阱：
- 确保
logo.svg和preview.html在同一目录；preview.html内写<img src="logo.svg">或内联<svg>...</svg>，别用file:///协议 - 右键
preview.html→Open with Live Server，浏览器打开后修改 SVG 并保存，页面自动刷新 - 内联 SVG 时注意
id冲突：如果页面已有<g id="group-1"></g>，SVG 里再定义同名id会导致引用失效 - 构建工具（Vite/Webpack）打包后，
dist目录下的 SVG 可能因 public 路径配置错而加载失败，此时仍应以源码文件 + Live Server 为准
快捷键和编辑器布局提升效率
手动右键刷新太慢，高频修改时建议绑定快捷键并拆分视图：
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入Preferences: Open Keyboard Shortcuts，搜SVG: Refresh Preview，绑定如Ctrl+Alt+R - 用 VSCode 的“拆分编辑器”：左侧写
<path d="M0,0 L100,100"></path>，右侧用 SVG Viewer 打开同一文件，改完保存，右侧自动更新 - 在 SVG 文件顶部加一行
<style>body{margin:0} svg{max-width:100%;height:auto}</style>，能让预览器缩放更顺滑
真正容易被忽略的是：SVG Viewer 的“自动刷新”只监听文件内容变更，不监听文件系统级事件（比如 Git checkout 切分支、脚本覆盖写入）。如果图突然不更新，先检查是不是文件被其他进程锁住了，或者你其实在看缓存副本。
