Paste SVG code or open an .svg file and the picture appears next to its code. Edit the code and the preview redraws as you type. Switch the background to check transparent areas, zoom in, list every path command, strip editor clutter, then download the result as SVG, PNG or a React component.
| Format | Use it for |
|---|---|
| SVG (cleaned) | Websites, icons, logos; smallest file |
| PNG at 1x to 4x | Places that do not accept SVG, such as some email clients and social posts |
| React component (JSX) | Using the graphic inline in a React or Next.js project |
Updated
A code view and a live preview side by side. Nothing is uploaded: the file is read and drawn by your own browser, and the preview is shown as an image so any script inside the SVG cannot run.
An SVG file is text that describes shapes. The svg element sets up a coordinate system with its viewBox: viewBox="0 0 24 24" means the drawing uses a 24 by 24 unit grid, whatever size it is shown at. Inside, elements like rect, circle and path draw on that grid with fills and strokes.
Most icons are made almost entirely of path elements. A path's d attribute is a list of drawing commands: M moves the pen, L draws a straight line, C draws a cubic curve, A draws an arc and Z closes the shape. Upper case letters use absolute coordinates; lower case are relative to the last point. The inspector on this page spells each one out.
Design tools save information that helps them reopen the file: layer names, editor settings, guide positions and coordinates with six or more decimal places. Browsers ignore all of it. Removing it and rounding numbers often cuts the file size noticeably, which matters when the same icon appears on every page.
This page does a conservative clean-up that should never change how the picture looks. For deeper changes, such as merging paths, the SVG optimizer tool goes further.
Any modern browser opens SVG files directly, but it only shows the picture. To see the code and the picture together, open the file in this viewer with the Open file button or drag it onto the code box.
No. The file is read by your browser and drawn locally. Nothing you open or type here is sent to a server.
The most common causes are a missing xmlns="http://www.w3.org/2000/svg" attribute on the svg element, a viewBox that points away from the drawing, or white shapes on a white background. Try the checkerboard background and check the error line under the preview.
Comments, the XML declaration, doctype, metadata blocks, editor-specific attributes from tools like Inkscape, Sketch and Serif, and empty groups. It also rounds decimals to the precision you choose. It does not merge paths or change shapes, so the drawing should look the same.
Copy the JSX output. It converts attributes to React names, such as stroke-width to strokeWidth and class to className, turns style strings into objects and passes any props you give the component through to the svg element.
Related: SVG optimizer, SVG to PNG converter, PNG to SVG converter, Free SVG icon libraries compared, All free tools.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.