SVG's images advantages and use cases

𝗦𝗩𝗚 (Scalable Vector Graphics) is an XML based vector image format for two-dimensional graphics.

Main characteristics of SVG files:

• XML based: Unlike the binary image formats (e.g. PNG, JPEG or GIF) an SVG file is only a text file written in XML (eXtensible Markup Language). This means that it's file can be opened on a text editor and its content read. It can contain tags such as circle, rect, path or text, each with attributes that can define position, size, color and other properties.
  This is an advantage for developers because being XML based make these files programmable and version controllable instead of static binary files such as PNP and JPEG formats.

• Vector Graphics: SVG images are composed of vector graphics, this makes the difference from "raster graphics" used at PNG's and JPEG's image format.

Raster Images: The images of this kind such as PNG and JPEG are composed with a grid of individual pixels, when a zoom is done in a raster image, the individual pixels start to show up, leading to a blurry appearance and low resolution resulting in a low quality image.

Vector Images (SVG): These images of this kind, such as SVG are defined by mathematical equations and geometric objects such as points, lines, curves and shapes. With this type of image, instead of being stored pixel data, an SVG file stores instead how to draw the image.
This allows an unmatched scalability, allowing the images to be rendered perfectly at any size or resolution without any loss of quality.

Cons of SVG:

• Not ideal for complex photographs: while it would also be possible to use SVG in complex photos, every pixel would need complex mathematical description, and the file's size would be very large.
• Increased complexity for creation: as the complexity of the images increase the technical knowledge requirements of vector graphics software will also increase.

Best use cases in Software context for SVG image format:

• Logos and icons;
• User interface elements such as buttons, form controls and others;
• Diagrams and flowcharts (Class, Sequence, Architecture): where scalability, traceability, edibility and programmatic generation are important;
• Data visualizations: Interactive charts, graphs and maps;

On figure 1 is possible to see the advantage of svg images compared to a png, when there is the need to have a high resolution.

Figure 1: Side by side comparison between a png and a svg image

In conclusion:
SVG can be a good format if you want to work with an Icon, logo, diagram or interactive graphics, where scalability, editability, programmatic control, resolution independence and traceability are important.