SVG Viewer & Editor
View, edit, optimize, and convert SVG files to React JSX, React Native, PNG, and Data URI — 100% browser-local.
Secure processing — your files are processed in your browser and never uploaded to any server.
SVG Code
1,232 chars
Drag & drop an SVG file to load it instantly
SVG·29 lines
BG:
100%
1.2 KB
File Size
29
Lines
1,232
Characters
Valid SVG ✓
Status
Frequently Asked Questions
Is my SVG uploaded to any server?
Never. All processing, conversion, and rendering runs 100% inside your browser.
What does Optimize do?
Removes comments, metadata, whitespace, and editor-specific attributes to minimize file size.
How does the React export work?
SVG attributes are camelCased (e.g. stroke-width → strokeWidth) and wrapped in a functional component.
Can I export a high-res PNG?
Yes. Choose 1×, 2×, or 3× scale in the PNG tab. The canvas renders at that multiple of the SVG intrinsic size.
Pro Tips
- Drag & drop an .svg file directly onto the editor to load it instantly.
- Use Prettify before Optimize to keep the code human-readable during development.
- The Data URI tab gives you a CSS-ready background-image value — no extra tools needed.
- For best PNG quality, use 3× scale for icons smaller than 64 px.
- Paste minified SVG from a bundler and click Prettify to inspect it visually.
Looking for more asset tools?