Constructing an SVG

[00:00:00]
>> Sarah Drasner: Okay, so let's go into Illustrator for a second. So I made this, [LAUGH] dumb dev avocado thing. So I wanted to animate this, there's a GIF that looks like this. And it's just this little avocado smiling and rolling around. And I was like, well, maybe I should just make that thing cuz it's so cute.

[00:00:22]
And so I traced it in Illustrator and here are the faces, and here's the other layer. So basically the layer is like the avocado background, and here are all the faces along with it. But you can see how each one is a layer, here we've got Path, Eclipse, Ellipse, and they're all in this thing called sm-face, which is a group, right?

[00:00:51]
And then this is another group, yeah. Cool, so if I go to File > Save As, that's when I get the really bulky output. So we don't wanna do File >Save As, we wanna do Export. And this Export is really good because Dimitri Baronovski who works on Snap who made Snap SVG works on this Export.

[00:01:12]
So Illustrators Export is really, really excellent. Sketch unfortunately, has really bad export. And what you will find if you export from sketch a lot of the times not very time, but almost most times is a million nested groups that you don't need. But at sometimes you do need groups, so its's tempting to remove all the groups.

[00:01:34]
But then sometimes you'll need some of them, so you'd have to add them back in. The other thing it does is it makes a lot of clip parts, where you don't need clip parts, or creates used tags where you don't need them. So you end up using different, you've got like nested view boxes, that's not great.

[00:01:50]
That sounds tricky, right? It's tricky and it's not good, and so then people who export from Sketch sometimes are like, I hate SVG. And I'm like, no, you hate Sketch. I've written them unsolicited emails asking if I could help with their Export tool, and they haven't responded. If you're watching, let me help you, [LAUGH].

[00:02:11]
So if you go to Export > Export As, and you can go all of these different options, but of course we want SVG. And I'm gonna go into, let's do Recent and Export and then this SVG option will come up. The styling is kind of interesting, so you've got internal CSS.

[00:02:32]
Basically that means that, SVG is actually a document. So it has this style tag, and then it puts all the styles inside the style tag. That can be nice if you wanna put it all in that one place and then move it into like a CSS file or something like that, that's cool.

[00:02:51]
In line style can be great if you're working with like React and you wanna do some especially like React motion or something like that, React spring, those in line styles can be helpful when you're using that. And presentation attributes, I usually use presentation attributes, it kind of depends on what I'm doing.

[00:03:10]
Sometimes with the internal CSS, if I have a lot of repeated color, the internal CSS will be smaller cuz it'll apply a class and grab them all at once. Instead of saying it redundantly across all of those presentation attributes. So the presentation attributes will put them directly on the elements, whereas the CSS will apply a class and put it inside CSS instead.

[00:03:32]
So that's what those do. We've got object id's, our layer names, you probably want this most of the time. So that means that all of the groups and all of the paths will have the ids match whatever names I named it here, right? You could say Minimal or Unique.

[00:03:52]
Minimal will make everything like A, B, C, hard to work with. I don't really suggest it, [LAUGH] decimal is important, too. It's basically an optimization thing, right? If you have less decimals, it's gonna kind of figure out where it is on that Canvas with less precision. So if I say zero and it's a really small canvas, it's gonna move those things around.

[00:04:18]
So if you ever optimize and you're decimal is zero and things are all over the place, go back in and change the decimal to something like two, it will probably look better. That's probably what's going on. And what is neat is you can kinda show code here, and see what you got going on, and see if you like it.

[00:04:36]
So, you can see here, I've got, my path is ID ARM L we named it that before. So, if I went back and I said, Object IDs, layer names minimal, and then I show code instead it has no path ID on there. So that's not as helpful because I can't go grab it, right?

[00:05:02]
And cool, so the difference between minify and responsive, responsive just removes width and height off of it, that's it. That's all it does. So minify just kind of makes it all smashed together into one big glob, that's all that does too. It's just like un-prettified. So if you're gonna animate, you don't want this part to be like this and if you're not gonna animate then that's fine.

[00:05:30]
So I can say okay, now lets go into SVGOMG. So we can open an SVG we’re gonna go into Recent, there’s our dev avocado. And its already pretty small cuz I drew it by hand, a lot of time like you can use this demo one. And you can see how much savings you get.

[00:05:55]
If you're using something from iStock Photo, Shutterstock, Freepik, one of those kind of things, sometimes the savings are incredible. You're like, whoa, if you drew it by hand, it's probably gonna be pretty small though. So here's the markup. You can see all the div, and it's kind of prettified, and if I untoggle that then it does that same thing as midify, right?

[00:06:17]
It's prettifying. Here are a bunch of different settings to toggle. For these settings to toggle, I have a post called high performance SVGs on CSS-Tricks. I give you some recommendations on there, I'm gonna go through just a couple of them right here. So clean IDs is the same thing as you saw earlier.

[00:06:38]
If I clean IDs, you can see that the names of those layers, see GID layer1, that is removed, so you probably don't want that if you've named layers yet. Another thing is round/rewrite numbers, sometimes you have like multiple things that are different, lets say there's two different circles.

[00:06:59]
And it has round/rewrite numbers it will round and rewrite them to be in one path instead and then if you need to move those circles independently you can't do it anymore cuz they've just one big path then. So if you find something like that happening, where you're like, wait, why's it just one big globe?

[00:07:17]
That's probably the one that you need to undo. There's all sorts of things, like remove view box, probably don't wanna do that. Collapse useless groups, I mean, you can kinda see if that changes. Round and rewrite paths is another one, where if you do that, things might glam together.

[00:07:36]
So that's another thing to check out. So you can kind of check out all of these different things and toggle and kind of play with the markup and see what you're getting between that. And make sure that the image isn't affected by what you're doing. So you can kind of play with all of these things, and then if you like do something.

[00:07:56]
I think there's one of these that will completely destroy this image, I've done it before, [LAUGH] and then it will just kind of break apart. Also, if you have those drop shadows that have PNG inside of them, removing raster images will break that as well, so that's another one.