Inkscape: Open Source Drawing for SVG
I recently ran across Inkscape, an open source very high-quality graphics editor that can output SVG that I’m blown away by. Even better, it runs on Linux, Windows, and Mac OS X. From the Inkscape website:
[Inkscape is] an Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.
Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. We also aim to maintain a thriving user and developer community by using open, community-oriented development.
Here’s a screenshot looking at one of the samples, a vector image of a car; there are a huge number of great tools in this beastie:
Screenshot of Inkscape showing vector image of car
One of the coolest features of Inkscape is it can take a bitmap image, and do tracing of the edges to create a vector representation! Vector images are inherently more “impressionistic”; they are for more illustration type purposes. I decided to take this feature for a spin and took a photograph I have of myself and do edge detection. Here is the photograph before, loaded into Inkscape ready to process:
Inkscape with bitmap, non-vector photograph
Here are the results after playing around with the various options; on the right-hand side of the screen is the options dialog that you can use to fiddle around with the various settings for edge detection:
Screenshot of Inkscape with traced, vector representation
Now, I can save this into an SVG file suitable for the web. I could then edit the markup, or bring it onto a web-page. More on embedding SVG in a future post.
One of the strengths of SVG is that it is a file format suitable for exporting such things; while the Canvas tag is great for having a canvas that JavaScript can draw onto, you can’t easily export illustrations into calls to a Canvas as you can with SVG.
