Inkscape: Vector Graphics For Linux

By: Rob Reilly
Tuesday, February 22, 2005 10:39:22 AM EST
URL: http://www.linuxplanet.com/linuxplanet/tutorials/5757/1/

Raster vs. Vector

Just about everybody has heard of The Gimp.

It's a raster based graphics editor that's available for Linux and Windows. Other raster editors include Microsoft Paint, Adobe Photoshop and Ulead PhotoImpact. A graphic produced by The Gimp is just a bunch of pixels on the screen. As a matter of fact, if you take a swipe across your screen with the eraser tool, you'll be erasing a swath of pixels, whether it's a shape, line, color or whatever. There are no properties, links or intelligence built into any particular graphical element. It's also known as a bitmap.

Inkscape is different. It's vector based.

Here's how it works. Suppose you insert a filled square onto the screen of a vector graphics editor and then decide you want to change the fill color. That's easy. Just highlight the square and then call up the fill properties panel. Choose a new color from the color wheel and poof, new color on the square. You adjust the properties of the graphical elements, instead of just shuffling around the individual pixels and their colors.

Virtually every 2- and 3-D CAD system are vector based.

Inkscape is also an open source vector graphics editor that uses the SVG (scalable vector graphics) file format. This is neat because SVG is an evolving standard based on XML that can be massaged via programs, scripts or a simple text editor.

In this story we'll do a quick primer on how you can get up to speed on Inkscape. Along the way, we'll explore situations where a vector based graphic would be better suited for a job than a raster based picture. In spite of not being an XML or web development expert I think SVG will be important in the future. Read on and you'll see why.

Drawing With Vectors

If you can use The Gimp, you can use Inkscape.

Just remember that you are now dealing with objects...not pixels. Pushing vector objects around has it's advantages over raster. Here are several examples:

  • You can grab an object and move it around on the screen.
  • You can rotate or stretch objects to your hearts content.
  • You can highlight a group of objects and perform some task on the whole lot.

If Inkscape needs to be installed, Windows users can find a downloadable version at http://www.inkscape.org/win32-snap/. Likewise, Linux users can download binaries from Soureforge at http://sourceforge.net/project/showfiles.php?group_id=93438. Debian (and Debian based distribution) users can simply use their package management system to find and install the application.

Once I had it installed I could call it up from my KDE main menu (See Figure 1). I could also run it from the command line with: 

     $ inkscape

After the program started up, a new document appeared in the window ready for action. My object shape and text choices were on the left side. Flipping and rotating entities were handled by the icons just above the horizonal scale line. I clicked the magnifying glass with the piece of paper in it to expand the document to fill the window. It makes it easier to work with.

Adding a basic shape was easy.

I could choose filled squares, circles, stars and spirals by clicking on the shape and then clicking where the shape should go in the document window. When I clicked on the drawing, I continued to hold the left mouse button down to change the size dynamically. Release the button when it's the size you want.

Lines were created the same way, although there are three different line buttons. It's possible to draw freehand, Bezier curves/straight lines, and calligraphic lines, as well. Unlike raster drawings, you can move or stretch the lines using the handles, once they're positioned on the screen. To make handles appear on an object, click on an object followed by the handles button (right below the arrow button, left side).

Text worked as you would guess, although the default 12 point font, on the standard 8.5 x 11.0 inch document sheet needed to be enlarged. I reset the default font size to 40 points under the Text, Text and Font tabs. That gave a nicely proportioned font without need of arbitrary resizing.

To show how easy it is to get started with Inkscape and vector graphics, I drew my new logo using the package. The process was relatively straightforward.

Vectorize Your Logo

The following steps show my journey through a logo editing session using Inkscape.

Setup

  1. I opened a new document and under the File -> Document Preferences -> Page tabs adjusted the page size to width = 500 and height = 170. That was a good size for my Web page logo.
  2. I clicked the magnifying glass/page icon to enlarge the view.

Adding The Main Text

  1. After selecting the text button (on the left with a big A), I then positioned the cursor in the middle upper left quarter of the screen. I entered my name and followed that by selecting the arrow button (on the upper left).
  2. I clicked on the text and used the sizing handles to enlarge the text to take up about 1/5th of the screen.
  3. To make it bold, I highlighted the text and then hit the Text and Font dialog button at the top right. Here, the font, style and layout could be changed. I chose Bold followed by the Apply button.
  4. To make a shadow under the text I copied and pasted my name directly below the original text, then re-clicked on the copied text and shrunk the height to about 1/8th of the original using the height handle.
  5. To give a little slant to the shadow, I clicked on the shadow text twice to get to rotate mode and used the horizonal arrow (on the top) to skew the top to the right.

Adding Gradients To The Text

  1. Adding a gradient color wasn't so simple. First I re-selected the main text and hit the Fill and Stroke dialog (just left of the Text and Font button on the top) button.
  2. Under the Fill tab, I could have selected the no paint button (button with the x), the solid fill button (square solid grey button) or one of the gradients (middle button). I chose to make the top of my name text deep blue and gradually fade into bright red at the bottom.
  3. With the gradient tab activated, I selected the Edit button to bring up the Gradient Editor dialog box.
  4. To add blue at the top I clicked the Add stop button and then slid the RGB blue slider all the way to the right. I also slide the A slider all the way to the right to null out the fading (opacity) effect.
  5. To add red at the bottom I clicked the Add stop button and then slid the RGB red slider all the way to the right. I repeated the action of the A slider to get rid of the fading effect. The Gradient Dialog editor was then closed.
  6. With red and blue showing under the Linear gradient, I moved the end of the line (with a little box) closest to the red straight down to the bottom. I put the end of the line closest to blue at the top. Moving these points will position the colors in different ways.
  7. I had to adjust both ends vertically to center up the gradient between the two horizontal lines. These lines represent the top and bottom of the text. The multi-colored text appeared on my document as I worked. The Fill/Stroke dialog box was closed when I finished.
  8. I mangled the colors a couple of times. The only way I could get rid of the piles of gradients had I created was to click on the XML editor (to the right of the text button at the top) and delete the gradients. In my case they showed up under . I highlighted the linear Gradient line and then deleted them with the green/yellow X button. We'll see how to use the XML editor again in a minute.

Figure 2 shows the main text (blue and red) and the shadow text below.

Adding some perspective lines to my logo were as easy as selecting the Draw Bezier curves and straight line button (on the left) and then adding them to the document. Be sure to position the cursor for one end of the line then click, followed by the other end with a single click. Without moving the cursor off of the second endpoint, click again to make a straight line. If you move it one way or the other you'll get a Bezier curve. Perhaps not what we want.

After inserting the lines, you'll want to highlight them all again (with the shift key) and then hit the "Lower selection to the bottom (End)" button. That puts the lines behind the text so it looks right.

Finally, I wanted to add a "consultant" line below my name. Here's the easy graphical/XML way:

  1. I highlighted both the main text and it's shadow (shift key for multiple selects), then copied and pasted it below the original.
  2. Next I shrunk the consultant (still my name) text and it's shadow down to a size I liked. I re-highlighted the main consultant text.
  3. I fired up the XML editor again and the cursor bar went right to the <text id="text18868"> line. I clicked on the little right arrow on that line and expanded it to show the <tspan id="tspan18869"> and <tspan id="tspan=18871"> lines. Clicking on the 18869 line displayed the old text in the new "consultant" line.
  4. It was then a simple matter of clicking on the text and then editing it in the right hand window. If you size the XML Editor window to half the screen you can see the change happen in the document text, as you edit. Pretty cool. I edited the shadow the same way.
  5. The file was then saved under the name of newlogo.svg.

Just so you have an idea of how valuable the SVG/XML format can be, I opened newlogo.svg using vi. I searched for "Rob," which showed up in the main name text and it's shadow and then replaced it with "Mick." Next, I exited vi and called newlogo.svg up in Inkscape again. Low and behold there it was, "Mick Reilly," with all the right colors and proportions. Afterwards, I changed it back to "Rob."

Going one step further, I even changed the text using sed, the venerable, old stream text editor. The command line looked like this:

     $ sed 's/Rob/Jack/' newlogo.svg > newlogo2.svg

This time, in Inkscape I opened newlogo2.svg to find Jack's new logo. How is that for slick.

I'll bet that gives you some ideas.

There you have it. A new logo that took about 10 to 15 minutes to create. Figure 3 shows a view of the finished product within Inkscape.

Some Advanced Vector Operations

Two other vector operations need to be covered before we briefly look at how you can use Inkscape and SVG files.

A very interesting feature you can use is to make text follow a line. Any line.

  1. Open a new document and draw a curvy line across the page using the Freehand lines tool button.
  2. Next, add some text using the Create and edit text button.
  3. Select the text, then while holding the shift key, select the line.
  4. To make the text serpentine along the line click the Text button at the top followed by the Put on Path menu item.
  5. Poof, the text is now following the line.

Try it yourself. You can even do it with a spiral.

How about doing some Boolean operations on shapes?

For example, you can select two overlapping red filled circles and then use the exclusion menu item under the Path button to combine the circles. The area where the circles overlap is excluded from the result and so is removed from the shape. If you move the combined circle shape on top of a blue filled circle, you'll be able to see the blue circle through the hole.

Inkscape has a multitude of Boolean operations that can be used including union, difference, intersection, ect. You can also do other operations like break apart a combined shape or creating insets and offsets of shapes.

Using Inkscape and SVG

Inkscape and vector graphics are great tools for constructing re-usable graphics. They also save time when it comes to making graphics that need to be tweaked or changed. And, as we've seen modifying the graphics can easily be accomplished manually using a simple text editor or even through programming.

That's the real beauty of SVG, the ability to change the characteristics of the graphics by manual or automated ways.

It's not all fun and games though, because there are some costs or inconveniences associated with using vector elements. The two big disadvantages, right now, are:

Raster graphics can handle the subtle differences in color and contrast that is inherent in a photograph or scanned image. You might say that raster images are real life pictures, like photos. Vector graphics are generated or programmed images. You build them from lines, shapes, colors, etc.

Raster can look real, vector usually looks mechanical and precise.

So for realistic scenes, portraits, nature and the like you can use a raster image. For web graphics, logos, signs, or other scenes along these lines you'd use vector images. Especially they needs to be changed much.

Right now, in order to view those files directly in a browser, it has to be SVG enabled. I downloaded version 1.8b of Mozilla so I could view my handiwork.

Microsoft's Internet Explorer supposedly is able to handle SVG graphics through the use of plug-ins. I have not tried it.

There is salvation for limited browser support, because Inkscape can export the widely used the Portable Network Graphics (PNG) file format. This is a universally used bit-mapped format for Web images. Inkscape will also export Adobe Illustrator (.ai), regular postscript (.ps) and encapsulated postscript (.eps). PNG can be converted to other bitmaps using The Gimp or XV.

It's painless to convert the native SVG files over to PNG using Inkscape on the command line. Here's how I generated a 300 dpi PNG bit-mapped image from Jack's logo example (See Figure 4): 

     $ inkscape -export-png=newlogo2.png -export-dpi=300 newlogo2.svg

The original PNG file came out to 2083 X 708 pixels, so I crunched it down to 800 X 600 for display

As you can see, Inkscape has some pretty productive features. Let's wrap up our discussion with a little summary.

Graphics In The Future

We opened our discussion with the differences between raster and vector graphics images. Later, we walked through how to use the features of Inkscape to create basic geometric shapes. We also stepped through a real world example of designing a logo and how you might change it with the Inkscape editor, the built in XML editor, the common Linux text editor vi, and from the command line using sed.

Talk about options.

I think the best feature, that Inkscape offers over other graphics editors is the ability to work in vectors. All objects in a drawing (document) have characteristics and values that can be easily manipulated. The objects have intelligence.

That ability is what makes Inkscape so useful.

I'm sure you have lots of ideas that you'd like to try. Go ahead, load Inkscape on your machine and give it a spin or rather, draw. Explore and have fun.

In a very short time, I'm sure you'll be replacing The Gimp with Inkscape, for many of your repetitive graphics related chores.

I know I will.

Rob Reilly is a consultant, writer, and commentator who advises clients on business & technology projects. His Linux, portable computing, and public speaking skills-related articles regularly appear in various high-end Linux and business media outlets. For more tips visit his Web site at http://home.earthlink.net/~robreilly.

Copyright Jupitermedia Corp. All Rights Reserved.