SVG Viewer

Download the extension from the Visual Studio Marketplace or get the latest CI build

A Visual Studio extension that makes working with SVG files easier by providing a live preview, IntelliSense, and custom file icons.

Features

Renders a live preview of the SVG file being edited, positioned in a corner of the editor window.

Adornment

The preview updates automatically as you type, providing instant visual feedback on your changes.

Interactive features:

🖱️ Click to copy – Click on the preview to copy the rendered image to your clipboard
🔍 Scroll to zoom – Use the mouse wheel over the preview to zoom in/out (50% to 400%)
📍 Hover for info – Tooltip shows SVG dimensions, zoom level, and usage hints

Customize the preview behavior via Tools → Options → SVG Viewer → General:

Option	Description	Default
Preview Size	Maximum width/height of the preview (50-1000px)	250px
Preview Position	Corner placement (Top Left, Top Right, Bottom Left, Bottom Right)	Bottom Right
Preview Margin	Distance from the editor edge (0-100px)	20px
Show Error Indicator	Display an error icon when SVG parsing fails	Enabled
Show Loading Indicator	Show visual feedback while rendering	Enabled
Debounce Delay	Delay before re-rendering after typing (100-2000ms)	500ms

When your SVG contains syntax errors, the preview shows a clear error indicator with details in the tooltip:

Enhanced IntelliSense support for SVG files with schema-based completions.

SVG IntelliSense

This works by opening SVG files in the HTML editor, which has built-in schema information for SVG elements and attributes.

Solution Explorer displays custom icons for SVG files:

File Icons

The extension is designed to be lightweight and responsive: