Vector Images

What are Vector images?

Normally we use images in formats like jpg, png, and gif for web pages. These are scalar images. These images are made up of a fixed number of pixels. Each pixel can represent a single color. These pixels are arranged in rows and columns to form an image. When these pixels are viewed at a distance, they form one whole image. Any screen that can display images have a fixed number of pixels.
Vector images do not have any pixel information. Instead, they store the information as objects that have attributes such as shapes and paths. This allows vector images to be scalable i.e., they can be made smaller or larger depending on the situation. Scalar images contain a fixed amount of information. They can be made smaller since it is just a matter of combining pixels. But when scalar images are made larger, they become less accurate images. This is because these images contain only limited information about the image. In case of enlarging images, we need more information which scalar images don’t provide.

circle image
Here is an image of a circle

scalar circle
Here is how a scalar image of the circle would look zoomed in

vector circle
Here is how a vector image of the same circle would look zoomed in
As you can see, the scalar image when zoomed in looses some of its detail. The vector image retains its sharpness even when it is zoomed in. This is one of the advantages of vector images. Since it is scalable it can be used for any device size. If the images have only simple shapes and paths, then the vector images can be much smaller. Vector images can easily be converted to scalar images of any size.

Why not use vector images all the time?

There are some situations where using scalar images is more sensible than using vector images on the web.

  • The most common reason for not using vector images is limited support in older browsers. This is slowly changing as more and more browsers support vector images.
  • The file size of a vector image depends on the complexity of the image. In case of scalar images, the file size of the images relative to vector images is in the same range for a particular display size.
  • As the vector image gets more complex, the more processing it requires for displaying.
  • Vector images are not suited for real-life photographs. In fact, vector images are usually images that are created using a computer rather than captured using a camera.

Vector images are suited for images like logos and patterns. Scalar images are suitable for images like photographs. Try to use vector images when possible and use scalar images in other situations.

Scalable Vector Graphics

Scalable Vector Graphics or SVG is a vector image format used in many websites. It is an XML based markup language similar to HTML. While HTML uses elements and attributes to describe different content, SVG uses them for describing different shapes.

<svg version="1.1" baseProfile="full" width="300" height="300" xmlns="https://www.w3.org/svg/2000/">
<circle cx="150" cy="150"  r="50" fill="blue">
</svg>

Since SVG is a markup language it is possible to code images by hand. But usually, SVG images are made using vector image editors like Inkscape or Adobe Illustrator.

Adding SVG images

Method 1

The easiest way to add SVG images is by using the img element. SVG images can be included like any other image format.

 <img src="example.svg" alt="Example Vector image" height="100px" width="100px" />

We cannot change the attributes of the SVG elements in this method using JavaScript and CSS.

Method 2

The first method won’t work for older browsers that don’t support SVG. In order to support older browsers, we can use a fallback mechanism to scalar images.


<img srcset="example.svg" src="example.png" alt="An example vector image">

Older browsers use the scalar image and newer browsers use the SVG image. Similar to the first method SVG attributes cannot be modified using JavaScript or CSS.

Method 3

Just like how CSS code can be inserted inline in a web page, we can also add SVG inline. We can open the SVG image in a text editor and copy the entire code. We can paste the SVG code into the HTML document. Make sure to copy only the SVG element and its contents.


<svg width="300" height="300">
<rect width="100%" height="100%" fill="red" />
</svg>

This method is useful when the image must be included only once. This method allows for manipulation of attributes using JavaScript and CSS. Another benefit is that an extra request to fetch the image is not required. On the downside, the browser cannot cache the image for fast access.