What's actually happening when you export as SVG but get PNG instead

When you export a layer or frame from Figma and select SVG as the format, but the file arrives as PNG, Figma is usually doing exactly what you asked — it's just not what you meant to ask for. The most common reason is that you're exporting a rasterized layer (a layer that Figma has converted to pixels) rather than a vector layer. Figma can only export true vectors as SVG. If the layer contains effects like blur, shadow, or certain blend modes, or if you've applied a mask, Figma automatically rasterizes it during export and saves it as PNG instead, even though you selected SVG in the menu.

The second reason is that you may have selected "Export" from the right panel instead of using the actual export settings. Figma's quick export button sometimes defaults to PNG based on your last export, overriding your format choice. The third reason is less common but real: if you're exporting an entire board or artboard that contains mixed content (some vector, some raster), Figma may flatten the whole thing to PNG to preserve the exact appearance.

Key Takeaways

  • Figma exports as PNG instead of SVG when the layer contains effects like blur, shadow, or masks that can't be stored in vector format.
  • Check the Layers panel to see if your layer shows a raster icon (small grid pattern) instead of a vector icon (small diamond shape).
  • Remove effects, masks, and blend modes from your layer before exporting, or flatten them into the shape itself if you need to keep them.
  • Use the Export panel (not the quick export button) and confirm the file format is set to SVG before clicking Export.

How to tell if your layer is rasterized

Open the Layers panel on the left side of Figma. Look at the small icon next to your layer name. A vector layer shows a small diamond shape. A rasterized layer shows a small grid pattern. If you see the grid, Figma has already converted that layer to pixels, and SVG export won't work — it will save as PNG instead.

You can also check by selecting the layer and looking at the Design panel on the right. If you see "Rasterize" as an option in the menu, the layer is still vector. If the option says "De-rasterize" or doesn't appear, the layer is already rasterized. Some effects in Figma automatically rasterize a layer the moment you explore them — blur, shadow, glow, and certain blend modes all do this.

Effects and settings that force PNG export

Figma rasterizes (and therefore exports as PNG) when you explore any of these to a layer: drop shadow, inner shadow, blur, background blur, glow, or certain blend modes like Multiply or Screen. Masks also trigger rasterization. If you've clipped a layer to a mask, or used a layer as a clipping mask, Figma can't store that in SVG format and will export as PNG.

The workaround depends on what you're trying to do. If you need the shadow or blur in your final file, accept the PNG export — it will look correct. If you need SVG format and can live without the effect, remove it from the layer before exporting. If you need both the effect and the SVG format, flatten the effect into a separate raster layer, export the vector parts as SVG, and handle the effect separately in your design tool or code.

The right way to export as SVG in Figma

Select the layer or frame you want to export. On the right side, scroll down to the Design panel and look for the Export section at the bottom. Click the plus icon to add an export. A dropdown will appear — make sure it says "SVG" and not "PNG". Then click Export. This is different from the quick export button in the top toolbar, which sometimes remembers your last format and overrides your choice.

If you're exporting multiple layers, select them all at once (hold Shift and click each one), then add the export format once. Figma will create separate files for each layer. If you're exporting a component or a frame that contains multiple shapes, Figma will export the whole thing as one SVG file, preserving the layer structure inside the SVG.

When Figma exports as PNG even though you removed the effects

Sometimes you'll remove a shadow or blur, but Figma still exports as PNG. This happens because the layer is already marked as rasterized in Figma's internal state, and removing the effect doesn't automatically convert it back to vector. The fix is to select the layer, right-click, and look for a "De-rasterize" option. Click it. The layer will convert back to vector format, and SVG export will work.

If you don't see a De-rasterize option, the layer may have been rasterized for a different reason — perhaps it was imported as a PNG or JPG, or it's a text layer with certain formatting. In that case, you'll need to recreate the layer as a vector shape, or accept the PNG export if the rasterized version looks correct.

Exporting frames versus exporting individual shapes

If you're exporting a frame (a container that holds multiple layers), Figma treats it differently than exporting a single shape. A frame exports as SVG only if every layer inside it is vector-based and has no rasterizing effects. If even one layer inside the frame is rasterized, the entire frame exports as PNG. This is why it's worth checking every layer in a frame before exporting.

If you have a frame with mixed content and need SVG, export the vector layers separately. Select only the vector shapes you need, add the SVG export, and export them as a group. Then handle any rasterized content (shadows, blurs, images) separately or in a second export.

Why SVG matters and when PNG is actually fine

SVG is a vector format, which means it scales to any size without losing quality and has a much smaller file size for straightforward shapes and icons. PNG is a raster format — it's made of pixels, so it looks blurry if you enlarge it, and it's larger in file size. If you're exporting an icon or a logo that needs to scale, SVG is the right choice. If you're exporting a complex illustration with lots of effects, or a screenshot, PNG is often the better choice anyway.

The frustration usually comes from expecting SVG but getting PNG without understanding why. Now you know: Figma is telling you that the layer contains something that can't be stored in vector format. You can either remove that thing, accept the PNG, or find a middle ground by exporting the vector parts as SVG and the effects as a separate layer.

Frequently Asked Questions

Can I convert a PNG export back to SVG in Figma?

No, not directly. Once Figma exports as PNG, the file is rasterized. You would need to use a separate tool like Potrace or Adobe Live Trace to trace the PNG back into a vector, and the result is usually lower quality than the original vector. The better approach is to fix the layer in Figma before exporting.

Why does my text layer export as PNG when I select SVG?

Text with certain effects (shadow, blur, outline) rasterizes automatically in Figma. Remove the effect, or convert the text to outlines first (right-click the text layer and select "Convert to paths"). Outlined text is vector and will export as SVG.

If I export as PNG, can I use it in code the same way as SVG?

No. SVG is code-based and can be edited, styled, and animated in HTML and CSS. PNG is an image file and can only be displayed as-is. If you need to use the file in code, you need SVG. If you just need to display an image, PNG works fine.

Does exporting as SVG preserve the layer structure from Figma?

Yes. When you export as SVG, Figma includes the layer names and hierarchy inside the SVG file. You can open the SVG in a code editor and see the structure, or import it into another design tool and the layers will be preserved.

What if I need the shadow effect but also need SVG format?

Export the vector shape as SVG, then add the shadow using CSS or SVG filters in your code. This gives you the scalability of SVG plus the visual effect you want. Alternatively, create the shadow as a separate vector shape in Figma, export both as SVG, and layer them in your design tool.