02 Why SVG? Sharpness.

Running Time: 5:17

I’d like to emphasize as we get started in this course why SVG is so compelling to use. Perhaps the most compelling reason to designers: they look amazing. Visually very sharp. Vector (The “V” in “SVG”) is always that way. …

Watch the Screencast

03 Why SVG? Flexible.

Running Time: 3:02

We just learned that SVGs look visually sharp. SVGs are also flexible. That’s not really unique to elements on the web, but what is unique is that they retain that perfect sharpness no matter what size you resize them to. …

Watch the Screencast

04 Why SVG? Small.

Running Time: 7:25

The size of an SVG file depends on how complex it is, not how “large” it is. Remember SVG’s don’t really care what size they are rendered at, they are flexible and sharp no matter what.

Imagine a 100×100 pixel …

Watch the Screencast

06 Using SVG – SVG as background-image

Running Time: 7:08

SVG images can be used as background-image in CSS as well, just like PNG, JPG, or GIF.

.element {
  background-image: url(/images/image.svg);

All the same awesomeness of SVG comes along for the ride, like flexibility while retaining sharpness. Plus you …

Watch the Screencast

08 Using SVG

Running Time: 8:38

Forgive me if I’m a bit down on these methods. I’ve never come across a use case where they are definitely the way to go. There was a time when <object> was the only way to use SVG, but those …

Watch the Screencast

09 SVG with Data URIs

Running Time: 9:46

We’ve covered “inline SVG” – which is dropping the SVG syntax right into HTML. You can use that same inline SVG in other places as well, like in an <img> or background-image. It’s pretty weird.

It’s like:

<img src='data:image/svg+xml;utf8,<svg 
Watch the Screencast

10 Getting SVG – Stock Photography Sites

Running Time: 7:12

Stock photography sites always have a way to filter search results by “vector”. And remember, no matter what format you get when you download something like that, you can generally open it in Illustrator and thus alter it and Save …

Watch the Screencast

16 SVG Icon System – External Source

Running Time: 15:18

Putting that SVG defs block at the top of the document definitely works. It has some advantages too, like the fact that no HTTP request needs to be make, all the information for drawing the graphics is right on the …

Watch the Screencast

17 Build Tool – IcoMoon

Running Time: 5:44

The term “build tool” might be scary. It brings to mind fancy command line tools requiring configuration and weird system dependencies that break when you look at them wrong. Sometimes build tools are like that, and we’ll go there in …

Watch the Screencast

18 Build Tool – Grunt svgstore

Running Time: 12:54

We can definitely get a little nerdier with our build tools. At the time of posting this, the poster child of build tools is Grunt. There are competitors, but Grunt has been the most popular for quite a while. If …

Watch the Screencast

19 More Build Tools!

Running Time: 9:43

We’ve learned that build tools are a particularly awesome for tasks like turning a folder full of SVGs into an SVG defs block. As is always the case in this lovely web world we live in, there is always more …

Watch the Screencast

21 Get Two Colors in a Use

Running Time: 5:12

We learned that a limitation of using <use> to insert a bit of SVG is that you can’t write compound CSS selectors that affect through there. For instance:

<svg class="parent">
  <!-- shadow DOM boundary is effectively here -->
  <use class="child">
Watch the Screencast

22 Animating SVG with CSS

Running Time: 21:25

When you use inline SVG, all that SVG code is right in the HTML, and thus in the DOM. You can style them just like you would a <div>, <h1>, or any other HTML element. CSS styling brings …

Watch the Screencast

23 Animating SVG with SMIL

Running Time: 16:47

Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but …

Watch the Screencast

24 Illustrator Quick Tip

Running Time: 1:30

This tip only applies if you have Adobe Illustrator CC (Creative Cloud). I confirmed it works in that, or the even newer CC 2014.

It’s as simple as can be: copy from Illustrator, paste into HTML.

What is on your …

Watch the Screencast

25 Manually Optimizing SVG in Illustrator

Running Time:

No video for this one, but here’s some useful information for manually optimizing SVGs in Adobe Illustrator beyond what the app does automatically.

Sometimes the SVG you want to use looks perfectly good in Illustrator, but it’s not quite how …

Watch the Screencast

26 Forcing Shapes to be Paths

Running Time: 9:58

This is a little esoteric of a thing, I just needed to do it myself one time and found it confusing so I thought I’d do a whole video on it.

The thing is, not everything is a <path> in …

Watch the Screencast

27 Animating SVG with JavaScript

Running Time: 20:41

JavaScript is the last of the ways we’ll cover on animating SVG. We looked at CSS, which is great and pretty comfortable, but it can’t do a number of SVG properties that you might want to animate. Then we looked …

Watch the Screencast

29 SVG Text

Running Time: 10:19

There is a <text> element in SVG. No big surprise here: it’s for putting text into the SVG. Not outlines of shapes of letters (although you can do that too) but actual normal web text. Selectable, SEO-friendly, accessible, normal ol’ …

Watch the Screencast

30 Converting Raster to Vector

Running Time: 4:02

There may come a day where you wish a graphic you had was SVG, but you only have it in raster, like GIF, JPG, or PNG.

In this video we look at an example of that. We have this arrow …

Watch the Screencast

31 You Can Put Raster Images in SVG

Running Time: 5:41

There probably isn’t a tremendously huge use-case for this, other than the obvious: you need a raster graphic amongst other things in a larger SVG design. That way it moves and scales with the rest of the elements.

The syntax …

Watch the Screencast

32 SVG Filters on SVG and HTML Elements

Running Time: 5:45

Perhaps you’ve heard of CSS filters? You can apply them do any element from CSS, like:

.apply-css-filter {
  -webkit-filter: grayscale(0.5);
  filter: grayscale(0.5);

You can even apply that to a HTML element or an SVG element.

But there is also …

Watch the Screencast

33 Clipping and Masking

Running Time: 23:17

The concept of clipping and masking is pretty simple. Hide certain parts of elements and show others. The actual difference between them is pretty simple too. Clipping is always a vector path, where inside the path is visible and outside …

Watch the Screencast

34 A Tour of SVG Software

Running Time: 16:40

There is plenty you can do with SVG without any software at all. Assuming you have a good source of SVG images online, you could use them directly. But it’s pretty common that we’ll need to adjust them a bit. …

Watch the Screencast

36 Using Grunticon

Running Time: 11:26

We’ve spent a lot of time talking about using inline <svg> and the <use> element. You can build an icon system with that that is rife with advantages.

You can create an SVG icon system though in other ways. You …

Watch the Screencast

37 SVG and JavaScript/DOM Events

Running Time: 15:15

When you use inline <svg>, all the elements are in the DOM, just like <div>s and <span>s and any other HTML element.

If you have SVG like:

  <rect id="foo" x="10" y="10" width="100" height="100" />

and …

Watch the Screencast