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:
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!
SVG Editor Vector Paint is a drawing program, with a simple yet powerful interface, that lets you draw points, lines, curves and shapes. Path Reorient Edit Open. The 'Add/Remove Points' tool allows you to add or remove points from an 'SVG Path'. Click on the outline of a Path to add a new point. Click on a selected point on the Path to delete it.
The idea that SVG is just markup tickles some developers just right.
You can literally learn even the obtuse-looking-at-first SVG
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
Svg Path Editor Free
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.
The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It's a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason to the rhyme. I'm no expert here, but I thought it would be fun to dig into.
Here's an example of a medium-complexity path, I'd say:
We could reformat it to start making sense of it (still valid code):
The letters are commands. The numbers are passing values to those commands. All the commas are optional (they could be spaces).
For example, that first command is M. M says, in a metaphorical sense, pick up the pen and move it to the exact location 213.1, 6.7. Don't draw anything just yet, just move the location of the Pen. So that if other commands do drawing, it now starts at this location.
M is just one of many path commands. There are 18 of them by my count.
Many (but not all of them) come in a pair. There is an UPPERCASE and a lowercase version. The UPPERCASE version is the absolute version and the lowercase is the relative version. Let's keep using M as an example:
M 100,100means 'Pick up the pen and move it to the exact coordinates 100,100'm 100,100means 'Move the Pen 100 down and 100 right from wherever you currently are.'
Many commands have that same setup. The lowercase version factors in where the 'pen' currently is.
Let's look at two absolute commands:
Followed by a relative command:
Just like the M and m commands, L and l take two numbers: either absolute or relative coordinates. There are four other commands that are essentially simpler versions of the line commands. They also draw lines, but only take one value: horizontal or vertical. When we used l 25,0 we could have used h 25 which means 'from where the pen currently is, draw 25 to the right. More succinct, I suppose. It's bigger brother H, as we could guess, means to draw to the exact horizontal coordinate 25. V and v move vertically absolutely and relatively as you'd surely guess.
Check out this Chris Nager demo in which he draws a cross in an extremely tiny amount of code, thanks to relative coordinate drawing:
See the very last character Chris used there? Z. Z (or z, it doesn't matter) 'closes' the path. Like any other command, it's optional. It's a cheap n' easy way to draw a straight line directly back to the last place the 'pen' was set down (probably the last M or m command). It saves you from having to repeat that first location and using a line command to get back there.
Let's look at the commands we've covered so far.
So far we've looked at only straight lines. Path is a perfectly acceptable element and syntax for that, although it could be argued that elements like might have an even easier syntax for straight-line shapes, if slightly more limited.
The superpower of path is curves! There are quite a few different types.
Remember the first bit of example code we looked at used a lot of C and c commands. Those are 'Bezier Curves' and require more data do their thing.
The C command takes three points. The first two points define the location of two bezier curve handles. Perhaps that concept is familiar from a tool like the Pen tool in Adobe Illustrator:
Svg Path Editor Software
The last of the three points is the end of the curve. The point where the curve should finish up. Here's an illustration:
The lowercase c command is exactly the same, except all three points use relative values.
The S (or s) command is buddies with the C commands in that it only requires two points because it assumes that the first bezier point is a reflection of the last bezier point from the last S or C command.
The Q command is one of the easier ones as it only requires two points. The bezier point it wants is a 'Quadratic' curve control point. It's as if both the starting and ending point share a single point for where their control handle end.
We might as well cover T at the same time. It's buddies with Q just like S is with C. When T comes after a Q, the control point is assumed to be a reflection of the previous one, so you only need to provide the final point.
Svg Path Editor File
The A command is probably the most complicated. Or the require the most data, at least. You give it information defining an oval's width, height, and how that oval is rotated, along with the end point. Then a bit more information about which path along that oval you expect the path to take. From MDN:
there are two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at negative angles or positive ones, which essentially picks which of the two circles you will travel around.
Joni Trythall's graphic explaining A from her article on SVG paths is pretty clear:
Drawing SVG
Vecteezy Editor
Vectr
Janvas
Svg Path Editor Free
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.
The element in SVG is the ultimate drawing element. It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute. The value it has is a mini syntax all to itself. It can look pretty indecipherable. It's a ton of numbers and letters smashed together into a long string. Like anything computers, there is a reason to the rhyme. I'm no expert here, but I thought it would be fun to dig into.
Here's an example of a medium-complexity path, I'd say:
We could reformat it to start making sense of it (still valid code):
The letters are commands. The numbers are passing values to those commands. All the commas are optional (they could be spaces).
For example, that first command is M. M says, in a metaphorical sense, pick up the pen and move it to the exact location 213.1, 6.7. Don't draw anything just yet, just move the location of the Pen. So that if other commands do drawing, it now starts at this location.
M is just one of many path commands. There are 18 of them by my count.
Many (but not all of them) come in a pair. There is an UPPERCASE and a lowercase version. The UPPERCASE version is the absolute version and the lowercase is the relative version. Let's keep using M as an example:
M 100,100means 'Pick up the pen and move it to the exact coordinates 100,100'm 100,100means 'Move the Pen 100 down and 100 right from wherever you currently are.'
Many commands have that same setup. The lowercase version factors in where the 'pen' currently is.
Let's look at two absolute commands:
Followed by a relative command:
Just like the M and m commands, L and l take two numbers: either absolute or relative coordinates. There are four other commands that are essentially simpler versions of the line commands. They also draw lines, but only take one value: horizontal or vertical. When we used l 25,0 we could have used h 25 which means 'from where the pen currently is, draw 25 to the right. More succinct, I suppose. It's bigger brother H, as we could guess, means to draw to the exact horizontal coordinate 25. V and v move vertically absolutely and relatively as you'd surely guess.
Check out this Chris Nager demo in which he draws a cross in an extremely tiny amount of code, thanks to relative coordinate drawing:
See the very last character Chris used there? Z. Z (or z, it doesn't matter) 'closes' the path. Like any other command, it's optional. It's a cheap n' easy way to draw a straight line directly back to the last place the 'pen' was set down (probably the last M or m command). It saves you from having to repeat that first location and using a line command to get back there.
Let's look at the commands we've covered so far.
So far we've looked at only straight lines. Path is a perfectly acceptable element and syntax for that, although it could be argued that elements like might have an even easier syntax for straight-line shapes, if slightly more limited.
The superpower of path is curves! There are quite a few different types.
Remember the first bit of example code we looked at used a lot of C and c commands. Those are 'Bezier Curves' and require more data do their thing.
The C command takes three points. The first two points define the location of two bezier curve handles. Perhaps that concept is familiar from a tool like the Pen tool in Adobe Illustrator:
Svg Path Editor Software
The last of the three points is the end of the curve. The point where the curve should finish up. Here's an illustration:
The lowercase c command is exactly the same, except all three points use relative values.
The S (or s) command is buddies with the C commands in that it only requires two points because it assumes that the first bezier point is a reflection of the last bezier point from the last S or C command.
The Q command is one of the easier ones as it only requires two points. The bezier point it wants is a 'Quadratic' curve control point. It's as if both the starting and ending point share a single point for where their control handle end.
We might as well cover T at the same time. It's buddies with Q just like S is with C. When T comes after a Q, the control point is assumed to be a reflection of the previous one, so you only need to provide the final point.
Svg Path Editor File
The A command is probably the most complicated. Or the require the most data, at least. You give it information defining an oval's width, height, and how that oval is rotated, along with the end point. Then a bit more information about which path along that oval you expect the path to take. From MDN:
there are two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at negative angles or positive ones, which essentially picks which of the two circles you will travel around.
Joni Trythall's graphic explaining A from her article on SVG paths is pretty clear:
Svg Path Editor App
Here's written explanations of those curve commands.
Wanna see a bunch of examples? OK:
If you're looking in a recently-released Blink-based browser and you have a mouse, you'll see some hover animations! Turns out you can set path data right in CSS now. For example…
This SVG Path Visualizer is awfully cool!
Wanna know more about SVG? It's seriously cool I promise. I wrote a whole book on it. It's called Practical SVG and it's not very expensive.
