02: Why SVG? Sharpness.

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. SVG is drawn from mathematically declared shapes and curves and such, so pixels are no limitation.

Bonus: really sharp images …

Play

03: Why SVG? Flexible.

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. That makes them truly flexible, unlike raster images that lose quality dramatically when you increase their size beyond their natural …

Play

04: Why SVG? Small.

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 100x100 pixel raster image. That's 10,000 pixels of information. SVG is just instructions on how to draw something, so if those instructions …

Play

05: Using SVG – SVG as img

Using SVG can be incredibly simple:

<img src="image.svg" alt="image">

Yep!

See the Pen 7d5d25d7a93f10035b9b19c6f4fce516 by Chris Coyier (@chriscoyier) on CodePen.…

Play

06: Using SVG – SVG as background-image

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 can do anything a raster graphic can do, like repeat.

In this video we look at applying a "ripped paper …

Play

07: Using SVG – Inline SVG

Perhaps the best way to use SVG is "Inline SVG" - that is, putting SVG code right into your HTML. It works great!

See the Pen gpcDi by Chris Coyier (@chriscoyier) on CodePen.

A lot of this series will be about all the great stuff you can do using inline SVG, so I wanted to be very …

Play

08: Using SVG: iframe/object/embed

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 days are over.

See the Pen AmEdC by Chris Coyier (@chriscoyier) on CodePen.

One of the reasons …

Play

09: SVG with Data URIs

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 ... > ... </svg>'>

You drop the entire SVG syntax in there where you see the <svg> start there.

Likewise …

Play

10: Getting SVG – Stock Photography Sites

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

Speaking of Saving as SVG from Illustrator, you'll always get this dialog after you choose the save location:…

Play

11: Getting SVG – The Noun Project

The Noun Project is a (very) fantastic place to get SVG from. Let us count the ways

  • Literally everything in SVG and actually comes that way
  • They are the type of images that SVG is best for
  • A lot of free-to-use Creative Commons stuff
  • A lot of quality inexpensive icons ($2 each or $1 on a plan)

Remember to take …

Play

12: Getting SVG – Icon Fonts & Sets

Remember that anything vector you can get into SVG. Adobe software is great at this. There could be vector stuff in a PDF - just open the PDF and you'll be able to get your hands on the vector parts. As we saw, stock photography sites often have things in EPS format, no problem, open up in Illustrator and get …

Play

13: SVG as an Icon System – The `use` Element

SVG has a very cool and powerful element called <use>. It's pretty simple in concept. It finds another bit of SVG code, referenced by ID, and clones it over inside the <use> element.

The most basic use case would be: I've already drawn this shape(s) once on the page, and I want to draw it again someplace else. Go …

Play

14: SVG Icon System – Building Out Defs

The <use> element is clutch to this whole idea of an inline SVG icon system. We learned that a clean way to do it is to put everything you intend to draw later into a <defs> block so it doesn't render and we can reference them later (tell them browser to draw that icon).

In this video we're going to …

Play

15: SVG Icon System – Where the defs go

Once we have what we are calling our "defs block" of SVG - that chunk of SVG that defines all the things we want to draw later - where do we put it? So far we've been putting it directly into the HTML, and that absolutely works. If we leave it at the top of the page, say just after …

Play

16: SVG Icon System – External Source

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 page. But, it has some disadvantages too. All that information needs to be parsed by the browser on each page, …

Play

17: Build Tool – IcoMoon

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 this series. But really a build tool is just something to help make your process easier. Automate something that you …

Play

18: Build Tool – Grunt svgstore

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 you're brand new to Grunt, I have a variety of things I've written and screencasted about it:

Play

19: More Build Tools!

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 than one tool for the job. There is certainly more build tools for this than the two we've looked at …

Play

20: Styling Inline SVG – Powers and Limitations

Inline SVG can be "styled" in the sense that it already has fills and strokes and whatnot the second you put it on the page. That's awesome and a totally fine way to use inline SVG. But you can also style inline SVG through CSS, which is kinda awesome because, I imagine for a lot of us, CSS is where …

Play

21: Get Two Colors in a Use

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"> <!-- stuff <use> references gets cloned in here --> </use> <!-- end shadow DOM boundary --> </svg>

That shadow DOM …

Play

22: Animating SVG with CSS

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 the possibility of animations and transitions.

A simple example:

See the Pen CodePen Logo as Inline SVG by Chris Coyier …

Play

23: Animating SVG with SMIL

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 if you want a complete reference guide definitely check out A Guide to SVG Animations (SMIL) by Sara Soueidan …

Play

24: Illustrator Quick Tip: Copy and Paste Inline SVG

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 clipboard when you copy in Illustrator is apparently SVG syntax. Pretty dang useful sometimes. Just remember to clean house as …

Play

25: Manually Optimizing SVG in Illustrator

Sometimes the SVG you want to use looks perfectly good in Illustrator, but it's not quite how you would want to use it on the web.

One of the things we look at in this video is a simple shape that seems like it would be a single shape but is actually four shapes sitting on top of each other. …

Play

26: Forcing Shapes to be Paths

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 SVG. <path> is fantastic because it can be anything. But the syntax for it is just a bit more …

Play

27: Animating SVG with JavaScript

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 at SMIL, which is a declarative syntax right in the SVG code itself, which is more powerful in that it …

Play

28: How SVG Line Drawing Works

A popular little SVG animation technique is path drawing. If you can't picture it, here's a collection of a zillion examples I've created. Essentially the stroke around SVG shapes draws itself over time.

I first heard of it from Jake Archibald's article Animated line drawing in SVG, which is about a good of an explanation of it as there …

Play

29: SVG Text

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' web text.

The fonts you have access to are the same as the rest of the document. So if you …

Play

30: Converting Raster to Vector

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 graphic that is GIF, but really should be SVG when used on the web. Illustrator is pretty good at turning …

Play

31: You Can Put Raster Images in SVG

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 is:

<svg ... > <image xlink:href="/path/to/image.jpg" width="100%" height="100%" x="0" y="0" /> </svg>

You'd probably never drop a raster graphic in …

Play

32: SVG Filters on SVG and HTML Elements

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 filters you can define within SVG, and there are more options when you do. Here's an example definition:

<svg> <defs>

Play

33: Clipping and Masking

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 the path is not. Where a mask is an image, is treated as a grayscale image where the black parts …

Play

34: A Tour of SVG Software

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. I know my most common workflow is to find something close to what I need from stock photography sites or …

Play

35: Optimizing SVG with Tools

We talked about optimizing SVG by hand already. Making choices manually about detail and what kinds of things can be combined or removed. In this screencast we'll look at optimizing SVG with tools. Tools that can reduce the file size of SVG without (hopefully) changing the look of it at all. Things that are perfect for automation. Like:

  • Removing

Play

36: Using Grunticon

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 could lay out a traditional gridded sprite sheet in SVG and do background-position sprites like we used to do with …

Play

37: SVG and JavaScript/DOM Events

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

If you have SVG like:

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

and you do:

var rect = document.getElementById("rect");

you'll get a reference to that <rect>.

And not only that, you can attach …

Play

38: Accessible SVG

In this screencast we dig into Léonie Watson's article all about accessible SVG and essentially go through it point by point. I enjoy that the first point is that using SVG at all is a good idea, because of the visual clarity.

The finished example code she provides is:

<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A

Play

39: Bringing It All Together – A Real World Project with SVG

In this video we try and bring a bunch of what we learned together by creating a website that makes use of SVG in a variety of different ways. We make our way through creating a site for the fictional "Dreamy Donuts" online donut shop. This is the process we take.

We create a local development domain to work with …

Play

40: Thank You and Final Information

Thanks for watching everyone, it means everything to me and this site.

This blog post is a huge list of resources for everything we covered in this series and much more all about SVG. …

Play

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag