PNG to SVG for Canva and Figma

Why a PNG goes blurry in Canva and Figma

A PNG is a grid of pixels. Scale it up for a banner in Canva or a large frame in Figma and the edges turn soft and jagged. Converting PNG to SVG for Canva and Figma swaps the pixels for vector shapes, so the graphic stays sharp at any size.

It also helps if you made a logo on Canva's free plan. Uploading an SVG to Canva isn't limited to Pro, but downloading your design as SVG is a paid-plan feature. Download it as a PNG instead, and do the Canva PNG to SVG step here.

Canva's rules for uploading an SVG

Canva's help center lists a few requirements for SVG uploads. Here is how each one maps to SVGR.

What you'll see when you import the SVG into Figma

Figma imports an SVG as vector layers, so you can select, recolor and resize shapes directly. That's the point of a Figma PNG to SVG conversion: you get editable shapes instead of a flat image.

SVGR stacks shapes instead of cutting holes. The counter of an O, or the gap inside a ring, is a background-colored shape sitting on top of a solid one, so in Figma you'll see overlapping layers. That looks right on a matching background but shows up on any other color.

To make a true hole, select the shape on top together with the one underneath it and apply Subtract from Figma's boolean operations.

Text: traced shapes or live text?

With Recognize text off, lettering is traced as shapes. It looks exactly like the original and works in both apps, but you can't retype it.

With it on, detected text becomes live SVG text, and SVGR also runs color refinement, which can add gradient fills. Canva asks for text to be expanded, so keep it off there. Figma imports SVG text as live text, with gaps: text opacity is ignored, em-based font sizes are read as pixels, and letter-spacing on individual text spans is ignored.

For logos, leave Recognize text off. If you need editable headings, retype them in Figma with the right font.

Limits to know

• PNG to SVG for Canva and Figma works for flat graphics, not photos. A traced photo becomes a large, complex file; for Canva, upload the photo itself as a JPG or PNG.
• Soft-edged PNGs can come back with near-duplicate colors, such as several almost-black shades. Recolor them to one color in Figma or another editor if you want a clean palette.
• How Canva lets you recolor an uploaded SVG depends on the file, and we haven't tested it on every design. Upload one test file before building a template around it.
• Stacked shapes matter in Canva too. With a transparent background, the inside of an O keeps its original background color and shows as a spot on any other color. Cut those holes in Figma, or with Path > Difference in Inkscape, before you upload.
• Transparent background removes the shape painted in the color found at the image corners, which is what people mean by the background. If your artwork bleeds into all four corners, or the corners are different colors, nothing is removed and the background stays — give the artwork a plain, even margin and convert again. Areas fully enclosed by artwork are never removed, and a PNG that already has a transparency channel is left as it is.
• Curves are traced as many short straight segments. Traced from a small image, they can look slightly angular when enlarged, so start from the largest copy you have.