SVG Tools and Ideas Q&A

[00:00:00]
>> Sarah Drasner: Okay, great so we actually took an SVG and we made it move. In the time of the break we got a couple of questions so I am gonna address those now. One of the questions was, whether or not there was any open source software that's free to use.

[00:00:13]
I was using Illustrator before and I mentioned SketchBook both of them you pay for. There is a thing called Inkscape. Inkscape is free and it's actually really good, and it actually has really good export settings. There's some fancy bells and whistles it doesn't have as you would expect between paid products and things that are not paid.

[00:00:33]
And I think there's less support, of course, than something that you use from Adobe or something like that. But if you don't wanna pay for an SVG editor, Inkscape is a really good way to go. Another question that we got was, where you might get ideas for an animation.

[00:00:51]
How do you start, what's even causing that? I think that the first and foremost looking at the world around you is always really helpful, like it's watching someone walking to the street or like a bus move or things like that. You can start with stuff that you're actually seeing in real life.

[00:01:09]
With that dev avocado, you noticed that I worked off as a GIF. That's totally cool too, I just looked on GIPHY. For cool little animations that were done before by somebody else and I'm like as an exercise copying them or maybe adding some of my own motion. Of course, if I do that, I always credit the thing that I did.

[00:01:32]
So in the codepen there's a details section and in the details section you would say I got this from Dribble, I got this from GIPHY and giving credit to thing that you're copying. Another thing that I think is really fun, I don't know if any of you are on Facebook Messager, but they have these like really funny stickers that are moving around and goofy.

[00:01:55]
Most of them are pretty good, could fodder for SVG animations. I mean, even if you don't use them directly, just looking through some of the stickers on there. Most of them look like SVG animations, like looking at these weird rabbits showing you their armpits. Or I don't know, something like that.

[00:02:14]
Maybe if you look at enough of those you can start to get idea for your own stuff. Another thing that you can do is look at Free Pick and iStock Photo and some of these sources for an SVG and sometimes looking at the SVG will give you an idea.

[00:02:30]
So you might see a potted plant with instead of vines it has flowers, it has a house behind it. That stuff kinda calls to be in motion sometimes. There's some critters on there that you're like, hey, that one should move. You could totally do that, you can move stuff around.

[00:02:49]
So you don't have to start with an animation or a SVG that you drew either. You could actually just take an existing animation. Definitely optimize those cuz they're not usually well optimized for SVG animations.