SVG

SVG, or Scalable Vector Graphics, is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Unlike traditional image formats like JPEG or PNG, which are based on pixels, SVG uses mathematical descriptions of geometric shapes like lines, curves, and circles.

This fundamental difference is why SVGs are 'scalable.' When you zoom in on a JPEG image, it becomes pixelated and blurry because you're just enlarging the existing pixels. With an SVG, the and the web browser redraws the shapes based on their mathematical descriptions. This means an SVG logo on a small phone screen will look just as crisp as it does on a huge billboard, without needing a different file for each size.

SVGs are created using code, much like how a web page is built. This code defines the color, position, and shape of each element. Because they are code-based, SVGs are very lightweight in file size compared to pixel-based images. They are also easily searchable, indexable, scriptable, and can be compressed. This makes them ideal for logos, icons, illustrations, and graphs on the web.

You would commonly encounter SVGs when browsing websites, especially for user interface elements or interactive diagrams. Many websites use SVGs for their logos because of their crispness on different screen sizes. A common misconception about SVGs is that they can replace all image types. While excellent for graphics with clear lines and shapes, they are not suitable for complex photographs with many shades and subtle details, where pixel-based formats like JPEG still excel.