SVG optimisation can reduce unnecessary markup in a logo or icon. A successful optimisation should still be checked visually and in the component where the SVG will be used.
Open the SVG Optimiser to follow the workflow. Processing runs in your browser; the tool does not upload the input for conversion.
A practical workflow
- Paste a static SVG document. Use self-contained SVG without active or external content.
- Choose coordinate precision. Start with three decimals and use more precision for fine geometry.
- Compare the two previews. Run the optimiser and inspect the original/output appearance and measured bytes.
- Download the optimised SVG. Test it inside the website component where it will be used.
Try a concrete example
The following demonstration input is also available in the workspace. Replace it with your own data after checking the expected behaviour.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><rect x="10" y="10" width="100" height="100" rx="20" fill="#0022e1"/></svg>Start with a self-contained static SVG
The workspace accepts SVG text without scripts, embedded images, external resources, foreignObject or animation. Those restrictions keep the preview and optimisation focused on static vector artwork. If the SVG depends on external assets, prepare a self-contained version in your design workflow first.
Keep the viewBox and references meaningful
The viewBox is retained, and ID cleanup is disabled in this workspace. This helps preserve the coordinate system and internal references. It is still important to check gradients, clipping paths, accessibility labels and any IDs that your surrounding application references.
Precision can change geometry
Fewer decimal places can reduce size, but can also affect detailed curves and alignment. Compare both previews, then inspect the downloaded SVG at different sizes. The result reports actual UTF-8 byte counts; a negative percentage means the output grew rather than shrank.
If the result needs attention
Only self-contained static SVG is accepted. Scripts, foreignObject, external references and animated elements are rejected. Lower precision can change geometry.
Read the exact error before changing the input. Keep a copy of the original, reduce the sample when investigating a large file, and use the destination application to verify that the result has the meaning you intended. The tool processes the supplied data; it cannot infer an unstated application schema or project requirement.
For website delivery, check your PageSpeed report after deploying the actual asset. Use the Contrast Checker for text colours and the Favicon Generator for launch icons.
Sources and further reading
Turn the next step into a project
Need help with a brand identity, business website or launch assets? Explore SOPIDOTECH services and client projects, or discuss your brief.