- Overview
- Transcript
1.1 Introduction
Welcome to Using SVG Sprites. In this course, you will learn a few methods for creating and using SVG sprites directly in your HTML web pages.
1.Introduction1 lesson, 01:26
1.1Introduction01:26
2.Inline SVG Sprites3 lessons, 26:54
2.1Creating an SVG08:45
2.2Combining Multiple Sprites09:04
2.3Making “Use” of Your Sprites09:05
3.SVG Cropping3 lessons, 21:50
3.1Preparing Your SVG in Adobe Illustrator07:22
3.2Understanding the Viewbox05:11
3.3Cropping Your Graphics09:17
4.Conclusion1 lesson, 01:26
4.1Final Thoughts01:26
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.