Course info
May 8, 2015
1h 29m

This course will familiarize web designers and developers with the fundamentals of the scalable vector graphics image format. Viewers will learn what scalable vector graphics are, how to create them, different ways to implement them, when it makes sense to use them, a variety of what can be done with them, and what to look out for when using them.

About the author
About the author

Brian Treese is the Chief Designer at SoCreate, a company building a fun and easy way to turn great ideas into movie & TV show scripts. Technically a Web Designer (he's always loved the aesthetic side of the web), but his expertise does not stop at Photoshop and Illustrator.

More from the author
Styling Angular Applications
1h 54m
Feb 8, 2017
Thinking Outside the Box with CSS Shapes
1h 13m
Jul 19, 2016
Modern Web Layout with Flexbox and CSS Grid
1h 14m
Jan 15, 2016
More courses by Brian Treese
Section Introduction Transcripts
Section Introduction Transcripts

Introduction to SVG
Hello and welcome to SVG Fundamentals. My name is Brian Treese and I'm here to help you navigate the ins and outs of the web's most versatile graphics format. Right about now you're probably asking yourself, SVG, come on, I mean what's to know? It's just another image format, right? Wrong. SVG is so much more than that and it's so different than any other image format that you've used before. This course covers exactly what you need to know to get started using SVGs in your projects now. So get ready to put the pedal to the metal as we dive on in and explore what SVG brings to the table. To get the most out of this course, you should have an understanding of what a vector graphic is, and you should be familiar with Adobe Illustrator, HTML, CSS, and JavaScript. In this course we will explore what an SVG is, how to create them, and how to use them. We will learn what types of graphics are best suited as SVGs. We will play with various SVG elements and attributes and use CSS and JavaScript to manipulate them. We will create and use SVG sprites to simplify code and reduce redundancy. We will touch on SVG animation with CSS, JavaScript, and SMIL. We will discuss optimization and browser support and we'll take a look at some neat examples, tools, and resources that help you get the most out of SVG.

Working with SVG Code
Now it's time to get our hands dirty. As we learned in the first module, SVG is much more than just another graphics format, and in this module we're going to dissect the code that makes it so. When working with SVGs, the more you know about how they work the better off you'll be, even if you're spending most of your time creating them in Illustrator. In this module, we will explore SVG layout with the canvas, viewport, and viewBox. We will look at various SVG elements and how they are used to create and animate graphics, and we will cover how to move the presentation layer out of SVGs and into CSS styles.

D.R.Y. Out Inline SVG Code with SVG "Sprites"
We all want to be good designers and developers, and one of the keys to becoming better is using the D. R. Y, or Do Not Repeat Yourself methodology, by writing clean maintainable code with little or no redundancy. When we start adding complex SVG code to our markup, and then use the same graphic in more than one location, we repeat ourselves and make our code much more difficult to maintain. This is where SVG sprites come into play. In this module, we will discuss what an image sprite is, we will explore why we need them with SVGs, we will create SVG sprites in each of the three most popular methods, inline, using SVG fragment identifiers, using embedded CSS background images, and we will discuss each of their pros and cons.

Animating SVG
With modern web development we are becoming much more accustomed to rich and interactive web interfaces and design. With SVG we can push these limits even further by adding interactivity through animations, transitions, and transforms. For example, we can do amazing things like this, or this, but before we can let our imaginations run wild, we need to first understand how SVG animation works. So in this module, we will discuss the three main methods for animating SVGs, first with good old CSS, second using Synchronized Multimedia Integration Language, or SMIL, and third using popular JavaScript SVG manipulation and animation libraries like Snap. svg, Vivus. js, and D3. And as we cover them we will explore the pros and cons of each method.

SVG Optimization, Browser Support, Resources, and Examples
SVG Optimization, Browser Support, Resources, and Examples. SVGs provide a lot of flexibility and versatility when it comes to graphics on the web. They work great in a world where we focus on building one site that works everywhere and on every device. With that said, we can squeeze even more out of SVG by learning how to optimize it and by better understanding browser support. It's also beneficial to maintain an ever-growing list of tools, resources, and examples to consult when using SVGs to keep up to date and stay inspired. So in this module, we will explore SVG optimization techniques, we will discuss SVG browser support, we will take a look at a few great SVG tools, resources, and amazing SVG examples, and we'll wrap up everything that we've learned in this course.