April 26, 2019

Inkscape: Vector Graphics For Linux - page 3

Raster vs. Vector

  • February 22, 2005
  • By Rob Reilly

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


  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 line. I clicked on the little right arrow on that line and expanded it to show the and 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.

Most Popular LinuxPlanet Stories