DEV Community

Discussion on: Do you make your SVG using code? or using software?

ahferroin7 profile image
Austin S. Hemmelgarn

Unlike HTML (which you absolutely should be writing by hand from the beginning so that you don't get tons of crap in the code from an editor), vector graphics (all types, not just SVG) are best started using a dedicated vector graphics editor. HTML layout is easy to follow from the code because the exact markup correlates directly to the structure it's creating (IOW, it's structured just like the resultant document will be), but the same is not true of SVG, so it's easiest to just work with it graphically.

Personally, I'm fond of Inkscape for this, but Corel Draw and Adobe Illustrator are both very widely used in this area (given the minuscule amount of design work I actually do, I can't justify shelling out the money for either of them, so I use Inkscape).

Depending on the exact type of SVG you're going for though, you might find a specific program dedicated to the particular type of image you're creating easier to use (for example, if you're doing diagrams or flow charts, Dia or Visio might be worth using as a starting point).

Once you've got the initial image, you should generally clean it up a bit by hand before using it. This brings up one of the things I like about Inkscape, namely that it lets you directly edit the SVG markup and then see the results directly without having to save the image as a file first.

I would, however, encourage you to learn to read, understand, and ideally write SVG markup directly. Having a solid understanding of how the markup itself works will make it easier to work with at a high-level too.

kr4idle profile image
Pete Steven

And Inkspace is open source, which means you support free software.