Visual SVG Editor for VS Code

A powerful visual SVG editor built directly into Visual Studio Code. Edit SVG files with live preview, intelligent attribute inspector, and optimization tools—all without leaving your editor.

Features

🎨 Visual Editing

• Live Preview - See your changes in real-time as you edit
• Interactive Selection - Click elements in the preview to select and edit them
• Attribute Inspector - Modify SVG properties visually without touching code:
  • Color picker for fill, stroke, and other color attributes
  • Visual opacity slider (0-1)
  • Numeric inputs for dimensions (width, height, x, y)
  • Text editing for font-family, font-size, and content

🌲 Element Tree View

Navigate your SVG's structure with an interactive tree:

• Expand/collapse groups and nested elements
• Search by element ID or type
• Quick navigation to any element in your SVG

💻 Dual Editing Mode

Switch seamlessly between visual and code editing:

• Visual Mode - Use the inspector to modify attributes
• Code Mode - Direct XML editing with syntax highlighting
• Automatic synchronization between both modes

⚡ Optimization

Reduce SVG file size by 30-70% with one click using SVGO:

• Remove unnecessary metadata
• Minify path data
• Optimize transformations
• Clean up unused definitions

⚛️ JSX Conversion

Convert SVG to React-ready JSX instantly:

• Automatic attribute name conversion (e.g., stroke-width → strokeWidth)
• Clean, formatted JSX output
• Copy to clipboard with one click

🎨 Color Palette Extraction

Automatically extract and display all colors used in your SVG for quick reference and consistency checking.

Getting Started

1. Install the extension from the VS Code Marketplace
2. Open any .svg file in VS Code
3. Choose "SVG Editor" when prompted, or right-click the file and select "Reopen Editor With..." → "SVG Editor"

Quick Actions

• Optimize SVG: Right-click any .svg file in the Explorer → "Optimize SVG"
• Convert to JSX: Open an SVG in the editor → Click the JSX button in the toolbar
• Edit Attributes: Select any element and use the inspector panel on the right

Usage Examples

For Designers

Quickly adjust icon colors, sizes, and properties without opening external design tools:

• Change colors with the integrated color picker
• Modify dimensions and spacing visually
• Preview changes instantly

For Developers

Prepare SVGs for production and integrate them into your codebase:

• Optimize file sizes for better performance
• Convert to JSX for React applications
• Extract color palettes for design systems

For Teams

Maintain consistency across vector assets:

• View color usage at a glance
• Standardize SVG structure
• Optimize assets before committing

Keyboard Shortcuts

Requirements

• Visual Studio Code version 1.85.0 or higher

Extension Settings

This extension contributes the following settings:

• svgEditor.autoOptimize: Automatically optimize SVGs on save (default: false)
• svgEditor.showColorPalette: Display color palette panel (default: true)