A VS Code/Cursor extension that provides SVG preview functionality when hovering over SVG markup in your code.
Features
Hover Preview: Hover over SVG markup to see a live preview of the SVG
Support for Multiple File Types: Works with HTML, XML, and SVG files
Standalone SVG Elements: Also previews individual SVG elements like <circle>, <rect>, <path>, etc.
Context Menu: Right-click to open a detailed SVG preview in a separate panel
Code Display: Shows both the preview and the SVG code
How to Use
Hover Preview
Open a file containing SVG markup (HTML, XML, or SVG)
Hover your cursor over any SVG content
A tooltip will appear showing the SVG preview and code
Detailed Preview
Place your cursor on SVG markup
Right-click and select "Show SVG Preview" from the context menu
A new panel will open with a larger preview and the SVG code
Supported SVG Elements
The extension recognizes and can preview:
Complete <svg> elements
Individual SVG elements:
<circle>
<rect>
<path>
<line>
<polyline>
<polygon>
<ellipse>
<text>
<g>
<defs>
<use>
Example
<!-- Hover over this to see a preview -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Development
Prerequisites
Node.js (version 16 or higher)
npm
Setup
Clone this repository
Run npm install to install dependencies
Run npm run compile to compile the TypeScript code
Testing
Run npm run test to execute tests
Press F5 in VS Code to launch the extension in a new Extension Development Host window
Building
Run npm run compile to build the extension
The compiled files will be in the out/ directory
Installation
From Source
Clone this repository
Run npm install
Run npm run compile
Copy the extension to your VS Code extensions folder or use the Extension Development Host
From VSIX (when published)
Download the .vsix file
In VS Code, go to Extensions (Ctrl+Shift+X)
Click the "..." menu and select "Install from VSIX..."
