There is plenty you can do with SVG without any software at all. Assuming you have a good source of SVG images online, you could use them directly. But it’s pretty common that we’ll need to adjust them a bit. I know my most common workflow is to find something close to what I need from stock photography sites or icon sets or the like, and then manipulate it to be exactly how I want. Adjusting shapes, deleting stuff, changing colors, fitting the artboard, all that stuff. It’s a lot easier to do stuff like this with software that is made for it, rather than by hand in the code.
The most common software we’ve been using in this series is Adobe Illustrator ($19.99/month). Illustrator is big, robust software for Mac or PC. Loads of features. And it’s a bit like picking the guitar as the instrument you want to learn. There is loads of tutorials out there using it. There is loads of people out there using it you can turn to. Illustrator can SAVE AS in SVG, meaning it’s a native file format you can work with, which is pretty nice.
In all of the different software we look at, none of them output the SVG as optimized as you’d probably want it for the web. All of them insert some generic comments and metadata type stuff saying what software it was created in and such, which is completely useless for use on the web. Worse, actually, as it bulks up the file size which makes things slower. You’ll always want to optimize the SVG you get from any software (we’ll do a screencast on optimizing soon).
Inkscape is another popular option for SVG editing. I think that’s likely because it’s cross platform (work son Mac, PC, Linux) and it’s free. It’s also been around a long time and has a robust feature set. I find it a bit awkward though, primarily as a Mac user because the interface is so weirdly different than everything else I’m used to.
I’ve been liking Sketch, which is Mac only ($99). I particularly like you can select objects and groups and then “Make Exportable” and then SVG is an option to export as, which gives you cropped, perfectly usable SVG to use.
We also looked at iDraw (Mac $24.99 and iOS $8.99). There is also WebCode (Mac $39.99).
We didn’t specifically look at these in the video, but there are also some browser-based SVG editors that are pretty darn nice:
