Vector Based Graphics

Computers can use two types of graphics:

• Bitmaps: A bitmap (or raster graphic) is a digital image composed of a matrix of dots. When viewed at 100%, each dot corresponds to an individual pixel on a display. In a standard bitmap image, each dot can be assigned a different colour.
• Vector-based graphics: Unlike bitmap graphics, vector graphics are not made up of a grid of pixels. Instead, vector graphics are made of mathematical/geometric instructions known as “paths”. A path can be a line, a square, a triangle, or a curvy shape. A path is defined by a start and an end point, along with other points, curves, and angles along the way. These paths can be used to create simple drawings or complex diagrams.

The purpose of this blog post is to demonstrate what vector based graphics consist of and how they are stored on the computer.

SVG is a format used to create vector based graphics.

See the codepen below to see how the following graphic is created using SVG code. Click on “Edit on CODEPEN” to tweak this code and change this graphic.

See the Pen Vector Based Graphic by 101 Computing (@101Computing) on CodePen.

Check this page from w3schools.com to learn about SVG graphics that can be used directly into an HTML5 page.

Your Challenge

Pick any graphic from the Christmas collection or from the Science collection below and try to recreate this graphic using SVG code (by editing the above CodePen).

Christmas Collection

Science Collection