Skip to main content
Better SVG supports inline SVG preview and hover functionality in multiple file types beyond standalone .svg files.

​
Supported file types

The extension activates and provides SVG preview features in the following languages:
  • Astro - .astro files
  • EJS - Embedded JavaScript templates
  • ERB - Embedded Ruby templates
  • HTML - .html files
  • JavaScript - .js files
  • JavaScript React - .jsx files (React components)
  • Liquid - .liquid template files
  • PHP - .php files
  • Svelte - .svelte components
  • SVG - .svg files (standalone SVG files)
  • TypeScript - .ts files
  • TypeScript React - .tsx files (React components with TypeScript)
  • Vue - .vue components
  • XML - .xml files

​
Features by file type

In all supported file types, you can:
  • View inline SVG code with gutter preview icons (if enabled in settings)
  • Hover over SVG elements to see a preview popup
  • Get visual feedback for SVG content embedded in your markup or code
For standalone .svg files, you also get:
  • Full SVG Preview panel in the Explorer sidebar
  • Color picker for changing currentColor
  • Zoom controls
  • SVGO optimization via the command palette or toolbar button

Build docs developers (and LLMs) love

Get started for freeTalk to us