SVG Display

Preview any SVG inline or standalone right inside VS Code.

What it does

A lightweight Visual Studio Code extension that provides instant SVG previews directly in the editor.

• Adds a Preview SVG link above each <svg> tag
• Opens a side-by-side preview panel
• Supports multiple <svg>s in a single file
• Works automatically — no setup required

Works with:

• VUE Files - Detects <svg> elements inside <template> blocks and shows a preview link.
• REACT Files - Detects <svg> elements inside .tsx or .jsx files and shows a preview link.
• SVG Files - Provides a preview link for standalone .svg files.

Vue Demo

React Demo

SVG Demo

Installation

1. Open VS Code
2. Go to Extensions Marketplace (Ctrl+Shift+X / Cmd+Shift+X on macOS)
3. Search for vscode-svg-preview
4. Click Install

Or install directly from the Marketplace page.

License

This project is licensed under the MIT License.

Author

Deniz Derman

• GitHub

Enjoying SVG Display?

If you find this extension useful, please consider leaving a review on the Marketplace.