When it comes to images on a website, they fall into two main categories, raster and vector graphics. Raster graphics are images made of pixels. Each pixel is a certain color and the blending of the different shades brings out the image. JPG, GIF and PNG are all raster graphics. Vector graphics can be thought of as grown-up connect-the-dot images. They’re created by placing points on a plane. EPS and AI graphics, commonly used in printing, are examples of vector graphics. Vector graphics use a code similar to html to make.

Advantages of Using SVGs

Not dependent on resolution  – When you enlarge a raster graphic, it gets to a point where it starts to appear pixelated. This doesn’t happen with an SVG. Because the images are made from points on a plane, the same mathematical proportions remain the same. This means that the image remains clear no matter how small or large it becomes. This makes it excellent for viewing on a desktop computer or a phone, for example.

Works well with CSS – Not only can the code for an SVG be loaded into CSS, a SVG can contain its own CSS, enabling viewers to view it from different angles. This eliminates the need to add more graphics to a page, slowing down load time.

Better than font icons – An SVG can contain more than one color and it allows for quicker manipulation. Both of these factors are absent in font icons. This translates in more choices available and a better quality image.

Future-proof – Because they are so easy to manipulate, install on a webpage and supports all modern browsers, SVG images are virtually future-proof. With just a few adjustments, you can alter the image to work with any new developments and browsers that arise.

Pixels were necessary for images at one point, but the internet has become a quickly evolving thing and websites need to be able to incorporate these changes quickly. By switching to the use of SVG graphics now, you will make any future updates to your website easier and less stressful. SVG is the future of images.