Original
Open an SVG or load a sample to see the original artwork here.
Cleaner SVG. Clear results.
Optimize your vector assets, compare the result, and export for the web or React.
Your SVG stays in this browser. This tool generates files; it does not publish or execute them.
Optimize and compare your SVG
Files and source stay in this browser. Optimization runs in a local worker.
0 / 1,048,576 input bytes
Source SVG
Paste XML or open a local SVG fileGenerated output
Optimize a valid SVG to generate outputOptimized SVG, React JSX, and data URIs appear here after you optimize a valid SVG.
Measured sizes
UTF-8 bytes · each format is measured separately
Original, optimized, JSX, and URI byte counts will be reported separately.
Only the SVG-to-SVG comparison measures optimization. URI size includes its encoding prefix; it is not shown as SVG savings.
Compare the artwork
Isolated image previews block scripts and external requests.
Optimized
The optimized artwork will appear after a valid SVG is processed.
The sandboxed preview is not a general-purpose SVG sanitizer. Unsupported effects, external resources, and embedded active content can look different here.
Optimization settingsBalanced, Compact, or an explicit custom configurationBalanced
Open an SVG file or paste SVG source to begin.
All source processing stays in this browser.Try an SVG example
Load a local sample to explore common vector features.
Gradient, mask, and clipping
Compare referenced vector effects and their IDs.
currentColor and CSS variables
Check how theme-dependent colors and inline styles are retained.
Unicode and accessible text
Keep the title, description, and their ARIA references.
Optimize, then compare
Open an SVG or paste its source, choose a preset, and review the original beside the optimized preview. Balanced keeps the viewBox, IDs, titles, descriptions, and accessibility information. Compact makes stronger changes to shapes, paths, metadata, and IDs, so inspect the artwork and references before exporting.
Understand the size change
Original and optimized SVG sizes use UTF-8 bytes. A negative reduction is reported as an increase. JSX and each data URI have their own size because component syntax and URI encoding add bytes; neither is counted as SVG optimization savings.
Preview is isolated
Both previews use sandboxed image documents with a restrictive policy. Scripts and external requests cannot run there. External resources, event handlers, foreignObject content, filters, animations, web fonts, or browser-specific SVG features may be omitted or look different. Review the source and final embedding environment.
Optimization is not sanitization
SVG is active XML. This tool flags unsupported active content and prevents JSX export when it detects scripts, event handlers, animated links, external or unresolved references, URL-base changes, or CSS that cannot be fully analyzed. It does not certify the downloaded SVG as safe for arbitrary websites, documents, or embedding contexts.
IDs and accessibility matter
Gradients, masks, clip paths, CSS, and ARIA labels can depend on IDs. ID cleanup is off by default. When enabled, SVGO can update references it recognizes inside the SVG, but the tool cannot discover references from surrounding HTML, stylesheets, or other files. Keep IDs when another document targets them.
React output is generated source
The JSX export uses an SVG AST-to-Babel-AST transformation, with React attribute names and object-form styles. TypeScript props are optional. Existing title, description, viewBox, and ARIA attributes are preserved when present; the component does not invent an accessibility label. Review and compile the output in your application.
Supported input and limits
Input must be a well-formed SVG XML document no larger than 1 MiB, with at most 20,000 elements and 64 levels of nesting. DOCTYPE declarations are rejected. Processing stops after 15 seconds; the entire document is parsed rather than sampled. Complex or nonstandard features may remain unsupported.