# jakearchibald/svgomg

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jakearchibald-svgomg).**

6,185 stars · 525 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jakearchibald/svgomg
- Homepage: https://jakearchibald.github.io/svgomg/
- awesome-repositories: https://awesome-repositories.com/repository/jakearchibald-svgomg.md

## Description

SVGOMG is a browser-based SVG minification tool that applies SVGO transformations entirely on the client side. It processes SVG files in a Web Worker to keep the user interface responsive, then displays the original and optimized file sizes side by side, including gzipped size estimates.

The tool provides a live preview of the optimized SVG markup, rendered directly in the browser for immediate visual feedback. Users can configure which SVGO optimization plugins are enabled or disabled, set numerical precision for coordinates and transforms, and optionally pretty-print the output. Multiple optimization passes can be run to catch further reductions, and the interface supports comparing the original and optimized versions side by side.

The application is distributed as a static web interface that requires no server-side processing, with all optimization logic bundled into the page itself.

## Tags

### Part of an Awesome List

- [SVG Optimization](https://awesome-repositories.com/f/awesome-lists/devtools/svg-optimization.md) — Provides a browser-based interface for cleaning and minifying SVG vector graphics using SVGO.
- [SVGO Plugin Toggle UIs](https://awesome-repositories.com/f/awesome-lists/devtools/server-plugins-and-extensions/chat-server-plugins/plugin-toggle-managers/svgo-plugin-toggle-uis.md) — Lets users enable or disable individual SVGO plugins to control which minification passes are applied.
- [SVGO Plugin Toggles](https://awesome-repositories.com/f/awesome-lists/devtools/server-plugins-and-extensions/chat-server-plugins/plugin-toggle-managers/svgo-plugin-toggles.md) — Provides toggles for enabling or disabling individual SVGO optimization plugins during minification.
- [Previewers](https://awesome-repositories.com/f/awesome-lists/devtools/svg-optimization/previewers.md) — Provides a live preview of optimized SVG markup with optional pretty-printing and side-by-side comparison.
- [SVG Code Previewers](https://awesome-repositories.com/f/awesome-lists/devtools/svg-optimization/svg-code-previewers.md) — Displays the resulting SVG markup after optimization with optional pretty-printing for readability.

### Content Management & Publishing

- [File Size Optimizations](https://awesome-repositories.com/f/content-management-publishing/file-size-optimizations.md) — Reduces SVG file size through configurable SVGO plugins and displays original versus optimized sizes.

### DevOps & Infrastructure

- [SVGO Web GUIs](https://awesome-repositories.com/f/devops-infrastructure/control-planes/cli-and-web-gui-operation-interfaces/svgo-web-guis.md) — Provides a browser-based interface for configuring and running SVGO SVG minification with live preview.

### Security & Cryptography

- [SVG File Size Comparison Tools](https://awesome-repositories.com/f/security-cryptography/application-and-system-security/file-size-optimizations/svg-file-size-comparison-tools.md) — Displays original and optimized SVG sizes side by side, including gzipped size estimates.
- [Size Comparisons](https://awesome-repositories.com/f/security-cryptography/application-and-system-security/file-size-optimizations/size-comparisons.md) — Shows original and optimized SVG sizes side by side, including gzipped estimates.

### Software Engineering & Architecture

- [SVGO](https://awesome-repositories.com/f/software-engineering-architecture/default-configuration-values/plugin-configurations/svgo.md) — Offers configuration of individual SVGO optimization plugins to control which transformations are applied.
- [SVGO Plugin Configurators](https://awesome-repositories.com/f/software-engineering-architecture/default-configuration-values/plugin-configurations/svgo-plugin-configurators.md) — Provides an interface for toggling individual SVGO optimization plugins on or off.
- [Plugin Toggles](https://awesome-repositories.com/f/software-engineering-architecture/default-configuration-values/plugin-configurations/plugin-toggles.md) — Lets users toggle individual SVGO plugins on or off to control which optimizations apply.
- [Optimization Rule Toggles](https://awesome-repositories.com/f/software-engineering-architecture/project-management-governance/project-governance/standards-rule-enforcement/configuration-driven-rules/linting-rule-configurations/optimization-rule-toggles.md) — Allows toggling individual SVGO optimization rules on or off to control minification. ([source](https://jakearchibald.github.io/svgomg/))

### Web Development

- [Web Worker SVG Pipelines](https://awesome-repositories.com/f/web-development/client-side-components/client-side-directives/web-worker-svg-pipelines.md) — Offloads SVG minification to a Web Worker, keeping the interface responsive during optimization.
- [SVG Processing](https://awesome-repositories.com/f/web-development/client-side-media-processing/svg-processing.md) — Runs SVG minification entirely in the browser using Web Workers for responsive processing.
- [Main Thread Offloading](https://awesome-repositories.com/f/web-development/main-thread-offloading.md) — Offloads SVG processing to a Web Worker to keep the main thread responsive.
- [SVG Minification Workflows](https://awesome-repositories.com/f/web-development/response-handlers/content-minification/svg-minification-workflows.md) — Ships a workflow for configuring and previewing SVG minification settings before applying them.
- [SVG Coordinate Precision Configurations](https://awesome-repositories.com/f/web-development/field-configuration/numeric-precision-configurations/svg-coordinate-precision-configurations.md) — Allows setting decimal places for SVG coordinates and transforms to balance file size and visual accuracy.
- [SVG Precision Configurations](https://awesome-repositories.com/f/web-development/field-configuration/numeric-precision-configurations/svg-precision-configurations.md) — Configures decimal precision for SVG numeric values to balance file size against visual fidelity. ([source](https://jakearchibald.github.io/svgomg/))
- [Live SVG DOM Renderers](https://awesome-repositories.com/f/web-development/server-side-rendering/svg-renderers/live-svg-dom-renderers.md) — Renders optimized SVG markup directly in the browser for immediate visual feedback.

### Data & Databases

- [SVG Coordinate Precision](https://awesome-repositories.com/f/data-databases/numeric-fields/numeric-precision-constraints/numeric-precision-management/svg-coordinate-precision.md) — Sets decimal places for SVG coordinates and transforms to balance file size against visual accuracy. ([source](https://jakearchibald.github.io/svgomg/))

### User Interface & Experience

- [Optimized Markup Previews](https://awesome-repositories.com/f/user-interface-experience/file-previewers/terminal-image-renderers/image-previews/result-previews/optimized-markup-previews.md) — Shows the resulting SVG code after optimization with optional pretty-printing for readability. ([source](https://jakearchibald.github.io/svgomg/))
- [Optimization Comparison Previews](https://awesome-repositories.com/f/user-interface-experience/live-preview-integrations/side-by-side-editor-previews/image-comparison-previews/optimization-comparison-previews.md) — Shows original and optimized SVG versions side by side with file size comparisons.
- [Live Preview Renderers](https://awesome-repositories.com/f/user-interface-experience/live-preview-renderers.md) — Provides a live preview of optimized SVG markup rendered directly in the browser.
