Problem
I am importing an SVG file into my Figma design file. The asset originally has a transparent background. After importing it into Figma, the background becomes black. I've used the asset elsewhere and I know it's transparent. I've searched the Figma help center, forums, and Stack Overflow, and cannot find any relevant information. I must be doing something wrong.
Background
I use Canva to create a lot of small, individual assets (like marketing assets and web assets). I created a design and exported it as an SVG (as I've done countless times). The asset in question is a graphic to be used in a hero section and it has a transparent background. I've already been using it in my actual code project and it looks as expected (the background is transparent.
However, I've been trying to use Figma to design my site, and I imported the asset so I could design my hero section. It imported almost everything correctly except the final layer. It imported the base layer by creating a rectangle item with its fill property as the base layer converted to an image.
This has caused to issues:
- It's now pixelated, which defeats the whole purpose of using an SVG, and
- The background is no longer transparent. It's no black.
What am I doing wrong?
Context
Here are some screenshots to provide context. The first screenshot shows the SVG viewed in VS Code and the second viewed in the browser. These demonstrate that the original asset does in fact have a transparent background. The second two show how it looks in the Figma editor.
