getsvgeditor.com
SVG editor for live preview, React & PNG
I noticed that many existing online SVG editors have awkward UX, outdated 2010s-style designs, and generally don’t provide the modern, enjoyable experience I’d expect from a tool like this.
I wanted to build something different — a lightweight browser-based SVG editor with a modern UI, a clear live preview, and a smooth workflow that makes working with SVGs simple and enjoyable.
That’s how getsvgeditor.com came about.
The core idea is simple: paste or upload an SVG, see the source and preview side by side, edit the markup, and see the result instantly.
You can also export SVGs to PNG, React, and React Native.
Challenges I ran into
One of the biggest challenges was safely handling untrusted SVG code without breaking the features that make SVG useful. SVGs can contain scripts, animations, gradients, filters, embedded images, and other elements that need to be handled carefully.
A lot of work also went into details that aren't always visible to users: asset compression, minification, efficient JavaScript and CSS execution, and keeping the interface lightweight.
What I learned
Building the editor gave me a much deeper understanding of the SVG DOM and how browsers actually render SVGs.
I spent a lot of time dealing with things like viewBox, clipPath, mask, transforms, CSS sizing, and SVGs exported from Figma. I also learned how much unnecessary markup can end up in SVG files exported from design tools.
Over time, these problems became some of the main topics I write about on my technical blog.
What's next
I’m continuing to improve the editor and add new features.
Some of the things I’m working on include:
a built-in color picker for quickly changing SVG colors;
animated SVG examples and demos;
more useful tools for developers working with SVG code;
more technical content about SVG.
I’m also experimenting with content and SEO as a way to grow the product organically.
The project is still evolving, and I’d love to hear from other developers and designers who work with SVG:
What’s the most frustrating part of working with SVGs for you?
3 Comments
When working with vector assets in your projects, what export format do you end up using most often? Are you mostly copy-pasting raw XML, exporting to PNG, or generating React / JSX components?
Curious to hear from other devs: what’s the most broken or strangely formatted SVG you’ve had to debug recently? Was it an inline script, crazy transform matrices, or a missing
viewBoxfrom a designer export?Quick follow-up for developers and designers: What tools do you currently use when you need to quickly inspect or edit an SVG? Are you relying on Figma, dedicated desktop apps, or inline code editors?