Vector Graphics Versus Raster Graphics

Vector Graphics Versus Raster Graphics

-----

A "raster" image is a rectangular grid of pixels where each pixel is assigned a color. For example, a raster image with 4 columns of pixels (A, B, C, and D) and 4 rows of pixels (1, 2, 3, and 4) could have the pixel at 4B red, at 3A blue, at 4D yellow, all of row 1 (except 1C) black, all of column C green, and everything else white.
[The described image]
Of course, lots of raster images are quite a bit larger than this 4 by 4 one - they also aren't described by human-readable text normally, but instead using one of a huge number of "codec"s, or file formats. These formats are also sometimes called file types or standards. Here's a few common ones:

- JPEG/JPG (Joint Photographic Experts Group, the creators of the standard) is a "lossy" compression method that is very commonly used for digital photographs. "Lossy" means that it sacrifices some image quality in order to achieve better compression (smaller file size, so the image takes up less space in storage). The amount of compression is adjustable, but it can typically get around 10:1 compression with little perceptible loss of quality.
- PNG (Portable Network Graphics) is a "lossless" compression format, and is the most widely used image compression format on the Internet. "Lossless" means that absolutely no quality is lost, though this means that the format tends to have larger file sizes than lossy formats. It supports 32-bit-per-pixel RGBA color, where the colors red, blue, and green can each be set to a value from 0 to 255, resulting in 16 777 216 total possible colors (on top of this, the "alpha" (opacity) of each pixel can also be from 0 to 255)
- GIF (Graphics Interchange Format) is another "lossless" format, BUT it is typically used for lower quality images and only supports a palette of 256 colors per image (8 bits per pixel). This means that GIF images tend to have lower quality even though the format is lossless, but the advantage of this is the very high compression it can achieve. This high compression is useful for animated GIFs, because each frame of the animation can have a fairly small file size.

Aside : "Bitmap" images are technically a subset of "raster" images, where each pixel only has a single bit of information to define its color. This means that a true bitmap image can only have a palette of 2 colors total per image (an image could be black and white, but then couldn't have gray or transparent pixels too). That said, the term "bitmap" is often used interchangeably with "raster", and while true bitmap images certainly have unique uses, multi-bit rasters are far more common, and situations where the distinction is important are rare.

-----

A "vector" image is a collection of lines, curves, and shapes that are assigned positions, sizes, forms, and colors. For example, a vector image could have:
- a red rectangle with a corner at (10, 10) (that is, x / horizontal position = 10 pixels and y / vertical position = 10 pixels) and the opposite corner at (40, 30)
- a circle on top of the rectangle, with a yellow fill and a purple stroke 1 pixel wide, centered at (40, 30), with a radius of 10 pixels
- a "path" (set of lines and curves) with a black stroke 1 pixel wide, starting at (10, 35), moving right 15 pixels, then moving 5 pixels right and 10 pixels down, and finally returning to the starting point
- and because I want some border around it, the image should be 60 pixels wide and 55 pixels tall

[The described image]

There are many different formats (or "standards") that are used to make, store, and use vector images, but the SVG (Scalable Vector Graphics) standard is the most popular, and the one I use. It's an "open standard" (the entire standard is described in a publicly available, heavily detailed, and very dry document) developed and maintained by the World Wide Web Consortium (W3C, the same group that maintains CSS, HTML, and XML, among other standards). It is, in fact, an extension of XML (Extensible Markup Language), which means that it's easy to read, images can be made and modified in a text editor, and it can be directly embedded in HTML code on a website.
That image I described is actually this code:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="60" height="55" version="1.1" viewBox="0 0 60 55" xmlns="http://www.w3.org/2000/svg">
 <rect x="10" y="10" width="30" height="20" fill="#f00"/>
 <circle cx="40" cy="30" r="10" fill="#ff0" stroke="#f0f"/>
 <path d="m10 35h15l5 10z" fill="none" stroke="#000" stroke-miterlimit="10"/>
</svg>

It might be a bit complicated at first sight, but this format is very useful for web design, and because it's an open standard there are tons of tools and resources available for it.

-----

Something that is important to note - "pixels" in terms of a vector image are very different from "pixels" in terms of a raster image. (also, pixel is often abbreviated "px")
Raster pixels are squares on a grid, they can't be rotated and you can't have half of a pixel; they are the "objects" that make up the image.
Vector pixels are a unit of measurement where their length is relative to the width, height, and viewbox defined for the image. If the image is 60 "pixels" wide and 55 "pixels" tall, and the viewbox is the same size, then 1 pixel is 1/55th of the height of the image.
However, because it's a unit of length and vector images are NOT restricted to lying on a grid, a diagonal line can be 1 pixel wide and an object can be positioned or sized to fractions of pixels.
The term "pixel" is used to measure the size of the vector image because (with the exception of some specialized equipment) modern computer screens can't actually display vector drawings, because the screens themselves are made out of pixels.
In order to display vector images, then, a computer program must "rasterize" it, which refers to rendering a vector image directly for display and also refers to exporting a vector image to a raster image, so it can be used in places where vector images aren't allowed or aren't viable.

Now the advantage of vector images comes through: you can take that 60 by 55 vector image and make it, say, 6000 by 5500. There's going to be a lot of blank space now, but every single line will still be crisp and sharp; all the original detail and quality is retained. Now make the image 6.0 by 5.5, and again it keeps all the detail and crispness, though depending on screen resolution some things might be too small to show. In any case, take it back to 6000 by 5500, and nothing will have changed at all!
If you try that with a raster image, it might very well be unrecognizable now.
[The raster image from before, but extremely blurry]
The image I showed earlier was actually a vector image that I rasterized at 9600 dpi resolution (turning the image from 4 by 4 into 400 by 400). The image here is a raster that I made at the 4 by 4 size, and resized up to 400 by 400. This example is extreme, but it illustrates the point pretty well.

-----

On top of the resolution advantage, vector images are very easy to modify, either through the text file or by using a program such as Inkscape, a free vector image editor. Shapes and lines can be shifted around, moved above or beneath each other, curves can be adjusted, and colors can be altered in seconds. Text can be typed directly, and edited even after saving, closing, and reopening the file.
And for SVG images, they can be modified using CSS and JavaScript on webpages - CodePen is a website that is extremely useful for this! Using JavaScript allows you to animate SVG images or allow them to react to user inputs using the same languages and files you're already using.

Now, one of the biggest issues with vector images is that heavy detail is extremely expensive in terms of time and effort required to make it, and in terms of file size. Adding more objects and nodes to an image takes better advantage of the effectively infinite resolution of vector images, but it's super time-consuming.
Another problem is that vector images can't handle "continuous tones" (also called contones); most formats support and handle gradients (SVG has linear and radial gradients), but in real life nothing is as simple as a gradient. SVG also supports custom patterns but again, it falls short of photorealism. So realistic images are a lot better suited to raster than to vector.

Also, due to a whole host of reasons, while support for SVG vector images is very solid across all major Internet browsers (and the vast majority of less major ones), support for vector images is significantly lacking across web sites themselves.
DeviantArt has a category for vector art, but SVG files can't be directly uploaded - a ZIP compressed file must be used instead, and a raster image must be used for a preview. Very few image hosting sites allow vector images to be used.
On the upside, GitHub (and GitHubGists especially) can be used to host SVG images for free, and RawGit can give a link to the image itself once it's hosted.

-----

So in the end, raster images are better for high detail, realistic, and photographic images, and it's also good for image hosting services and for occasional devices that either can't render the image or saving the device the effort.

Vector images are good for images meant to be easily modifiable, that should look sharp at any resolution and size, or that should be embedded directly into a website or should be modifiable by the website. Plus, you can always turn a vector image into a raster - it's a lot harder to go the other way!
Also, as a bonus - many automated devices also use vector images. Some specialized printers use them, but often times things like engravers and sticker cutters use vector paths. Fonts also tend to be vector images, because they can scale to any size without becoming blurry.

-----

Hey! If you have more questions or suggestions for things I should cover, I'd love to hear them! I'm RETheUgly on DeviantArt, CodePen, GitHub, SmackJeeves, Discord (tag #6469), and even on PasteBin!