How to optimise an SVG
- Paste the SVG code into SVG, or click Open to choose an .svg file, or drop one on the box.
- Read the size before and after in the status line, and switch to Preview to check it still looks right. Lower Decimal places for a smaller file; raise it if curves start to look off.
- Copy the optimised code or download it as optimized.svg.
Why SVGs from design apps are so big
Design apps save extra information so you can keep editing the file: layer names, guides, the app’s own settings, and numbers with six or more decimal places. None of it changes what the browser draws, so removing it can make a file much smaller; the status line shows exactly how much. Web servers also compress SVGs with gzip or Brotli on the way to the browser, and a cleaned file compresses better too.
Inline SVG or a file
Optimised SVG code can be pasted straight into HTML, which saves a request and lets CSS change its colours with fill: currentColor. Large or repeated graphics are better as separate .svg files, because browsers cache them. For a raster version for social media or apps that don’t accept SVG, use SVG to PNG.