What is SVG?

SVG stands for Scalable Vector Graphics. But what does that actually mean?

To put it simply, an SVG is an image format for the web. However, unlike photos, SVGs are not made out of pixels. Instead, they are made out of text that describes mathematical formulas for shapes, lines, and colors.

A Quick Look at an SVG

To show you what I mean, take a look at this simple shape:

This is an SVG image rendered directly in the browser.

Here's the code that produced that image:

View Output

The code isn't some complicated programming language. It's just XML (Extensible Markup Language), which looks very much like HTML. This means that a web browser can read this code and mathematically draw the image.

Raster vs. Vector Graphics

SVG is a vector format, which gives it some distinct advantages over raster formats like JPEG, PNG, and GIF.

To understand why, you should know that there are two main types of images on the web:

1. Raster Graphics (JPEG, PNG, GIF)

Raster images are essentially a massive grid of colored dots called pixels. If you take a photograph with your phone, you are creating a raster graphic.

The downside to raster images is that they are resolution-dependent. If you try to enlarge a small JPEG, it will look blurry and pixelated because the computer has to guess how to "stretch" those limited dots.

2. Vector Graphics (SVG)

Vector graphics are resolution-independent. As mentioned, SVG is a vector format. Because an SVG file is just a set of instructions (e.g., "draw a black circle here, and make it this big"), the computer re-calculates the math no matter how big or small you make the image.

Why Use SVGs?

Because they are just lines of code, SVGs are incredibly powerful tools for web developers:

  1. Infinite Scalability: They look crisp on any screen size or resolution (like Retina displays) without needing multiple image files.
  2. Tiny File Sizes: A complex illustration can be described in a few lines of code, resulting in an image file size far smaller than a PNG or JPEG.
  3. Stylable with CSS: Because SVG elements (like <rect> or <circle>) live in the DOM, you can target them to change their fill colors or borders using standard CSS.
  4. Animatable: You can use CSS animations or JavaScript to make SVGs move, spin, or change colors dynamically.
  5. SEO Friendly: Search engines like Google can read the code inside an SVG, making the content accessible and indexable.

Now that you know what an SVG is, it's time to build one yourself.