VSCode本身不渲染SVG，需借助SVG Viewer插件双击预览或Live Server在浏览器中真实运行；前者轻量自动刷新但不执行JS/CSS，后者支持完整功能。
VSCode 本身不运行 SVG，但能预览和转换
VSCode 不是浏览器，也不内置 SVG 渲染引擎，所以你不能“运行” SVG 像运行 Python 那样得到一个窗口。但你可以直接预览 SVG 文件（靠插件或浏览器），也能把 SVG 代码转成其他格式（比如 Base64、React 组件、CSS background-image）。关键看你要什么结果：是看效果？还是提效开发？
用 Live Server 插件实时预览 SVG 文件
这是最常用也最可靠的预览方式——本质是启动一个本地 HTTP 服务，用浏览器打开 svg 文件，享受原生渲染。
- 安装插件：
Live Server（作者：ritwickdey） - 右键点击任意
.svg文件 → 选择Open with Live Server - VSCode 会自动在默认浏览器中打开
http://127.0.0.1:5500/xxx.svg，支持热重载 - ⚠️ 注意：不要双击打开 SVG 文件（会用 VSCode 自带文本查看器，只显示 XML 源码）；也不要直接用
file://协议打开（部分 SVG 功能如<use>引用外部 symbol 可能失效）
把 SVG 字符串转成 Base64 内联使用
常见于 CSS 或 HTML 中避免额外请求，比如设置 background-image: url("data:image/svg+xml;base64,...")。手动编码容易出错，推荐用命令行或小脚本快速处理。
- 复制 SVG 源码（确保是纯 XML，无 BOM，首行是
<svg） - 终端执行：
echo '<svg ...></svg>' | base64 -w 0（macOS/Linux）；Windows 可用 PowerShell：[Convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes('<svg ...></svg>')) - ⚠️ 注意：SVG 中若有双引号、
<、>等，需先 URL 编码再 Base64（更稳妥做法是用 Node.js 脚本或在线工具）；另外，Base64 后的字符串要加引号包裹，否则 CSS 解析失败
用 svg-to-jsx 或 @svgr/cli 生成 React 组件
如果你在写 React 项目，把 SVG 转成 JSX 组件比 <img src="..."> 更灵活（可传 props、动态填色、类型安全）。
- 全局安装：
npm install -g @svgr/cli - 转换单个文件：
svgr --icon --replace-attr-values "currentColor:#000" icon.svg - 常用参数：
--jsx-runtime automatic（适配新 React）、--expand-props start（把className和style展开）、--typescript（输出 .tsx） - ⚠️ 注意：原始 SVG 若含
<defs>、<symbol>或外部引用（xlink:href），@svgr 默认不处理，得手动清理或加--no-svgo避免误删
真正卡住人的地方，往往不是“怎么转”，而是没意识到 SVG 是 XML——缩进、命名空间、属性大小写、CDATA 块都影响解析；还有人把压缩过的 SVG 直接扔进 svgr，结果报错说“unclosed tag”，其实只是少了个 >。动手前，先用浏览器打开 SVG 看是否正常渲染，这一步省不得。
