Introduction to Web Graphics

Web-based graphics fall into two basic categories: Vector and Raster. Vector-based graphics are created with distinct lines and geometric shapes, generated by mathematical formulas. Because they’re generated by math, you can scale vector graphics larger and smaller in size without affecting their output quality. The only standalone vector graphic file format compatible with most web browsers and devices is SVG (Scalable Vector Graphics). Although it has been around for a long time, it still isn’t used much on the web.

Vector formats are not good at depicting photographic-type information but are good for text, logos, and other types of geometric designs and patterns. Vector graphics also have the disadvantage of outputting well to printers but displaying poorly onscreen. You can usually identify a vector graphic onscreen by its harsh lines and curves, which are caused by trying to display geometric shapes using square pixels. Display quality is probably the major reason vector graphics were never seriously considered by web designers.