Image Formats for the Web – Vector Graphics

Vector graphics are the other type of graphic format other than the bitmap formats of gif, jpg, and png.  As we discussed in our previous post, the bitmap formats are a blob of data that is filled with pixels.  Not so with a vector format.  A vector file can be opened with a text editor.  What you find when opened will be an xml file you can read.  In a vector format, the editor describes where the shape line starts, where it ends, and what its attributes are, its color, etc.  All in readable text, not that you want to actually read the file, leave that to your browser.

Vector Graphics

The web standard for vector graphics is the .svg file format.  You create the .svg file in a vector graphic editor, save it away, and upload it to your web page, no messy xml to read.  Svg vector graphics is supported by all the major browsers. Although as usual Microsoft Internet Explorer, lags a little.  Vector editors can also convert svg files to png files to insure consistent browser display.

An example of what can be accomplished with Vector Graphics

Which brings us to a little history. Vector graphics started out in the 1984 when Adobe created PostScript as a programming language to direct a printer to print out correctly. Over time the language had many problems, including lack of features and limited multipage printing. Adobe then created Encapsulated Postscript, that allowed you to embed one page into another, but this still had problems and was feature poor.  In 1993 Adobe dropped the programming language and just made it a way to format documents with vectors, called PDF for Portable Document Format. This format went on to be a huge success for exchanging documents, and made Adobe a lot of money, though it still lacked graphic capability.

Adobe Illustrator

Around this time the XML data description language became popular.  In 1998 the W3C created a working group of graphic editor developers to create an xml vector based graphics standard.  The first release of the svg standard was in 2001.

Corel Draw

There are four excellent editors that are used to create vector graphic svg drawings: Adobe Illustrator, CorelDraw, Xara, and Inkscape.  Adobe with its experience led the market, and still does to this day.  Illustrator became more and more convoluted in usability over time with its multiple features within features, and CorelDraw came out with a successful, popular, full featured editor focused on easy of use and usability.  Xara, a British developer, then came out with new techniques, methods, and features with ease of use not found in either Illustrator or CorelDraw.  Inkscape, an open-source program was developed later, and is a full featured vector editor that borrowed heavily from Xara for its interface and features.

Xara Xtreme

In terms of cost, Adobe Illustrator is very expensive, CorelDraw is also a couple of hundred dollars, Xara is free to Linux users with a modest fee for Windows users, and Inkscape is free across all platforms.


Vector graphics looks different than raster or bitmap graphics, as you can see from the pictures in this article.  Why would you use vector graphics? Besides the artistic, high quality images, that can be created, here are some additional reasons:

    Vector images are scalable, because they are actual objects you can rescale them to any size.

  • You can pick an object out of a complex drawing easily and change it, this is tougher to do in bitmap graphics.
  • Vector images are easier to understand.  It's like building objects on top of one another.
  • Vector images, since they describe object placement with text, have much smaller files sizes.
  • Raster images always have a fixed size or dimensions, vector images are boundless, do not have a space restriction.
  • Vector images can be animated, not so with raster images.
  • Vector images, since they are objects can be interactive.
  • Vector images are reusable.  If you have a nice drawing, you can use it in another drawing.

The connected diagram done with a vector graphics editor

I've interspersed this text with examples of vector drawings so you can see the difference between bitmap graphics and vector graphics. I am heavily indebted to Dmitry Kirasanow and his wonderful book, "The Book of Inkscape" for the much of the content of this article. I recommend this book for anyone interested in learning how to use a vector graphics editor.

Comments are closed.