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 #ffffff backgrounds to ensure maximum visibility.
🔄 Make Dynamic (currentColor): One-click conversion to strip hardcoded hex codes and inject currentColor, 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+S or click Save.
🚀 Usage
Open any .svg file 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.
