SVG

SVG stands for Scalable Vector Graphics and is a text-based way of describing images and is used to create images that can be rendered at any size without loss of quality. 🎉

Because SVG can almost be a language unto itself, it is not covered in-depth in this course, but I do want to provide you with some resources to get you started.

All of the content on this page is optional, but I do highlight some things that are worthwhile if you’re working with SVG.

An introduction to SVG

If you’re using SVGs in your project

If you are using SVGs in your projects, I highly recommend reading the following sections from Flavio’s In-Depth SVG Tutorial (est. reading time: 16min):

• Your first SVG image
• SVG viewport and viewBox
• Inserting SVG in web pages
• Styling elements

In addition, you should review Accessible SVG: Methods for Adding Alternative Content (est. reading time: 7min).

More resources

• Joni’s Pocket Guide to Writing SVG (est. reading time: 50min) is great if you want to create your own SVGs instead of using stock SVGs.
• MDN’s SVG Tutorial
• If you want to get into animating SVGs, Sarah Drasner’s tutorials on the web and YouTube are top notch 👍🏻