SVG

What is SVG?

SVG is a common image format (file extension: .svg) used for creating scalable graphics, also called vector images, specially icons. SVG stands for Scalable Vector Graphics. Typical image formats are for raster images (PNG, JPG, WebP). Raster images store image data as a grid of pixels. The size of the grid is called the resolution of the image. When a low-resolution image is displayed at a higher resolution, i.e. a small image is scaled to a large size, the original image won't have the pixels necessary to fill the extra space, so a program must run to "fill" the missing resolution with something based on the pixel data that is available. This scaling process typically makes the image "blurry," as it interpolates between pixel data available. SVG, on the other hand, doesn't store pixel data, but instead contains instructions to draw shapes. When a SVG image is displayed, a program must run to render the SVG, turning it into a raster image to be displayed on the screen. When the program runs, it decides what should be the size of the image, and scales the drawing instruction accordingly. For example, if a SVG image is created that is 30x30px, with a 10x10px square inside, a program would run to draw the pixels of the square instruction every time the SVG needs to be displayed. If we want to display the SVG zoomed in by a factor of 2, the program just needs to create a 60x60px raster image, and multiply the instructions by 2, e.g. the 10x10px "draw a square" instruction becomes a 20x20px "draw a square" instruction.

The SVG file format is based on XML. SVG is just XML code, and a .svg file is just a .xml file with a specific XML namespace (xmlns). Let's see an example:

<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10" x="10" y="10" rx="0" ry="0" fill="blue" />
</svg>

The SVG code above says the size of the image is 30x30px, and it contains an instruction to draw a rectangle of 10 pixels in width by 10 pixels of height. Note that there is no "square" instruction, only rectangle. The rx and ry attributes specify rounded corners, and fill specifies the color. If your web browser supports SVG images natively, you should see a rectangle below:

All I did was literally write the code above inside this web page's HTML code, and if your web browser supports it, the web browser generates the image from the code when the webpage is opened. Another example¹:

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" fill="blue"/>
</svg>

That's a lot of numbers! I wonder what it looks like.

A bird!

In this case, we used a <path> instruction to make the computer draw an arbitrary shape. A bird-shaped shape.

SVG has several other features besides these, like strokes, linear gradientes, radial gradients, etc. All of these things can be rendered from SVG code. On anything that supports SVG, that bird can be rendered on any resolution and it won't look blurry, using just that text code.

There are a few drawbacks.

Generally, SVGs use more bytes than an compressed image format would use for rendering icons, because the text code is too long for too few pixels, but at larger image sizes, SVG is often smaller than the PNG or WebP equivalent.

SVG is clearly not intended for storing photos. You can try to trace a photo and turn it into SVG shapes, and you could even make every single pixel into a SVG rectangle, but there would be no benefit in doing that.

References

1. Source code modified from: https://iconmonstr.com/twitter-1-svg/ (accessed 2024-07-18) ↩︎