SVG Optimiser — Paste SVG Code, Size Reduction | LazyTools

Image Tool

SVG Optimiser — Paste Code Directly, Size Reduction %

Paste SVG code directly into the editor or upload an SVG file. Furthermore, the optimiser removes XML comments, excessive whitespace, empty elements, redundant attributes, hidden layers and editor metadata — typically achieving 30–60% size reduction. The size reduction percentage and character count display in the stats strip before downloading.

Paste SVG code directly (unique)30–60% typical size reductionRemoves comments, whitespace, hidden layersCopy or download optimised SVGNo server upload

How to use the SVG Optimiser

Paste SVG code or upload an SVG file

Click the "Paste SVG code" tab and paste SVG markup directly into the editor. Furthermore, switch to the "Upload SVG file" tab to load an .svg file from disk — the file content loads into the input field automatically. Both modes feed the same optimiser.

Choose optimisation options and run

Four options control which optimisations apply — Remove comments, Collapse whitespace, Remove hidden elements and Strip editor metadata. Furthermore, all four are enabled by default. Click Optimise SVG to process the source code.

Review the reduction and download

The stats strip shows original character count, optimised character count and percentage reduction. Furthermore, the SVG preview confirms the optimised code renders correctly. Copy the optimised code directly or download as an .svg file.

What each optimisation option removes

Each option targets a different category of non-visual SVG overhead. Furthermore, combining all four produces the maximum size reduction while preserving all visible content.

Option	Removes	Typical impact
Remove comments	XML comment blocks <!-- … -->	5–15% reduction
Collapse whitespace	Newlines, indentation, extra spaces	15–30% reduction
Remove hidden elements	display:none and visibility:hidden elements	5–20% reduction
Strip editor metadata	Inkscape, Illustrator, Sketch namespaces and metadata	10–25% reduction

How SVG optimisation reduces file size

The optimiser applies a sequence of text transformations to the SVG source string. Furthermore, each transformation targets specific content patterns using regular expressions.

Reduction % = (1 − optimised.length ÷ original.length) × 100

Comments: //g → replaced with empty string
Whitespace: /\s+/g → single space; > < → >< (no spaces at tag boundaries)
Editor meta: sodipodi:, inkscape:, dc:, cc:, rdf: namespaced elements removed

Worked example: optimising an Inkscape SVG icon

A developer exports an SVG icon from Inkscape and needs to embed it in a React component. The exported file is 4.2 KB. After optimisation:

The optimiser removes 1.8 KB of Inkscape metadata, comments and whitespace — a 43% reduction to 2.4 KB. Furthermore, the preview confirms the icon renders identically after optimisation. Moreover, the optimised code copies directly into the React JSX file without requiring a separate file reference.

What is SVG optimisation?

SVG (Scalable Vector Graphics) files contain both visual content — paths, shapes, gradients — and non-visual overhead added by the authoring software. Furthermore, editors like Inkscape, Adobe Illustrator and Figma embed their own namespace metadata, layer structure comments, version information. Coordinate precision beyond what is needed for display. An SVG icon exported from Inkscape may contain 40–60% non-visual overhead that has no effect on the rendered image. Moreover, removing this overhead reduces file size. Changing any visual property — the browser renders the optimised SVG identically to the original.

SVG optimisation matters most for SVGs embedded in web pages — icons, logos and UI graphics. A 5 KB icon used 20 times adds 100 KB of SVG code to the page. Moreover, SVGs served as separate files benefit from browser caching,. Inline SVGs optimised to minimum size provide the best combination of instant render and small payload.

Why paste mode matters more than upload

Most SVG optimiser tools require uploading a file and downloading the result. Furthermore, web developers embedding SVG icons in HTML or React have no separate file — the SVG code lives within the source file. Paste mode copies the SVG tag, optimises it and copies the result back — entirely within the browser. Moreover, paste mode also enables optimising SVG code from any source — CSS background-image data URLs, API responses containing SVG strings and generator output — without creating an intermediate file.

Why SVG size matters for web performance

SVG files inline in HTML are parsed as part of the DOM — every element creates a DOM node that the browser's layout engine must process. Furthermore, an unoptimised SVG icon with 200 Inkscape metadata elements creates 200 unnecessary DOM nodes per page. Removing these elements reduces memory usage and parsing time. Moreover, Google Lighthouse flags large inline SVGs as render-blocking resources — optimising SVGs to minimum size reduces Time to Interactive scores by eliminating unnecessary DOM complexity.

Frequently asked questions

Does optimisation affect the SVG visually?+

No — the optimisation removes only non-visual elements. Furthermore, comments are documentation text that browsers ignore during rendering. Whitespace between SVG tags has no visual effect — browsers treat SVG whitespace the same as HTML whitespace. Editor metadata is never rendered by browsers. Moreover, the preview in this tool confirms the optimised SVG renders identically to the source — check the preview before downloading if any doubt exists.

What is the difference between this tool and SVGOMG?+

SVGOMG (SVG Optimiser with GUI) uses the full SVGO library — a Node.js-based tool with 30+ optimisation plugins including path data precision reduction, attribute merging and ID shortening. Furthermore, this tool uses a simpler text-based approach — regex removal of known overhead patterns — which runs instantly without any build tools and works on partial SVG snippets as well as full files. Moreover, for maximum size reduction on production assets, SVGOMG produces better results. For quick paste-and-optimise workflows in the browser, this tool provides an instant result.

Why is my SVG getting larger after optimisation?+

If the source SVG has minimal overhead — no comments, already minified, no editor metadata — the optimisation may not reduce size significantly, and the character count reduction may round to 0%. Furthermore, SVGs generated by code (d3.js outputs, chart libraries) are often already compact. A negative reduction would mean the optimised output is larger — this should not occur with this tool's operations. Moreover, check that the source SVG contains readable XML rather than a base64-encoded data URL embedded in an SVG tag.

Can I optimise SVG icons from icon libraries?+

Yes — SVG icons from libraries like Heroicons, Lucide, Feather Icons and Font Awesome all benefit from whitespace and comment removal. Furthermore, icons copied directly from library documentation may include namespace declarations and aria attributes that add a few bytes. Optimising before embedding reduces each icon by 20–40%. Moreover, inline SVGs benefit more from optimisation than SVGs referenced as external files, because cached external files are loaded only once per browser session.

Does the tool handle SVG with embedded raster images?+

SVGs that embed base64-encoded raster images (PNG, JPEG) can be optimised — the text-based optimisations remove surrounding overhead without modifying the base64 data. Furthermore, the size reduction will be lower than for pure vector SVGs because the base64 image data accounts for most of the file size. The editor metadata and whitespace optimisations still apply to the SVG wrapper code around the embedded image. Moreover, removing hidden or metadata elements from SVGs with embedded images carries no risk to the visual output.

Related tools

→

Rate this tool

4.3

out of 5

★★★★★

190 ratings

5 ★

61%

4 ★

22%

3 ★

2 ★

1 ★

How useful was this tool?

★ ★ ★ ★ ★