1.1 Introduction

Hello and welcome to Using SVG Sprites. My name is Craig Campbell and I will be your instructor for this course. In this short course, I'm going to teach you a couple of different methods for using SVG Sprites in HTML. Now SVG stands for scalable, vector, graphic. And a SVG file, is an XML based graphic which, as it's name implies, can be scaled without using quality. If we take a Bitmap graphic, such as a PNG file or a JPEG file and try to scale it up. As you can see, it loses some of its quality. Its edges become pixellated and blurry. On the other hand, if we take a look at an SVG file, we can take this graphic and scale it up as much as we want to. And as you can see, it keeps its nice, crisp edges. So there's a great advantage of using SVGs over JPEGs or PNGs, if the circumstances call for it. So in this course, I'm gonna show you a couple of techniques for combining multiple vector graphics into a single SVG object. And then we'll look at how to display those shapes or sprites, one at a time by calling on that SVG object. So we've got a lot to learn in a short amount of time. And in the next lesson, we'll get started. Thank you for watching, and I'll see you then.