Optimizing & Building

[00:00:03]
>> Sarah Drasner: Working With an SVG for Animation. This is kinda like what you're here for, right? [LAUGH] I should dive right in. All right, before, [LAUGH] even though I said it was working with an SVG for animation, we're not gonna animate yet because we're gonna talk about how to optimize and how to build the SVG so that it's appropriate for animation.

[00:00:23]
If you have something with a lot of path points, this is how an SVG can actually get bulky. This is how it can become not very performing. Usually, SVG's are pretty performing cuz they're small and they're lightweight and there's like not that many path points. You don't need that much to actually fill up circles and squares and polygons.

[00:00:43]
You saw how quickly we drew that star. But if you have something like a pattern, you can see how that would quickly start to bulk up path points. You'd just have a million path points. So if you have something like a pattern that doesn't really need to have all the rough edges, like visually it just doesn't make a big difference for the viewer.

[00:01:02]
You can really take down a lot of that data that you're trying to express by using object path simplify. Basically, you're simplifying these paths down to smaller amounts of path points so you can see how the original was 1445, current 888 and there's probably no visual difference. Unless someone is looking at them with a microscope which they are not going to do and the change in kilobytes size is huge, it's just gigantic.

[00:01:34]
Another thing you can do is sometimes people draw. What you'll see is if you buy an SVG, or a designer worked with an SVG, or they got it off of iStockPhoto or ShutterStock, it has a curve, but there's a million path points to make up that curve. So you could actually just redraw that curve and save a lot and this is kind of getting into really nitty-gritty details, but I worked for a site once where they had a lot of SVGs.

[00:02:01]
We worked with a company that made kind of microsite for us. And they made a lot and a lot of SVGs on that site. And I brought down the load time from 12 seconds to 2 seconds by doing things like this and optimizing the SVGs appropriately. So it can actually really pay off to do some of these minute tasks.

[00:02:22]
If you don't feel like you're good at drawing, what you can do is you can draw like really basic shapes like a circle and here's is a polygon and like keep on building them. And then grab, there's like a pathfinder thing, I'll show you in just a second in Illustrator and just join all the paths together.

[00:02:38]
Then you can kinda [SOUND] knock them into place and then you don't have to be so good at doing all of those pen tool things if you're not super familiar with the pen tool. Another thing is if you have a drop shadow, a lot of times a drop shadow will cost a lot.

[00:02:56]
It's usually just this giant PNG that's loaded into the SVG. You'll have a really simple SVG and then all of a sudden it's like 300 kilobytes and you're like, what's going on here? And it's because they're making this drop shadow out of a PNG and sticking it inside of the canvas.

[00:03:14]
You can also use an SVG filter for this so you can remove that drop shadow, go into SVG filters in Illustrator and say AI_Shadow_1 or 2 and then just recreate the shadow using an SVG filter. That's like 1 kilobyte instead of 500 or something like that. So that's another really quick way to make a lot of savings inside of an SVG.

[00:03:39]
So if you have a pattern like this, sometimes these patterns, so this pattern, if you look at it, all of the yellow behind it is all tiny little shapes which is such a waste, right? You'd think visually that's is just like a thing behind the thing but instead they're drawing all those little path points.

[00:03:58]
So what you can do is you can grab the yellow and say select, same, fill color. So you just select one of them. Select same, fill color, delete all of them at once and draw a big rectangle with the same color behind it. And then that saves you [LAUGH] lots and lots of path points.

[00:04:17]
So that's also another really quick thing that costs almost nothing once you change it over but cost you lot before. So let's actually look at some of the optimization techniques that are available to you. So here's an example of some output if you output from Illustrator improperly and I'll show you improperly, improperly.

[00:04:39]
That's before optimization and that's the same output. These do the same thing and that's a tiny one. You can imagine if the thing is really big, how much changing the way you're optimizing can actually make this file size three times as big or a lot smaller. So here's bunch of different ways that we can optimize.

[00:05:00]
There's SVGOMG which is built by Jake Archibald. It actually, because it's built by Jake Archibald it uses Service Worker. So if you go to it once, go to it once now, and then you can use it on the plane and stuff. And I was once at a cabin with some friends and I had to get some work done and I was like, no!

[00:05:16]
I need internet connection and I was like, no I don't! Thank you, Jake! I sent him a message. So that's really great. This is what that looks like, we're gonna use it in just a second. Peter Collingridge's SVG Editor is like a really really old rail to have.

[00:05:33]
I still kind of like it cuz it's got this edit experimental tab that's been experimental for five, six years now. And you can play with SVG tabs before you while you're optimizing it. SVGO is awesome and it's a terminal-based SVG optimizer. But I would really suggest that if you use it you pair it with SVGO-GUI.

[00:05:58]
This can be really nice though, just automate that task for you but without the GUI you don't really know what the optimization is doing. And the way that you optimize an SVG can actually affect its visual output, so if you kind of trust yourself enough maybe you can use SVGO.

[00:06:13]
But there are times where just like strips out things that you need and then it doesn't look exactly right.