Everything You Need To Know About SVG

Welcome!…

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

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

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 …

Using SVG can be incredibly simple:

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

Yep!

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

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 …

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 …

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 …

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 

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 …

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

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

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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’ …

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 …

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 …

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 …

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 …

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

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 …

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 …

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:

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

and …

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 …

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 …

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