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.
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.
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.
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.