A Guide to Linux Graphics Software 01: bitmap vs vector

Posted by Greg Laden on August 6, 2008
(10)
More »

Graphics software for Linux is superior to most other software for several reasons. Since the Linux system is inherently more efficient than other systems, memory-hungry graphics operations will always run faster, better, and more reliably on a Linux box than on, say, a Windows box, all else being equal. Day to day graphic needs can be met with a wider range of software on Linux than on other systems. Most of the available applications are OpenSource, so not only are they free and easier to install, but no puppies were mutilated during the production of the software.

The purpose of this sequence of posts is to assemble basic information for the Noob Linux User about what software packages you should consider installing. In this first post, we will look only at the graphic files themselves, mainly at the two distinct types of graphics that you must know about before moving on to any other topics: Pixel, or bitmap graphics on one hand vs. vector graphics on the other.

This distinction applies to all operating systems so if you are a Windows user this will still be useful. You don’t need to know any of this if you are a Mac users because Mac’s just work, and the user only needs to know how to click on things.

But seriously….

There are two kinds of graphics, and thus roughly two kinds of graphics programs (though this is an oversimplification): pixel/bitmap and vector. Pixel or bitmap based graphics are pictures made up of dots, and vector based graphics are pictures made up of commands written in a programming language that tells a rendering machine (software or hardware) about specific shapes and where to put them. This is a fundamental difference that must be understood.

Here, I used a vector based graphics program to draw a thick line segment:
i-f62e2f2fb76e01ac8e81c9db2a34cfff-graphics_01_aline.jpg

I then exported this graphic to a bitmap format and opened the resulting file with a bitmap graphics program:

i-0d8a2ca4a588744dcebd12e022a75242-graphics_02_both.jpg

Notice that the lines look the same. However, they are not the same. The vector line is made, from the user’s point of view, of a small number of points that are connected by curves. So, if I use the correct tool (chosen with the mouse) to click on the line, I can move the points and change the shape of the line. Here, I have done this and you can see the points that define the line highlighted and note that the line shape has changed:
i-926ff67edaa5dc7a20238e2d9bd472b5-graphics_03_curve.jpg

Note that these curves can be made more curvy or less curvy (or the direction of the curve can be changed) by moving the levers with the red dots on them, which are more clearly shown in this closeup:
i-bab3c7153aa48a832b4ec8afcb5240bb-graphics_04a_closeup.jpg

In the bitmap/pixel graphic, by contract, the line consists of several hundred black dots arranged to appear to be a line on a white background. There are no tools to manipulate this line as a line because it is not really a line. It is merely a representation of a line. Here is what the line looks like when I use some bitmap graphics tools to play around with it:
i-687d6e4cf95e72cf902f5eee36179d9b-graphics_04_smudge_bitmap.jpg

You can see that I’ve smudged (moved pixels) the line in a few places. In another location I’ve cut out a chunk of the line and moved it do a different location on the page. So I can do things with the line, but it is hard to manipulate it as a line. I’m merely doing things to pixels that happen to be laid out in such a way as to represent a line.

If I showed you the inside of the bitmap graphic file, it could look something like this:

700,700 — indicating the hight and width of the file in pixels

black dot at 100,300 — indicating the 2D
black dot at 100,301 — coordinates of the black
black dot at 100,302 — pixels.

…

black dot at 600,368
black dot at 600,369
black dot at 600,370

… but with several thousand lines each indicating a white or black dot and it’s exact two dimensional coordinate.

Now, there is no graphics file format that looks exactly like this, but you get the idea.

If I showed you the inside of the graphics file for the vector line, it would look like this:

xml version=”1.0″ standalone=”no”?>
svg xmlns=”http://www.w3.org/2000/svg” version=”1.2″>
Generator: Xara Xtreme 2.0, SVG Export Plug-In Version: 0.4 –>
Generated 2008-08-06 07:46:46 –>
not very useful exporter for now… –>
entity tag=”40″ –>
entity tag=”1″ –>
entity tag=”4114″ –>
entity tag=”4116″ –>
entity tag=”4124″ –>
entity tag=”80″ –>
entity tag=”41″ –>
entity tag=”1″ –>
entity tag=”42″ –>
entity tag=”1″ –>
entity tag=”45″ –>
entity tag=”53″ –>
entity tag=”4031″ –>
entity tag=”43″ –>
entity tag=”1″ –>
entity tag=”48″ –>
entity tag=”115″ –>
entity tag=”1″ –>
entity tag=”111″ –>
entity tag=”152″ –>
entity tag=”51″ –>
…
/svg>

That is actually a big portion of the file for the line as altered in the example I provide above, with parts that needed to be removed in order to not break the internet. It is much, much shorter than the bitmap file (of which I’ve only shown you a tiny bit).

One way to think about this is as follows: The vector graphic is a real line, and the pixel graphic is a picture of a line. In meatland (real life) you can take a picture of your roommate, or you can have your actual roommate standing there. If your roommate is standing there, you can say “OK, raise your arm up in the air and swing the dead chicken around over your head.” But to make the picture appear to be a person swinging a dead chicken around over their head would be difficult. Better to get the real roommate to do this foolish thing and take a new picture showing this behavior. Then post it on the web, of course.

Here is a concrete example of the difference. Below you can see the same words written out twice. The first time, they are written in a text processing program, displayed on a computer screen, then ‘photographed’ with a screen shot utility, and saved as a graphic. Go ahead and try to select individual words in the text. Like the text itself says, you can’t do it because it is not there! This text, even though it does not exist, is telling you the truth!

The next set of text is simply pasted from that original source into this blog post — as text. Go ahead and try to select some of the words with your cursor. You can do it! This text, which does exist, lies!
i-00120073f4723070254d38cac75ed229-a_picture_of_some_text.jpg

Try to select this text using your mouse.
You can’t do it because this is not text. This
is a picture of some text. You can download
this picture as a graphic, but you can’t manipulate
the letters as text because they don’t exist. Even
though you can see them.

(If you look closely, you can see that whoever wrote this text goofed before they fixed the text, but could not change the picture of the text without a lot of trouble. )

This distinction between vector and pixel also applies to PDF files, and this is a very important fact that many people do not appreciate. A PDF file of a document could consist of a number of instructions indicating where to put which letters/numbers, rule-lines, figures or graphics, etc. etc. In such a document most of what is displayed may be text shown in a particular font, formated in various ways. One could take this PDF file and run it through a conversion program to make the PDF into text, and you’d pretty much have the same document in terms of what is says, though you will loose the formatting.

But a different PDF document may consist of a series of scans (pictures, photographs) … bitmap graphics … of the pages of a previously printed document. In this case, the things you see as words on each page are bitmap representations of the words, not rendered text. So you can’t select a word, or copy a word using text manipulating tools. If you run such a document through a PDF to text converter you’d get nothing readable because even though you ‘see’ text, there is no actual text there. Just a picture of the text.

This is an important distinction for several reasons. For instance, if you have a bunch of PDF files in a directory on your computer and try to search through them for a certain string of text, you won’t find that text in the scanned-bitmap type of files even if it is “there.”

Bitmap/pixel graphics can be much larger than vector graphics because it is often possible to represent a fairly complex shape with very few vector codes. On the other hand, rendering (showing) a bitmap graphic is routine and easy for software, while rendering a vector graphic is not quite as easy.

Bitmap graphics are often compressed so that they take up less disk space and also less internet bandwidth. Imagine a graphic that shows nothing but whiteness (the picture of the line above but without the line, for instance). Since every pixel is identical, such a graphic can be represented by saying “put a white dot in each spot where a dot can be on this graphic of a certain size.” That is not going to take up a lot of room in a file!

Compression can involve a loss of data. For instance, let’s say that a bitmap graphic has dozens of colors in a complex pattern including lots of greens along the bottom of the graphic and lots of blues along the top. (A landscape showing the Irish country side. With sheep.) One way to compress this might be to average out the blues so instead of having, say, 11 shades of blue, you have only 3, and then specifying approximately which areas of the sky have each color. This would take a lot less data (and thus make for a smaller file) but the graphic would not look as clear.

Methods that compress files but do not reduce the information contained in the graphic are called “lossless.” Other than these lossless means of compression, all compression will destroy some of the data. Avoid compressing your original graphics …. compress only copies.

Vector based graphics (and PDF files) can include bitmap graphics as elements, thus adding even more confusion.

OK, now that we have this distinction clearly in hand, we can examine bitmap graphics software and vector graphics software separately. Stay tuned.

(10)
More »

Comments

  1. #1 mlf
    August 6, 2008

    Shouldn’t you be talking in terms of “vector” vs. “raster” graphics? Seems more appropriate in case people wonder if jpegs, gifs and tiffs are different beasts…

  2. #2 stelt
    August 6, 2008

    And one very popular file format for vector is SVG:

    See the broad spectrum of its applications at http://svg.startpagina.nl

  3. #3 Greg Laden
    August 6, 2008

    Raster is a perfectly good word to use here. Keep in mind, though, that if you don’t already know an svg from a jpg, then the word “raster” has no meaning.

    Yes, the format I display above is an SVG.

  4. #4 Greg Laden
    August 6, 2008

    Oh, and I should add: My only purpose here is to make the simplest of distinctions. A bitmap manipulating app will do the same basic stuff in the same way to a jpeg, gif, bmp etc. file. To those for whom the distinction beyond cropping and resizing, etc. becomes important, the bitmap/vector distinction is behind them.

    Later, however, I’ll provide a format cheat sheet of some kind.

  5. #5 JL
    August 6, 2008

    Adobe Acrobat allows you to convert scanned images (pictures) of text within a PDF document to text via its OCR feature. When you search the document for text, it will be found if the OCR worked properly.

    I don’t know if Linux PDF manipulators can do this.

  6. #6 Jeff Knapp
    August 7, 2008

    3D animation apps work in both realms. All of the interactive work (modeling, animating, lighting, shading are done with vectors, tangents, curves aka points, lines, polygons, surfaces, meshes, etc. Shading is done using procedural descriptions of surfaces that simulate how light interacts with those surfaces. At this point, raster images are then introduced in the form of texture maps that also help with the simulation of the look of surfaces. When all design and setup is done, these procedural – that is, mathematical descriptions of – graphics are then “rendered” using some of the most complex mathematics known to computer science to “paint” each pixel of a series of raster images – that is, frames of an animation – with a color. The ultimate expression of this is an image or an animation that is so visually believable, that it is indistinguishable from a photographed image. We call this “photo-realistic.”

    Unlike many commercial apps in other fields and industries, Linux actually does have pretty good support in the 3D animation and visual effects field. This comes from both, a legacy of when Silicon Graphics was THE big deal in the early days of digital visual effects (SGI machines ran their own flavor of Unix called, IRIX), and large animation and FX houses that have a strong need to develop their own in-house, proprietary tools – coders and developers love Linux because Linux is, at its heart, an OS “designed by engineers for engineers.” It is not, and I will state this emphatically, NOT ARTIST FRIENDLY.

    [rant]
    Most of us graphics types love the Mac because of its inherent fluid, visual approach to computing – something M$ has never been able to successfully replicate despite having blatantly copied so much from Apple over the years. We do not want to deal with command lines and code. We just want to do our art. We want it to work and work well without having to tweak under the hood all the time.

    If you are a typical car driver, you do not work under the hood of the car, you have no desire to do so, you have no desire to have to learn how to do so. You also don’t want to have to take it to the mechanic all the time or have to be in fear of needing one all the time due to frequent malfunctions. You simply want to get into your car and have it work reliably each time. Of course, some things do go wrong from time to time, and you do have to keep up with regular maintenance but, even that is easier and less troublesome with better designed cars. There is a reason why BMW, Volvo, Toyota are regarded as better, higher quality cars than say GMC, KIA and anything Chinese, Russian, or French – it’s because they are. They are better engineered, more reliable, more refined, and just work better.

    The same holds true for most computer users – artists included, we just want them to work, be trouble-free, easy to use and, when things go wrong, be easier to fix. This is what Apple has succeeded at doing – developing a system that is easier, more fluid, more transparent and trouble free than anything else out there. You may deride this as “hand holding” but, you know what, a system that just works and and does not get in the way of letting me do my work – this is what the Mac OS is for me. It doesn’t hold my hand, it just lets me get my work done with relative ease, is fluid and transparent, and relatively little trouble.

    If Micro$oft is the GMC or computing, and the Mac is the Mercedes, then Linux is the customized hot-rod. Until that hot-rod can be as refined and trouble-free as the Merc, I will stay with the Merc. No matter how customizable Linux is or how much raw power it may efficiently utilize, if I cannot make effective use of it without a lot of hassle, trouble and work under the hood just to get it going, it is of little use to me.[/rant]

  7. #7 Jeff Knapp
    August 7, 2008

    3D animation apps work in both realms. All of the interactive work (modeling, animating, lighting, shading are done with vectors, tangents, curves aka points, lines, polygons, surfaces, meshes, etc. Shading is done using procedural descriptions of surfaces that simulate how light interacts with those surfaces. At this point, raster images are then introduced in the form of texture maps that also help with the simulation of the look of surfaces. When all design and setup is done, these procedural – that is, mathematical descriptions of – graphics are then “rendered” using some of the most complex mathematics known to computer science to “paint” each pixel of a series of raster images – that is, frames of an animation – with a color. The ultimate expression of this is an image or an animation that is so visually believable, that it is indistinguishable from a photographed image. We call this “photo-realistic.”

    Unlike many commercial apps in other fields and industries, Linux actually does have pretty good support in the 3D animation and visual effects field. This comes from both, a legacy of when Silicon Graphics was THE big deal in the early days of digital visual effects (SGI machines ran their own flavor of Unix called, IRIX), and large animation and FX houses that have a strong need to develop their own in-house, proprietary tools – coders and developers love Linux because Linux is, at its heart, an OS “designed by engineers for engineers.” It is not, and I will state this emphatically, NOT ARTIST FRIENDLY.

    [rant]
    Most of us graphics types love the Mac because of its inherent fluid, visual approach to computing – something M$ has never been able to successfully replicate despite having blatantly copied so much from Apple over the years. We do not want to deal with command lines and code. We just want to do our art. We want it to work and work well without having to tweak under the hood all the time.

    If you are a typical car driver, you do not work under the hood of the car, you have no desire to do so, you have no desire to have to learn how to do so. You also don’t want to have to take it to the mechanic all the time or have to be in fear of needing one all the time due to frequent malfunctions. You simply want to get into your car and have it work reliably each time. Of course, some things do go wrong from time to time, and you do have to keep up with regular maintenance but, even that is easier and less troublesome with better designed cars. There is a reason why BMW, Volvo, Toyota are regarded as better, higher quality cars than say GMC, KIA and anything Chinese, Russian, or French – it’s because they are. They are better engineered, more reliable, more refined, and just work better.

    The same holds true for most computer users – artists included, we just want them to work, be trouble-free, easy to use and, when things go wrong, be easier to fix. This is what Apple has succeeded at doing – developing a system that is easier, more fluid, more transparent and trouble free than anything else out there. You may deride this as “hand holding” but, you know what, a system that just works and and does not get in the way of letting me do my work – this is what the Mac OS is for me. It doesn’t hold my hand, it just lets me get my work done with relative ease, is fluid and transparent, and relatively little trouble.

    If Micro$oft is the GMC or computing, and the Mac is the Mercedes, then Linux is the customized hot-rod. Until that hot-rod can be as refined and trouble-free as the Merc, I will stay with the Merc. No matter how customizable Linux is or how much raw power it may efficiently utilize, if I cannot make effective use of it without a lot of hassle, trouble and work under the hood just to get it going, it is of little use to me.[/rant]

  8. #8 Jeff Knapp
    August 7, 2008

    Dang, double post. I apologize.

    –JK–

  9. #9 Greg Laden
    August 7, 2008

    JL: Yes, standard graphics tools treat PDF files as a sequence of photographs, so you can easily run PDF files through any one of several different OCR apps.

    Jeff: Just to be clear, you are probably right for 3D and maybe for animation and movies as well. But Linux is not a custom hot rod when it comes to 2D graphics, at all. (But, as with so much related to Linux, this conversation is going to be out dated in a year or so).

  10. #10 Ben Zvan
    August 7, 2008

    I’m glad you pointed out the existence of bitmaps in pdf files. I can’t tell you how many times I’ve had to send press-ready pdf files back to a customer because they down-sampled the images to 72dpi. Sure, it’s a smaller file, but it looks like crap when you print it out.