PNG to SVG for Canva and Figma

Your logo goes blurry when you enlarge it in Canva, or you need real vector layers in Figma. Convert the PNG to a flat-color SVG that follows Canva's upload rules.

Drop your PNG here

Drag and drop an image, or click to choose a file.

Choose image

PNG, JPG, WEBP, BMP, GIF

The converter opens with the recommended settings below. Open the converter without a file

Original raster

A flat rocket icon on a teal circle, saved as a PNG

SVGR vector

The same icon traced to SVG as a handful of flat color shapes
Unedited SVGR output with the settings below: a few flat shapes, no live text and no gradients, well under Canva's 3 MB upload limit.

How to convert a PNG to SVG for Canva or Figma

  1. Start from the cleanest PNG. Use the largest version you have, cropped to the artwork. Flat colors and hard edges trace well.
  2. Upload and convert. Drop the PNG above; JPG, WEBP, BMP and GIF work too, up to 15 MB. The preset is applied, and previewing is free with no account.
  3. Check the preview. Look for stray specks, missing detail and extra shades of the same color, and adjust Quality if needed.
  4. Download the SVG. Download it for one credit. For Canva, check that the file is under 3 MB; if it isn't, lower Quality and convert again.
  5. Import it. In Canva, add it through your uploads. In Figma, drag the SVG onto the canvas.

Recommended settings

Image typeDesignDesign suits flat-color graphics like icons, logos and badges: hard edges, flat fills, and no clipped tiles in the file.
Quality5/105 balances detail and file size; lower it if the SVG is over Canva's 3 MB limit, raise it for fine detail in Figma.
Recognize textOffOff, so text is traced as shapes: Canva asks for text to be expanded, and logo lettering keeps its exact design.
Transparent backgroundOnOn, so the outer background is removed and the graphic sits on any Canva or Figma background.
Merge pathsOffHas no effect with the Design type (it only applies to photo types), so leave it off.

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.

Canva SVG upload requirements and how to meet them
Canva asks forHow to get there in SVGR
A file under 3 MBMove Quality toward Smaller file, or crop the source to just the artwork
SVG 1.1Not a setting in SVGR; if Canva refuses a file, check the size and gradient rows first
Expand all strokes, paths, and text boxesThe output is made of filled shapes with no strokes; keep Recognize text off so no live text is added
Avoid using textures and gradientsWith the Design type and Recognize text off, SVGR traces flat colors; start from flat art, since a gradient in the source comes out as bands of color

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.

Frequently asked questions

Can I upload an SVG to Canva on the free plan?

Yes. Uploading SVGs isn't limited to Pro; downloading your design as SVG is the paid-plan feature. Keep the file under 3 MB.

Why doesn't my SVG look right in Canva?

Canva asks for SVG 1.1 files under 3 MB, with strokes, paths and text expanded and no textures or gradients. Check for live text and gradient fills first: convert again with Recognize text off, from a flat-color source.

Why are there shapes on top of each other in Figma?

SVGR stacks shapes: the hole in a letter or ring is a background-colored shape on top of a solid one. Select both and use Subtract to turn it into a real hole.

Can I edit the text?

With Recognize text off, text is shapes: you can recolor and reshape it but not retype it. With it on, Figma imports it as live text, though it ignores text opacity and some letter-spacing. Canva wants text expanded, so leave it off there.

Is the file too big?

Canva's limit for SVG uploads is 3 MB. Move Quality toward Smaller file, crop to the artwork, or reduce the colors in the source, then convert again.

Can I vectorize an image for Canva if it's a JPG or a screenshot?

Yes. SVGR takes PNG, JPG, WEBP, BMP and GIF up to 15 MB. Converting and previewing are free with no account; downloading costs one credit.

Related use cases

Logos for printTurn a website or email-signature logo into the vector file your printer asked for.AI logosVectorize a logo from ChatGPT, Gemini, Midjourney or Looka so it scales for print and signage.Sketches and drawingsTurn ink sketches, line art and kids' drawings into scalable SVG for merch and print.Photo to vector artTurn a photo into bold, stylized vector art for posters, portraits and merch.

Ready to convert?

Converting and previewing are free, with no account needed. Downloading the SVG or PDF uses one credit.