SVG Toolkit

Every SVG chore, solved

What actually makes an SVG smaller

Most SVG files exported from design tools carry weight the browser never uses: editor metadata, XML comments, hidden layers, default-value attributes and coordinates with six decimal places of precision. The optimizer strips this safely and shows the size saving live, so you can judge the trade-off yourself. Two things are worth knowing before you optimize aggressively: rounding path precision too far can visibly distort small icons, and the viewBox attribute should always survive optimization — it's what lets the graphic scale to any rendered size, so removing fixed width/height while keeping viewBox is usually exactly what you want for responsive icons.

Three ways to ship the result

Which output you need depends on where the graphic is going. For CSS backgrounds, the data-URI encoder wraps your SVG in a url("data:image/svg+xml,…") value with the special characters escaped, saving an HTTP request for small decorative shapes. For React projects, the JSX converter renames attributes the way React expects — stroke-width becomes strokeWidth, class becomes className — and hands you a paste-ready component. And when you just need a soft organic shape for a hero background or section divider, the blob generator produces a smooth random path you can regenerate until the silhouette feels right, then copy as standalone SVG.

Keep your SVGs accessible

Inline SVG is part of the document, so give meaningful graphics a <title> element (and role="img") so screen readers can announce them, or add aria-hidden="true" to purely decorative shapes like blobs. Optimizers — this one included — leave your title and desc elements in place, but it's a good habit to check them after converting a file you didn't author.

Step-by-step: from exported file to production icon

Open the Optimize tab and paste the raw SVG into the input panel — the file as Figma, Illustrator or Inkscape exported it, including the <?xml> prolog and any <metadata> block. The output panel updates on every keystroke, the preview below it renders the cleaned markup, and the status line reports the byte count before and after with the percentage saved. Check the preview against the original, then press Copy result. If the graphic is going into a stylesheet, switch to Data-URI: the same input is re-encoded as a complete background-image: url("data:image/svg+xml,…") declaration with #, <, >, & and % percent-escaped, which is the form every browser accepts without base64 bloat. For a React codebase use JSX, which wraps the cleaned markup in an Icon component that spreads props onto the root <svg>, so className, width and aria-label can be passed from the call site. The input is shared between the three tabs, so you paste once and collect whichever outputs you need.

The Blob generator tab works differently: there is no input. Drag Points (3–12) to set how many anchor points the shape has, Contrast (0.05–0.6) to control how far each point may wander from the base radius, pick a fill colour, and press New random blob until the silhouette suits the layout. The output is a 500 × 500 viewBox path built from quadratic curves, which scales cleanly at any size.

Real-world use cases

• Design-system icon sets. A 24-icon set exported from Figma is commonly 60–70 KB; stripping editor namespaces, comments and whitespace typically halves that before gzip, and the JSX output gives each icon an identical component signature.
• CSS-only decorations. Chevrons on <select> elements, list bullets, underline squiggles and hatch patterns are a few hundred bytes each — encoded as data-URIs they ship inside the stylesheet and never trigger a separate request or a flash of missing image.
• Email signatures and CMS fields. Some platforms reject files but accept inline markup; an optimized, single-line SVG pastes where a file upload would be refused.
• Landing-page backgrounds. Two or three blobs at low opacity behind a hero section give depth without a raster image — and because they are SVG, a 2 KB shape covers a 4K display with no quality loss.

Common mistakes and how to avoid them

Stripping the xmlns. Inline in HTML, the xmlns attribute is optional; inside a data-URI or a standalone .svg file it is required, and its absence is the most frequent cause of a "blank" background image. The optimizer removes only editor namespaces (Inkscape, Sodipodi, RDF, Dublin Core), never the SVG namespace itself. Hard-coded fills. An icon with fill="#000" cannot follow your text colour; replace it with currentColor before converting to JSX and the icon inherits colour from CSS. Double-quoting the data-URI. The encoder swaps internal double quotes for single quotes for exactly this reason — if you hand-edit the output, keep that convention or the CSS string terminates early. Forgetting the React key rule. Attributes such as xlink:href and xml:space need special handling in JSX; the converter leaves namespaced attributes untouched, so check the output for those two if the source came from an older editor. Blobs with hard edges. A contrast above roughly 0.45 with few points produces spiky shapes; for soft organic forms stay near 6–8 points and 0.25–0.35 contrast.

Further reading

For a deeper treatment of path simplification, precision rounding and the SVGO pipeline, read the SVG optimization guide; to decide when a vector should become a raster instead, see WebP vs AVIF vs PNG vs JPG. Browse all guides.

Frequently asked questions