Discuss Vector vs. Bitmap
There are 2 types of computer graphics, or general formats which are really important to know, in
which graphics are stored.
-
Bitmap - map of bits or grid of pixels
-
pixels are a collection of bits that form an image
-
Vector - images completely described using mathematical definitions
VECTOR (Inkscape) Vector drawings can usually be scaled without any loss in quality. This makes them ideal for
company logos, maps or other objects that have to be resized frequently.
-
EXAMPLE 1: (open file
vectorBitmap.png)
-
To the left you see the image itself and to the right you see the actual lines that make
up the drawing.
-
Each individual line is made up of a collection of points with lines interconnecting all
of them or just a few control points that are connected using so called bezier curves.
IT KIND OF REMINDS YOU OF CONNECT THE DOTS.
-
EXAMPLE 2 What is really neat is if you take an SVG file you've created in a program like Inkscape
or another illustrator, you can open a text editor, & "go behind the scenes" so to speak,
& edit the code/language so that object will appear differently. Say you create a square
in Inkscape - you can open it in something like TextEdit, and change the dimensions displayed
in the code and once you save the file in TextEdit and open it again in Inkscape, the new
dimensions will appear.
-
Demonstrate EXAMPLE2:
-
Open
redSquare.svg in Inkscape.
-
Say you create a square in Inkscape as shown here...
-
Open
redSquare.svg in TextEdit.
-
You can open it in a text editor like TextEdit...
-
At the very bottom of the file, there is a bracket entitled
rect fill with the color and dimensions of the shape defined. Change the color to black (#000000)
and change the dimensions from 288 for the width and height to 100.
-
Save as
blackSquare.svg in TextEdit.
-
Once you save the file in TextEdit as something else...
-
Open
NEWredSquare.svg in Inkscape and compare both files.
-
...and open it in Inkscape, the new color and dimensions will appear!
-
Formats often used FOR VECTOR
-
SVG
-
AI (adobe illustrator)
BITMAP (GIMP)
-
Consists of a matrix of individual dots (or pixels) that all have their own color (described
using bits).
-
Once they are enlarged to much, they look unnatural and blocky.
-
Reducing a picture too much can cause the image to lose its sharpness.
-
EXAMPLE (open): To the left you see a photograph and to the right an enlargement of that
photograph. As you can see the photograph consists of hundreds of rows and columns of small
elements that all have their own color. One such element is called a pixel -short for picture
element). The human eye is not capable of seeing each individual pixel so we perceive a
picture with smooth gradations. The number of pixels you need to get a realistic looking image
depends on the way the image will be used.
-
Formats often used FOR BITMAP