Lesson Outline

Scalable Vector Graphics (SVG)

SVG stands for Scalable Vector Graphic, and that is a pretty good description of what it is. SVG files allow us to define two dimensional vector graphics. Unlike standard raster based images which are composed of pixels, vector graphics are defined mathematically. If you wanted to scale up a raster image, as you will likely have done at some point in the past, it will lose quality and become blurry as it expands – as the image expands beyond a number of pixels it had originally, the blank pixels need to be filled in but there isn't any data that defines what the image should look like at that size. If you scale up a vector graphic there is no loss in quality, because no matter what size the image is, we have the data to define what it should look like.

The vector format is not something specific to SVGs. The defining characteristic of SVGs is that they are defined using an XML format and are supported by browsers. This means they can be embedded right into a web page, and we can even interact with the components of an SVG like we would any normal DOM element.

Here's a very simple example of what an SVG may look like:

<svg width="100" height="100">
  <circle
    cx="50"
    cy="50"
    r="40"
    stroke="green"
    stroke-width="4"
    fill="yellow"
  />
</svg>

This defines a yellow circle with a green border. Since we are defining this circle this way, we could easily scale that up to have a radius of 20,000px without losing any quality. The fact that the SVG above is 100×100 is irrelevant to the size that we may actually want to display it as. These values just establish the proportion of the shape.

There are three properties of SVG's that make them fantastic to use in mobile applications:

• The file size of an SVG can be very small (great for performance)
• They can scale up or down to any size without losing quality (great for varying device resolutions)
• Elements within an SVG can be manipulated like any other DOM element (great for animations)

In this lesson, we are going to explore how to create and animate an SVG in an Ionic application.