Instantly crop empty spaces & trim viewBox margins in SVG files. Super fast, zero dependencies. Works across VS Code, Cursor, Antigravity IDE, VSCodium, and Windsurf.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
⚡ Auto Crop ViewBox: Computes the visible bounding box of paths, shapes (<rect>, <circle>, <ellipse>, <line>, <polygon>, <polyline>), and transformed groups to fit your vector tightly.
💡 Quick Fix (Ctrl+.): Get an instant lightbulb suggestion to trim empty margins whenever you're viewing an SVG.
🧩 Inline SVG Support: Crop SVG elements inside Astro, React, Vue, Svelte, and HTML files while preserving surrounding code and dynamic props.
📁 Explorer Batch Processing: Right-click any supported SVG or framework file, multiple selected files, or a folder in the Explorer to crop them in a batch.
📐 Stroke-Aware: Automatically accounts for stroke-width expansion so borders never get clipped.
🔲 Square Lock: Optionally force a centered 1:1 viewBox for icon systems.
🏎️ Lightweight: Bundled with esbuild into compact extension and worker bundles, with no runtime installation step.
🔄 Native Undo: Editor-based crop operations integrate with VS Code's Undo history.
📜 Clean Logging: Dedicated Auto SVG Crop output panel for debugging and batch status.
Version 0.1.4
The 0.1.4 development cycle focuses on a safer SVG core and reliable inline parsing:
Strict handling of minified SVG arc flags generated by SVGO.
Paint-aware bounds that ignore invisible geometry.
Source-preserving updates that modify only the root <svg> opening tag.
Structural inline SVG scanning for JSX, Astro, Vue, Svelte, and HTML.
Safer handling of self-closing SVGs, JSX braces, dynamic attributes, and dirty editor buffers.
Worker-backed calculations that keep VS Code responsive while cropping large files and folder batches.
How to Use
1. Quick Fix Lightbulb
Open any .svg file, click inside the code, and press Ctrl + . (or Cmd + . on macOS) -> select "Auto SVG Crop: Trim empty margins & adjust viewBox".
2. Context Menu
In Editor: Right-click inside any SVG document and select "Auto SVG Crop: Crop Current SVG".
In Explorer: Right-click on one or more .svg files in the file tree and select "Auto SVG Crop: Crop SVG File(s)".
3. Command Palette
Press Ctrl + Shift + P (or Cmd + Shift + P), type Auto SVG Crop, and hit Enter.
Configuration
You can customize the behavior in your VS Code settings (settings.json):
Setting
Type
Default
Description
autoSvgCrop.precision
number
2
Number of decimal places to round coordinates in viewBox.
autoSvgCrop.padding
number
0
Extra padding percentage around the vector content (e.g. 5 for 5%).
autoSvgCrop.removeDimensions
boolean
true
Removes fixed width and height attributes so the SVG stays responsive.
autoSvgCrop.square
boolean
false
Forces a centered 1:1 square viewBox.
autoSvgCrop.cropOnSave
boolean
false
Automatically crop SVG files up to 256 KB whenever you save; use the command for larger files.
autoSvgCrop.showNotifications
boolean
true
Show toast notifications with the percentage of empty space trimmed.
