A Visual Studio Code extension that provides instant SVG previews directly in your editor. Hover over SVG content or file references to see live previews without leaving your code.
Features
Inline SVG Preview: Hover over any <svg>...</svg> tag to see a live preview
File Reference Preview: Hover over .svg file references to preview the image
Auto-hide: Previews automatically disappear after 1.8 seconds for a clean interface
Click-to-Open: Click any preview to open the SVG content in a new editor tab (beta-stage)
Multi-language Support: Works with:
HTML
XML
JavaScript/TypeScript
CSS/SCSS
Vue
JSX/TSX
Requirements
Visual Studio Code version 1.104.0 or higher
No additional dependencies required
Usage
Install the extension
Open any supported file type containing SVG content
Hover over:
Any <svg> tag
Any reference to an .svg file
The preview will appear automatically
How to Use
Open any file containing SVG tags or SVG file references
Hover your cursor over an SVG tag or .svg file reference
A preview popup will appear showing the rendered SVG
Click on the preview to open the SVG content in a new tab
Extension Settings
Currently, this extension has no configurable settings.
Known Issues
Some complex SVG files may not render correctly in the preview
File resolution for relative paths may not work in all scenarios
Preview may flicker on some systems when auto-hiding
Release Notes
0.0.2 (2025-10-10)
Initial release with SVG hover preview functionality
Added support for inline SVG tag previews
Added support for SVG file reference previews
Implemented auto-hide after 1.8 seconds
Added click-to-open functionality
Multi-language support
Contributing
We welcome contributions! Please see our Contributing Guidelines for details on how to submit pull requests, report issues, and contribute to the project.
Support
If you encounter any problems or have suggestions, please:
