7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 7Length: 38 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 What Exports Well to SVG

When you’re designing vectors for SVG, not everything you see in a design application will necessarily be recreated accurately when you export. Let’s take a look at which functionality in Figma you can use freely knowing it will recreate perfectly, and which functionality you should put aside for SVG work.

2.5 What Exports Well to SVG

Hey, welcome back to Figma for SVG. In the last lesson, we looked at how you can export or copy SVG code from Figma. Now that we know how to export, we can look at what things actually export well. Some things that you can make in Figma, I'm not gonna translate into SVG. So you want to make sure that you can avoid using those tools and wasting your time on something that's not going to show up in SVG, probably anyway. All right, so first up let's look at gradients. I'm just gonna delete this second gradient from before to make things a little bit simpler to look at. All right, so linear gradients, let's copy this SVG code, add it into our HTML, and let's check out the results. As you can see, that comes out perfectly. It looks identical to the gradient in Figma, so that's all good. Linear gradients work perfectly. So do radial gradients. That a bit funny looking gradient, but just to illustrate the point, let's copy that, paste it in. There you see it again, the radial gradient carries across perfectly. What doesn't work, Is angular and diamond gradient. So we'll try an angular gradient. So looks pretty cool, here. But if we copy the SVG, And we paste it into our HTML. You can see that it's just turning up as a radial gradient. SVG doesn't know how to process an angular gradient, and the same thing goes for a diamond gradient. You can see you've got that square shape, here. That's a diamond gradient. Try that one out. And you can see, even in the code here, it's just coming through as a radial gradient. So once again, just a plain radial gradient, so, Linear and radial gradients are in, angular and diamond gradients are both out. Just gonna change that back to linear gradient. And I'm gonna add another linear gradient fill back in, so that I can demonstrate that multiple fills work really well also. So I'm just gonna copy that, paste it in. And you can see again that's perfectly recreated, so multiple fills are definitely a go. Multiple strokes also work. So lets, and one with a layer, with a gradient on top So give this one a quick test So there again, you can see that we've got that gradient stroke over the top of the black stroke. Once again, that would be more useful if you could have different widths and alignments for strokes. But if you're trying to do that sort of a layered look, then that works perfectly. The next consideration is effects, so let's just drop those. Now, you've got this panel down here that lets you apply different types of effects to your graphics. So first up, we've got drop shadow. Just make that a little bit more pronounced so we can see what we're testing a bit more clearly. All right, so let's try this one out, View as SVG. Spoiler, it recreates perfectly. Let's see that in action, though. There you go, there's a perfect drop shadow, that carries across great, and the inner shadow works just as well. There you go, you can see that inner shadowing. That looks perfect, pixel for pixel the same. Another option that you have is a layer blur. So you can see that that's giving us this nice soft edge around the outside of our shape. This actually recreates perfectly as well. Let's see that. There you go, really nice soft edges so that blur works really well. Background blur, on the other hand, doesn't turn up at all. So a background blur is supposed to blur anything that's in the background behind a particular object. So I'll show you what I mean. We're just gotta turn that effect off and draw out another shape. We're going to apply background blur to this shape, and then, we're gonna decrease its opacity. Just gonna increase the amount of blur so it's a bit more pronounced so you can see what it looks like in Figma. If you look through the shape, you can see that it's blurring the background, here. But if I copy both of these shapes as SVG, And enter our code, you can see that the second shape isn't even visible at all. The second shape is there. I take the background blur off, and copy both of these shapes in again. You can see that it's not failing to export the shape. It just isn't capable of carrying over that background blur effect. So inner shadows, drop shadows, layer blur are all fine. Background blur is no go. All right, and then the next thing, just get rid of that. And I'm just gonna change this color. The next thing is blending modes. So if you look over here, you can see that we've got a bunch of different blending modes that we can choose from. We can change to all different kinds of blending modes between these two shapes. Now, there's a whole bunch here, and I'm not gonna show you every single one of them, however, I have tested all of these blending modes, and they all carry across perfectly into SVG. So I'll just give you one demonstration of the multiply blending mode, just copy that in to the HTML, And there you go. So that's a perfect recreation of that blending mode. All right, so let me just quickly summarize for you everything that you can and can't use if you want to have your designs perfectly recreated in SVG. So for gradients, you can use linear and radial gradients, but you can't use angular or diamond. You can use multiple fields and multiple strokes, that works fine. Under Effects, you can use inner shadows and drop shadows. You can also use layer blurs, but you cannot use background blurs, and you can use every single one of the blending modes. All right, so that is everything that you need to know to start working with Figma to create vector designs that are supposed to be translated into SVG code. We just got one more lesson left in the course, and that is a quick summary of everything that you've learned. And you can come back, and rewatch this video anytime you need a refresher on all the things that are relevant to SVG, when you're using Figma to create vectors. So I'll see you in the last lesson.

Back to the top