Batch SVG Optimizer

Why batch SVG optimization matters

Modern design systems ship hundreds of icons. Hero illustrations, empty-state art, and feature graphics can each weigh tens of kilobytes before optimization. Multiply that across a marketing site or product UI and unoptimized SVGs become one of the largest categories of text assets a browser has to download and parse. Trimming each file even by 30–60% — which is typical for SVGO output on Figma or Illustrator exports — adds up to a meaningful Largest Contentful Paint improvement, especially on mobile networks.

Doing that one file at a time in a single-file optimizer is fine for a logo tweak. It is not viable for an icon kit, a sprite source, or the contents of anicons/ folder you just exported from a design tool. The Batch SVG Optimizer is built for that scale: drop a folder, get the entire set back as a ZIP, and see the size delta per file before you ship.

How a batch run works in svgtools

1. Drop or pick. Drag a folder onto the canvas, or use the file picker to select multiple SVGs. Folder structure is flattened in the output — rename files in advance if you need a specific naming scheme.
2. Configure once. Toggle the SVGO plugins in the side panel. The same configuration is applied to every file in the batch, so the run is deterministic and the diff between two runs only reflects your config changes.
3. Inspect. Each file row shows original size, optimized size, and savings as a percentage. Files that grew (rare, but possible if a plugin added attributes the source lacked) are flagged so you can spot regressions before downloading.
4. Export. Download all results as a single ZIP, or grab one file at a time. Output filenames follow the name.min.svg pattern by default; switch the export format dropdown to emit JSX, TSX, Vue, PNG, or WebP for the entire batch instead.

Choosing the right SVGO plugins

SVGO ships dozens of plugins and the defaults are usually safe, but a few decisions are worth making intentionally for batch work:

• removeViewBox is enabled by default in some SVGO presets. Keep it off if you plan to scale icons with CSS — without a viewBox the SVG no longer scales responsively.
• cleanupIds is essential when you will inline the SVG into HTML or a sprite, because it strips IDs that would otherwise collide across icons.
• convertColors shortens hex values (e.g. #ffffff →#fff) which is harmless, but disable it if you want byte-stable diffs across runs.
• mergePaths can change rendering when paths use different fill-rules — verify a few outputs visually before trusting it on a large set.

Once a configuration works for your team, save it as a preset so the next batch run is one click away.

Tips for design system maintainers

If you maintain an icon library that ships to multiple consumers, the batch optimizer is most useful as a pre-commit step: export from Figma, run the batch, commit the optimized results. That keeps your repo's SVG bytes under control and avoids surprising consumers with sudden size jumps.

For React/Vue codebases that import SVGs as components, you can skip the intermediate .svg file entirely — set the export format to JSX, TSX, or Vue and the batch produces ready-to-import components with the SVGO pass already applied.

Browser performance notes

SVGO runs entirely in your browser. A modern laptop processes a few hundred icons in well under a second; large illustrations with thousands of path nodes take longer per file but still complete locally. Because nothing is uploaded, the only bottleneck is your CPU — there are no rate limits, no quotas, and no "premium" tier blocking large batches.