Small tools. Better flow.

SVG studio

Optimize SVG, adjust color and size, or convert it to JSX.

Usage guide

Your input stays in this browser.

Input & options

500 KB, up to 3,000 elements; shapes, paths, and gradients supported

View code examples ↓

Result

Your result will appear here.

Code examples

Starting points for your own code. Run them in the environment shown below.

Node.js 22+ · ES module (.mjs)

Current inputs apply only to fields used by the example. Selected files are not embedded.

Install dependencies

npm install svgo
import { optimize } from "svgo";
const svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="#4a8052"/></svg>';
console.log(optimize(svg, { multipass: true }).data);
// Optimization is not sanitization. Sanitize untrusted SVG before rendering.

Put it to work

Paste an SVG icon, set width to 48 and color to #b6ebbd, then download it.

Details that matter

Format and meaning

Preview uses an inert image. Scripts, event handlers, and external references are removed.

Using it correctly

Inspect the result after optimization. Some advanced filters and font features are unsupported.

Common pitfalls

JSX conversion translates attribute names from a security-filtered SVG.

Supported scope and limits

500 KB, up to 3,000 elements; shapes, paths, and gradients supported

Split inputs that exceed the limit. If a format or algorithm is unsupported, choose a tool that matches your requirements instead of silently changing the format.