A blazingly fast, professional-grade SVG visualizer and editor built directly into VS Code. Designed for frontend developers who need to optimize, preview, and manipulate vector graphics without ever leaving their IDE.
✨ Key Features
- 🎨 Live Visual Canvas: Instantly see your SVG render as you type. Features a draggable, zoomable canvas (scroll to zoom, click to pan) so you can inspect pixel-perfect vector nodes.
- ⚡ Enterprise Code Engine: Powered by the Monaco Editor (the same engine behind VS Code). Includes full XML syntax highlighting, code folding, and auto-indentation.
- 🗜️ Smart Optimizer: One-click minification. Strips out design-software bloat (Figma/Illustrator metadata), removes empty groups, and collapses whitespace to drastically reduce file size.
- 🌗 Background Tester: Instantly test your icons against transparent, dark
#1e1e1e, and light#ffffffbackgrounds to ensure maximum visibility. - 🔄 Make Dynamic (
currentColor): One-click conversion to strip hardcoded hex codes and injectcurrentColor, making your SVGs instantly compatible with CSS themes and Tailwind utility classes. - 🛡️ Sandboxed Session History: Safely experiment with your code. Every manual edit and optimization is logged in a visual history timeline. Click any previous state to preview it, and restore it with one click.
- 🛑 Safe-Save Architecture: Your actual file is never touched until you explicitly press
Ctrl+Sor click Save.
🚀 Usage
- Open any
.svgfile in VS Code. - The file will automatically open in the Yi SVG Editor visual workspace.
- Use the tabs on the left to switch between Source Code and your Session History.
- Use the top toolbar to Format, Make Dynamic, or Optimize.
🛠️ Requirements
No external dependencies required! Runs entirely client-side within the VS Code Webview environment.
📝 Release Notes
1.0.0
- Initial production release.
- Introduced split-pane workspace, Monaco Editor integration, and visual history engine.