Developer utility

Interactive SVG Studio

Optimize, recolor, reshape, and export SVG / React / Vue / PNG — entirely in your browser.

Drop .svg file here

or paste markup below

Browse file

Source SVG

Edit

Colors

#2563eb → #2563eb
#ffffff → #ffffff

Text

Export size (px)

ViewBox padding (0%)

Rotate (0°)

Flip

HorizontalVertical

Opacity (100%)

Stroke width

Corner radius (rects)

Path precision

Outline mode (fills → strokes)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" rx="22" fill="#2563eb"/><text x="50" y="66" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-size="52" font-weight="700" fill="#ffffff" text-anchor="middle">N</text></svg>

About this tool

What is SVG Studio?

Drop or paste SVG markup to strip editor metadata, empty groups, and noisy attributes, then export clean React (JSX props) or Vue SFC snippets without leaving the browser.

FAQ

Is the preview sandboxed?

Preview injects optimized SVG into the page for visual check. Only process SVGs you trust — same as opening an SVG file locally.

Will this remove all Inkscape data?

Common inkscape/sodipodi attributes and metadata blocks are scrubbed. Complex multi-namespace documents may need a second pass in a dedicated SVG optimizer.