Tutorial: What is a Vector Graphic


Average: 5 (1 vote)

This tutorial will provide a brief introduction into the world of vector graphics, their differences from traditional rastorized graphics, and some advantages or disadvantages between the two types of graphics. To understand vector graphics, a simple explanation of a vector is required. A vector is commonly thought of as a point in space, or a node that also has a direction or amplitude associated with it. Typical image graphics that are often used on the web are saved as bitmaps, jpegs, gifs, or pngs. These files may each use different color depths, color libraries, and compression methods, but they all do one thing the same; they save information for each and every pixel in the image. This means that they often follow one simple rule; the larger the image, the more pixels there are and the larger in size the image will be. These images also suffer from pixelation if they are made larger, because their pixel information is only as good as each and every pixel that was saved in the image. This can often produce issues when printing large posters, creating large signs, zooming into images, etc as the detail is lost.

Zoom in or blow up any Bitmap, and it's Pixels will be Seen

Vector-based graphics are different because instead of saving an image pixel-by-pixel, they are saved as nodes, paths, and fill information. The displaying software is actually told how to draw the image using points, shapes, path information and colors. Instead of rendering every pixel of the image, the software showing the vector image just needs to decode the information. For example, if a traditional bitmap image contains a black circle that is 1000 pixels in diameter, the software needs to decode every pixel. A vector graphic can be decoded and is essentially redrawn by giving the software with only this information: Circle at XY, Filled in Black, 1000 Pixel Diameter. That's all it takes! The resulting vector file is tiny in comparison to the bitmap that performs the same thing. Now comes the next advantage to a vector graphic. No matter how big the circle is made or how far it is zoomed into, the circle will be re-drawn by the software and appear as a nice, smooth circle.

Instead of Every Pixel, Nodes are Stored in Vector Graphics

Vector art is becoming more and more common because of its scaling benefits and often small filesizes. As computer, tablet, and cell-phone displays are built with higher and higher resolutions, vectors can scale up and still look good. A company's logo when drawn and saved as a vector can be used on its website, as well as submitted to a clothing company for T-shirts, or sent to a sign company to print and build a 20 foot sign! A vector format that has become very popular is the .svg file. SVG stands for 'scalable vector graphic' and is an open standard. If you open the file to view it's source, you may discover that you can almost make sense of much of it, very similar to the code used to create a web page. This is much different than all the data used to render a bitmap file. SVG files can even be opened directly by web browsers such as Internet Explorer or Google Chrome.

The Vector Image Stays Smooth When Enlarged!

Vector art does come with disadvantages. Because images are saved as nodes and paths, photograph quality images or complexly shaded art may be difficult to reproduce as a vector. The amount of nodes used to produce a complex photograph will be exponentially larger than the couple nodes used to create a simple shape. Due to this, vectors are not used to produce things such as realistic photographs, but often graphics with a more cartoon-looking appearance. Vector graphics are often colored with solid color or gradient fill commands, so small details are often lost because they are not rendered pixel-by-pixel. Another disadvantage to vector art is that it may sometimes appear different depending on the software used to display it. This is because the software is essentially re-drawing the vector file. This is much like how web pages may look slightly different in Internet Explorer then FireFox, but it is getting better as SVG standards are adopted and followed by software companies.

If you wish to begin creating your own vector art, some of the most common vector-based art software packages are InkScape and Adobe Illustrator. That's your brief introduction to the world of vector graphics!


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
This question is to verify that you are a human.
Question text provided by textcaptcha.com

Share This!