Thursday, August 28th, 2008

Inkscape: Open Source Drawing for SVG

Category: SVG

<>p>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

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

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

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.

Related Content:

Posted by Brad Neuberg at 5:45 am
7 Comments

++++-
4.5 rating from 25 votes

7 Comments »

Comments feed TrackBack URI

I’ve been using Inkscape for about a year now and it’s a fantastic tool for application developers. One thing it excels at is in allowing you to finesse artwork at the pixel and sub-pixel level, which makes it ideal for creating icons and small (button-size) graphics at pixel-level detail, while offering all the power that comes with a vector-based model for artwork.

I originally started with the Linux version, which provides a well-integrated experience on that OS. On Mac, however, it’s a bit cumbersome because it runs inside the X11 window environment which uses the traditional Linux/PC keyboard shortcuts, so you are constantly fumbling to remember the right key combinations for common operations like copy and paste, etc.

In spite of that, it’s still my tool of choice when it comes to creating artwork.

Comment by broofa — August 28, 2008

As someone that has used various graphic design tools over the years, I’d like to say that while InkScape is on the track to being a good vector illustration tool, I have found that it currently cannot handle complicated graphics containing thousands of points like FreeHand and Illustrator (though even FreeHand gets slow at that point). Still, for less complicated projects like icons, web page graphics, simple technical drawings, etc., InkScape works fine and is probably the best free vector illustration tool out there right now.

Comment by RSarvas — August 28, 2008

You might also want to check out the inkscape tutorials weblog at http://inkscapetutorials.wordpress.com/
(no affiliation)

Comment by pothoven — August 28, 2008

Inkscape is a great tool, I use it frequently for logo/icon/button designing, but as RSarvas said it can become prohibitively slow on complicated svg’s. Here’s too hoping performance improvements are at the top of their list for future releases.

Comment by tj111 — August 28, 2008

As a designer and part illustrator, my software of choice is Inkscape! I love this software – quick updates, good performance (in most areas), easy to use – but although most users of Adobe Illustrator will look down upon it – Inkscape hasn’t even reached a 1.0 release and there is amazing work being put into the development. At this rate (as long as their continues to be a strong community of us designers that use it and contribute ideas) Adobe will be looking to it for features…

Comment by willworkforart — August 28, 2008

Another vote here. Everything you need is there and most stuff (currently excluding filters, which aside from blur are a pain to set up) is there, easy to get started with but with enough options to satisfy even the most ambitious graphics artist.

As far as performence is concerned, I have to disagree with the posts above, even with very complicated paths (a 8000 polygon image works just fine) or large bitmaps (think 8000×16000), it remains pretty snappy. The only real performance issue I’ve found so far is when using filters. While performance is fine at 100%, it slows down to a crawl when zooming.

Comment by Hans Schmucker — August 28, 2008

+1. Love inkscape.

Comment by threepointone — August 29, 2008

Leave a comment

You must be logged in to post a comment.