Scalable Vector Graphics, or SVG, is an alternative way to save and display images. Most images that we view on the web are typically saved as a JPG or PNG file, which both are two different file formats of raster images (other popular raster image formats are BMP, TIFF, and GIF). SVG, as its name implies, is a type of vector graphic, and has been in development since 1999 by the W3C.
Raster images are saved as bitmap images, which means that every pixel has to save the color information for every pixel, and this can exponentially increase in size as a larger color depth is used. Today, the common standard is called True Color and it assigns 8 bits per Red, Green, and Blue levels, so it's called 24 bit color. Thus, the formula to determine the size of a bitmap image is size = width * height * 2^color_depth. As the resolution of displays increases, the file size for bitmap image will also grow. A 1080p display has 2,073,600 pixels, while a 2160p (or 4K) display will have four times that amount, and 4320p (or 8K) TVs are already being sold. The size of uncompressed raster images will continue to grow.
To preserve space, compression algorithms were created. However, some compression algorithms will not return the exact same image when uncompressed. This is referred to as lossy compression. JPG is a lossy file format, but that means it can be very efficient with its file size. Instead of working with individual pixels, the JPG compression algorithm works with an 8x8 block of pixels – this leads to compression artifacts and fringing around the edges of text. PNG uses a lossless compression algorithm, and support for transparency. PNG does support animations, but I haven't seen it used out in the wild. Typically, images with animations are in the file format GIF, which is also lossless, but it saves space by only saving 256 colors, or 8 bit color.
In 2001, the need for low file size – but highly scalable images – was recognized as both higher resolution displays were entering the market and as mobile devices started to get internet connectivity. Enter Scalable Vector Graphics, or SVG. SVG is actually an XML file that merely describes the image in terms of lines, curves, thickness, color, and text elements, and this offers it great flexibility in scaling up or down on resolution, while being extremely cost efficient when it comes to file size. These attributes make SVG a very appealing format for logos and UI elements that need to scale up or down depending on the context. SVG images can be modified by CSS and JavaScript, making them ideal for use in web apps, as they can be changed on the fly without creating a new file.
SVG images have many practical uses and can (and, in my opinion, should) be used in many different applications. However, that's not to say that JPG or PNG should be immediately discarded. Photography images don't translate well to SVG, which is still the ideal scenario for a JPG image. PNG is still ideal for screenshots of text as it avoids the fringing seen with JPG compression. As always, find the right tool for the job, but consider using SVG somewhere in your next project – who knows, maybe you're already using vector graphics, as some fonts are already vector graphics.
Sources:
Top comments (0)