rankato

Minify SVG for inline embedding

Squash indentation, drop unnecessary quotes, and collapse tags. The result is one long line that pastes cleanly into HTML, a CSS background-image, or a JSX component.

137114 bytes · 16.8% smaller
Source
Output
Preview
Rendered

Sometimes you don't want SVGO's full optimization — you just want the SVG on one line with no whitespace, ready to paste into an HTML attribute or a CSS url(data:image/svg+xml,...). The Rankato SVG Minifier does exactly that and nothing more: strips comments, collapses whitespace between tags, drops the XML declaration if present, and (optionally) URL-encodes the result for direct use in CSS. It's the fastest path from a formatted SVG file to a paste-ready string.

Minify vs. optimize — pick the right tool

Minification and optimization sound similar but they solve different problems. Minification only removes whitespace, comments, and formatting — the DOM structure stays byte-identical. Optimization (via SVGO) rewrites the structure — merging paths, converting shapes, collapsing transforms. Minification is what you want when you'll be optimizing at build time and just need a one-liner right now, or when you want to guarantee that the DOM your JavaScript references is unchanged.

Three output formats

The output panel gives you three ready-to-paste variants: Raw minified — one long line, ready for HTML attribute or a JS string. URL-encoded — every unsafe character percent-encoded, ready for background-image: url('data:image/svg+xml,…'). Base64 data URIdata:image/svg+xml;base64,… for cases where URL-encoding produces bigger output (usually not, but tested per-file). Each has its own Copy button and a size counter.

JSX conversion mode

Toggle JSX mode to convert every kebab-case attribute to camelCase (stroke-widthstrokeWidth), self-close tags, and rewrite class= to className=. The result pastes straight into a React component with no manual edits. If you need a TypeScript-typed component wrapper, click Wrap as component and paste the resulting const Icon = () => (…) block into your project.

URL-encoded CSS considerations

For CSS background-image, URL-encoded output is almost always smaller than base64 (base64 adds a 33% overhead). The minifier only percent-encodes characters that break in the CSS context: %, #, <, >, ?, and quotes. Everything else stays readable, which keeps the CSS diffable in source control. Wrap the result in single quotes in your CSS to avoid double-quote conflicts inside the SVG.

Batch minification

Drop multiple SVGs to minify them all at once. The result panel shows one row per file with copy buttons for each format. Use Copy all as JSON to get a JSON map of filename → minified string — handy for populating a lookup table in an app where SVGs live in code rather than as separate files.

Tool FAQs

Everything you need to know about using SVG Minifier.

Will minifying break my SVG?+

No. Minification only touches whitespace between tags and inside comments — nothing that affects rendering. If your SVG has whitespace-sensitive content (a <text> element with intentional spaces), the minifier preserves those runs.

When should I use base64 vs. URL-encoding for CSS?+

URL-encoding is almost always smaller and stays somewhat readable in source control. Use base64 only when you're pasting into a context that doesn't allow raw XML characters at all (some CMSes, some CSS-in-JS libraries with picky parsers). The tool shows the size of both so you can pick.

How is this different from just running the SVG through a minifier gulp task?+

Functionally identical if the underlying minifier is the same (we use svgo's --pretty=false equivalent). The difference is workflow: this is faster for a one-off, and the JSX mode saves you from setting up a Babel/SWC plugin just for a handful of icons.

Can I minify an SVG that has embedded scripts or styles?+

Yes, but the minifier preserves the contents of <script> and <style> as-is — those are code, not markup, and minifying JS/CSS is out of scope. If you need to minify inline CSS, paste the CSS block into a dedicated CSS minifier first.

Does the output stay valid XML?+

Yes. Even after minification the output parses as valid XML and renders identically in every browser. The one edge case: if your source SVG omits the XML declaration and namespace, the minifier keeps it that way — it never adds anything, only removes.