Tool reference

SVG Optimizer

beta

Minify SVG vector graphics, strip XML metadata/editor comments, round numeric path coordinates, and convert SVGs into React components.

Open tool Back to docs

Quickstart

Use this when you want the shortest path from input to a useful result.

Paste your raw SVG code into the input panel.

Toggle optimization rules (e.g. Round Floats, Strip XML).

Copy the minified output or switch to React Component mode.

Best for

Common situations where this tool fits naturally into the workflow.

Clean up an SVG exported from Figma or Illustrator to remove editor garbage tags.
Convert raw SVG markup into a copy-pasteable React TypeScript component.
Reduce the bundle footprint of embedded vectors by rounding float precisions.

Common tasks

Concrete ways this tool is typically used in day-to-day workflows.

Clean Figma SVG metadata

Paste a Figma SVG export. Toggle 'Strip Designer Metadata' to remove tags like <metadata>, <desc>, and attributes like x, y, and version.

Reduce file size by rounding paths

Toggle 'Round Float Values'. Floats in path commands (like cx=50.12345) are rounded to 2 decimal places, reducing file size by up to 40%.

Convert SVG to React component

Toggle 'Compile React Component'. Attributes like stroke-width are converted to strokeWidth, and the code is wrapped in a functional component.

Examples

Real inputs and outputs that show how the tool behaves.

SVG Minification

Remove whitespace, comments, and metadata.

Raw SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <!-- Logo -->
  <circle cx="50" cy="50" r="40" />
</svg>

Optimized SVG

<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40"/></svg>

Features

What this tool includes and what each capability is for.

Minifier

Removes unnecessary spaces, tags, attributes, and comments.

React compiler

Translates attributes to camelCase and wraps in React.FC.

Visual preview

Real-time rendering checks of optimized SVG code.

Precision control

Rounds coordinate floats to clean up path decimals.

Workflow

Follow this path to get from input to output quickly.

Paste your raw SVG XML in the left text panel.

Select your target options (clean rules, float precision, react format).

Verify rendering on the preview tab and copy the optimized code.

Caveats and tips

Things to keep in mind before relying on the output in a larger workflow.

Caveats

The React Component compiler performs basic attribute substitutions (like stroke-width to strokeWidth). Complex styles or masks may require manual adjustments.
Ensure the input code is a valid <svg> tag sequence before optimization.

Tips

Use the 'Preview' tab to verify that the optimized vector renders exactly the same as the original.
Toggle options one-by-one to see how they impact size reduction metrics.