SVG Display

A lightweight Visual Studio Code extension that detects inline <svg> elements in Vue components and displays a live preview directly in the editor.

Works with Vue files

SVG Display automatically detects inline SVGs inside your Vue <template> blocks and gives you instant, in-editor previews.

What it does

• Adds a Preview SVG link above each <svg> tag
• Opens a preview panel with your SVG rendered
• Supports multiple <svg>s per file
• Lightweight & works out-of-the-box

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

Alternatively, install from the Marketplace page.

Configuration

No configuration is required. SVG Display works automatically. Future versions may introduce customization for background, theme, or preview behaviour.

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.