What are SVG files?

Banana Chip Tech
3 min readJul 1, 2023

Unpacking the usefulness of SVG files for web development

Photo by USGS on Unsplash

Images come in multiple different file types. You might have heard of .png, .jpg, and .jpeg to name a few. While each of these image types are slightly different, they function more or less the same. In this article, we wanted to explore a type of image format, .svg, that is very useful for web development.

Advantages

SVG stands for Scalable Vector Graphics. This file type is different from other types of imaging file types in that it is a vector file that stores images via mathematical formulas based on points and lines on a grid compared to pixel based files like jpeg. The main advantage that comes with using an SVG file is that the image can resized without a loss of quality. Compare this to a pixel based image file that appears grainy or loses resolution when resized to much.

SVG files also come with the significant advantage of being able to be indexed by search engines. This is because SVG files are written in the Extensible Markup Language (XML). While we will defer going into the details about XML in this article, the main thing to understand is that XML is a text based way to transmit data. Because of the text based nature of XML that underpins SVG images, search engines like Google or Bing are able to crawl the SVG images and index them (make them searchable on the…

--

--

Banana Chip Tech

Banana Chip Tech is focused on optimizing healthcare through computation! We build apps, create websites, and develop tech courses for healthcare professionals!