- Source Code & Resources PRO
- Lesson 1: Introduction PUBLIC
- Lesson 2: The Difference Between UI and UX PUBLIC
- Lesson 3: General Concepts PUBLIC
- Lesson 4: A Brief Introduction to Accessibility PRO
- Lesson 5: Navigation Concepts PRO
- Lesson 6: Actual Performance & Perceived Performance PRO
- Lesson 7: Controlling the Layout PRO
- Lesson 8: Utilising CSS Grid & Flexbox PRO
- Lesson 9: Creating a Layout That Adapts to Desktop PRO
- Lesson 10: CSS Variables and Syntactically Awesome Style Sheets (SASS) PRO
- Lesson 11: Improving Form UX PRO
- Lesson 12: Animating with CSS PRO
- Lesson 13: Animating with Angular PRO
- Lesson 14: Animating with Ionic and the Web Animations API PRO
- Lesson 16: Scalable Vector Graphics (SVG) PRO
- Lesson 17: Conclusion PRO
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.