Live SVG preview, color inspection, data URI copy, icon templates, and basic validation.
Right-click any .svg file in the Explorer for quick actions. Or use commands from the Command Palette.
Features
- Live SVG preview — render an SVG in a side panel and refresh it as you edit
- Color inspection — list explicit
fill and stroke values and copy a selected value
- Data URI copy — copy data:image/svg+xml;base64,... for use in CSS or HTML
- Markdown image copy — paste directly as an inline Markdown image
- Icon templates — insert circle, checkmark, arrow, or star starter SVG
- Validation — check for required svg, viewBox, and xmlns attributes
- Right-click context menu — Explorer right-click for Preview and Copy actions
Requirements
No external tools required. Works entirely within VS Code.
Commands
| Command |
Description |
SVG Toolkit: Preview SVG |
Render SVG in a side panel |
SVG Toolkit: Copy as Data URI |
Copy data:image/svg+xml;base64,... |
SVG Toolkit: Copy as Markdown Image |
Copy as inline Markdown image |
SVG Toolkit: Insert Icon Template |
Insert circle, checkmark, arrow, or star template |
SVG Toolkit: Validate SVG |
Check for <svg>, viewBox, xmlns |
SVG Toolkit: Extract SVG Colors |
List explicit fill and stroke values for copying |
Right-click .svg files in Explorer for Preview SVG and Copy as Data URI.
Explore more tools from the same suite:
| Extension |
Description |
Marketplace |
| AI Voice Reader |
Read files, selections, or documents aloud with Web Speech API |
Install ↗ |
| Brandfetch Logo Fetcher |
Fetch and insert brand logos from any domain — SVG, PNG, or Markdown |
Install ↗ |
| Dev Wellbeing |
Posture, eye-strain, and hydration reminders for long coding sessions |
Install ↗ |
| Focus Timer |
Pomodoro-style focus and break timer with status bar countdown |
Install ↗ |
| Gamma Slide Assistant |
Create presentations with local Marp export or optional Gamma generation |
Install ↗ |
| Hook Studio |
Visual editor for VS Code hook conditions and automation rules |
Install ↗ |
| Knowledge Decay Tracker |
Track staleness of documentation and flag overdue reviews |
Install ↗ |
| Markdown to Word |
Convert Markdown + Mermaid diagrams to .docx via Pandoc |
Install ↗ |
| MCP App Starter |
Scaffold Model Context Protocol servers in TypeScript, JavaScript, or Python |
Install ↗ |
| Mermaid Diagram Pro |
Preview, export, and validate Mermaid diagrams in Markdown files |
Install ↗ |
| PPTX Builder |
Generate PowerPoint presentations from Markdown using pptxgenjs |
Install ↗ |
| Replicate Image Studio |
Generate images and videos with FLUX, SDXL, and WAN via Replicate API |
Install ↗ |
| SecretGuard |
Scan workspaces and files for accidentally committed secrets and keys |
Install ↗ |
| SVG to PNG |
Convert SVG files to PNG using resvg-js (Rust renderer, no ImageMagick) |
Install ↗ |
| SVG Toolkit (this) |
Preview, copy as data URI, and validate SVG files in-editor |
Install ↗ |
| Workspace Watchdog |
Monitor file health, detect stalled work, and surface hot files |
Install ↗ |
License
MIT
| |
