Browser-Based SVG Editors
One of the coolest things about SVG is that, despite all the powerful stuff it can do, it’s still readable code. Wanna draw a rectangle? It’s not a bizarre string of gibberish characters, it’s:
<rect x="50" y="20" width="300" height="100" />You’d call that markup, a declarative language. You can draw any shape that way, as well as declare and use things like gradients and even animations and interactivity. Plus, it’s not a proprietary format. You don’t need permission to use it. It’s an open specification!
The idea that SVG is just markup tickles some developers just right.
You can literally learn even the obtuse-looking-at-first SVG <path d="" /> syntax. It’s just coordinates! With instructions that explain how to move from coordinate to coordinate. Wanna draw a plus sign? It can be reduced as far as:
<path d="M2 1 h2 v1 h2 v1 h-1 v1 h-1 v-1 h-1 v-1 h2 z" />
Or have fun with preprocessors creating SVG from loops!
It tickles a certain type of developer into thinking… Hey! I could make an app that helps build and edit SVGs! Yes, indeed, you could. JavaScript has all the tools you need. It’s happy to cough up coordinate information about where you click and whatnot, and even drag-and-drop is a thing now. Combine ideas like this and you can imagine a full-fledged browser-based application for creating and editing SVGs.
The beauty of the internet is that because you definitely can build a visual app to create and edit SVG, many people have.
Perhaps predictably, there are even quite a few options! That’s right, totally free browser-based SVG (vector) based editing tools.
I think a lot of us considered a tool like Adobe Illustrator to be the king of the castle for vector editing. Or perhaps it’s open source brethren Inkscape. While those are still great tools, if SVG editing is what you need, you can gain some speed and save some money by checking out these options.
Most of the following require very little explanation. The toolbars give you access to drawing and manipulation tools. You change colors and drag things around and most of what you’d expect to be able to do. Of course some of the features vary. If you’re serious about finding one to do big work in, you should experiment with all of them.
Method Draw
SVG-edit
Vector Paint
Drawing SVG
Vecteezy Editor
Vectr
Janvas
Boxy SVG
RollApp / Inkscape
This one deserves a little explanation. You might have heard of Inkscape. The long-time open-source alternative to Adobe software, particularly Adobe Illustrator. Normally Inkscape wouldn’t warrant a place on this list as it isn’t browser-based. But it turns out, it can be!
RollApp is a service that helps you fire up Inkscape (and a variety of other apps) as essentially a pop-up browser window.
I mentioned at the top that if you’re serious about doing big work in any of these, you should experiment with them. That’s true. As most of these are free, and admittedly, I’ve never done a serious hard-day’s work in any of them, I’m resistant to tell you what’s best.
I can tell you what I do definitely trust though, another browser-based design tool called Figma. It’s in somewhat of a different category as it’s more for full-on design work than just SVG editing, but it’s certainly a vector-capable app. I literally do put in a hard day’s work in Figma and it works great. Another one to consider? Invision Studio, once it’s open to all.
