SVG VScode

2025 年在 VS Code 中写 SVG 最爽的完整配置方案（亲测效率翻 5 倍）

1. 必装的核心插件（直接搜名字安装）

插件名	功能	为什么一定要装
SVG (by jock.svg)	实时预览 + 悬停预览 + 代码高亮 + 一键导出 PNG/WebP	目前社区最强，没有之一（2025 年已更新到 v3.x）
SVG Preview (by Simon Siefke)	侧边栏实时预览，支持暗黑模式	轻量备用，两个插件一起用最稳
SVGO Compressor	右键 → Minify SVG / Optimize SVG	一键压缩到最小体积
Iconify IntelliSense	输入 uni- / mdi- / tabler- 自动提示 20 万+ 图标	彻底抛弃图标字体
Live Server	本地热更新预览（尤其是做动画时必备）	老插件但永远好用
Error Lens	实时标红 XML 语法错误（SVG 容易忘闭合标签）	省去无数调试时间

2. 推荐设置（粘到 settings.json 里）

{
  // SVG 实时预览更清晰
  "svg.preview.background": "transparent",   // 透明背景
  "svg.preview.grid": true,                   // 显示网格对齐
  "svg.preview.antialiasing": true,

  // 自动格式化 + 压缩
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[svg]": {
    "editor.defaultFormatter": "jock.svg",
    "editor.formatOnSave": true
  },

  // 自动在保存时压缩（体积直接砍 40~80%）
  "svg.compressor.enable": true,
  "svg.compressor.onSave": true,

  // Iconify 自动补全
  "iconify.includes": ["mdi", "tabler", "ph", "ri", "lucide"],
  "iconify.annotations": true
}

3. 2025 年最常用的工作流（3 种场景）

场景 A：直接手写 SVG 图标/图形（最常见）

1. 新建 icon-home.svg
2. 直接写代码 → 右侧实时预览
3. 保存时自动压缩 + 格式化
4. 复制代码或直接用 <img src="icon-home.svg">

场景 B：用 Iconify 20 万图标（完全不自己画）

<!-- 安装完 Iconify 插件后，直接这样写就行 -->
<span class="iconify" data-icon="tabler:home"></span>
<span class="iconify" data-icon="mdi:react" data-inline="false"></span>

插件会自动提示 + 显示图标预览，配合 unplugin-icons（Vite）可实现 0KB 按需加载。

场景 C：设计稿转代码（Figma → VS Code）

1. Figma 选中图层 → Copy as → Copy as SVG
2. 粘贴到 VS Code → 右键 → “Optimize with SVGO”
3. 再右键 → “Change background color” 检查透明度
4. 搞定！

4. 超实用右键菜单（装完上面插件后自动出现）

• Preview SVG（侧边栏）
• Preview SVG（Hover）
• Minify SVG
• Optimize with SVGO
• Export as PNG / WebP / AVIF
• Copy SVG code
• Paste SVG as React / Vue component

5. 一键安装命令（懒人福利）

打开 VS Code 终端，粘贴下面这行，回车就全装好（含推荐设置）：

code --install-extension jock.svg --install-extension simonsiefke.svg-preview --install-extension svgo-compressor.svg-compressor --install-extension iconify.iconify-intellisense --install-extension ritwickdey.liveserver && echo "SVG 神级环境已就绪！"

装完这套，2025 年你在 VS Code 里写 SVG 会比任何专业矢量软件都快。
需要我再给你发一套我自己用的 VS Code SVG 代码片段（snippets）+ 超好看主题配置 吗？保证写 SVG 时爽到飞起！