PNG
Rendered on a canvas at the size you pick. Transparent where the drawing is transparent.
Text set in a web font will not render unless the font is embedded or the text is outlined.
Pikkola SVG Studio, tool No. 15
Clean the drawing. Keep the shape.
A file out of Figma or Illustrator carries more than the drawing: comments, a metadata block, namespaces from three editors and coordinates with nine decimal places. This page takes those out, shows what went, and hands the file back in the format you need.
Open the studio
no upload
- 24
- rules, shown
- 4
- exports
- 4x
- PNG at most
- 0
- bytes uploaded
in 1,842 B
out 611 B
67% gone
Studio
Paste on the left, read the result on the right
Cleaning happens as you type. The preview is the cleaned file, not the original, so a broken path is visible before it reaches a repository.
SVG source
Drop an .svg file here
0 B
Preview
The cleaned drawing appears here.
The clean
Before0 B
After0 B
Saved0%
Every rule that changed something is listed with the number of things it removed.
Cleaned SVG
Convert
Four ways out of the same file
Everything below is built from the cleaned SVG above, so what you export is what you just read.
Data URI
Base64, ready for a CSS background or an img src. A third larger than the file itself.
React
A function component with the attributes in JSX spelling and the style string turned into an object.
Vue 3
A single file component: the drawing in the template, a style block if the file had one.
Reference
What the cleaner takes out, and why
| What | Where it comes from | Why it can go |
|---|---|---|
| <!-- --> | Hand edits and exporter notes | The browser never reads them. |
| <metadata> | Illustrator, Inkscape, Adobe | A licence and an author block are useful to a lawyer, not to a renderer. |
| inkscape:*, sodipodi:* | Inkscape | Editor state: guides, zoom, window position, page colour. |
| <g> with nothing in it | Every editor, after a layer is emptied | It draws nothing and holds nothing. |
| width, height | Figma, Sketch, Illustrator | A viewBox scales; a fixed size only gets in the way. Off by default when there is no viewBox. |
| 12.3456789 | Vector tools and tracing | Two decimals are under a thousandth of a pixel at any normal size. |
Why this one
The optimisers we used either uploaded the file or rewrote the drawing.
Nothing leaves the tab.
An icon set for an unannounced product is a confidential document with a shape. Cleaning it should not mean posting it to a service that keeps a copy for thirty days.
The report is the point.
A smaller file is easy to claim. This page names each rule, counts what it removed, and shows the byte total before and after, so a number can be argued with.
The export matches the frame.
React and Vue take the same cleaned markup, with the attribute spelling each framework wants. No component wrapper with invented props, no build step to run first.
No account. No upload. No copy of your drawing.
The file lives in a textarea and a blob URL that the tab holds in memory. Closing the tab throws it away.
Read the privacy noteQuestions
Asked while the path is half written
Is my SVG uploaded?
No. The file is read with the browser's file reader and parsed with DOMParser in the page. The preview is a blob URL held in memory, and the content security policy blocks every other origin.
Will cleaning change how the drawing looks?
It should not. The cleaner removes comments, metadata, editor namespaces and empty groups, and rounds numbers by at most a hundredth of a user unit. If you need exact geometry, set precision to the original number of places or leave the option off.
Why does the cleaned file still have ids?
Ids are referenced by url(#id) in gradients, clip paths, masks, filters and symbols. Removing them would break the drawing, so they stay. Renaming them is a separate job with its own risks.
How is the PNG rendered?
The cleaned SVG is given to the browser as a blob, drawn into a canvas at the size you choose, and taken out with toBlob. Fonts that live outside the file, such as a web font called by name, will not render; either outline the text or embed the font.
Does the React output keep my attributes?
Yes. Attribute names are converted to the JSX spelling, class becomes className, and a style string becomes a style object. Namespaced attributes such as xlink:href become xlinkHref. Anything the converter cannot map is left as written and the panel says so.
What about animations and scripts?
The cleaner keeps them. SMIL animation, CSS inside a style element and embedded scripts survive, because removing them would change behaviour. If you are embedding a file from elsewhere, look at it before you ship it.
Is there a size limit?
No hard limit, but the preview and the passes over the text work on the whole string, so a file above roughly 5 MB will feel slow. A data URI grows by a third on top of the file size, and browsers differ on how long a URI they accept.
Made by one person, free to use