用于 Canva 和 Figma 的 PNG 转 SVG

在 Canva 中放大您的标志时它变得模糊，或者您需要在 Figma 中使用真正的矢量图层。将 PNG 转换为符合 Canva 上传规则的纯色 SVG。

将PNG拖放到此处

拖放图片，或点击选择文件。

选择图片

PNG, JPG, WEBP, BMP, GIF

转换器将使用以下推荐设置打开。 打开不带文件的转换器

原始栅格

青色圆形上的扁平火箭图标，保存为PNG格式

SVG 矢量

相同的图标被追踪为SVG，作为 handful 的扁平彩色形状
未经编辑的 SVGR 输出，设置如下：几个扁平形状，无实时文本，无渐变，远低于 Canva 3 MB 的上传限制。

如何将PNG转换为Canva或Figma使用的SVG

  1. 从最干净的 PNG 开始. 使用你拥有的最大版本，并裁剪至艺术品大小。纯色和硬边易于追踪。
  2. Upload and convert. 将 PNG 文件拖放到上方；JPG、WEBP、BMP 和 GIF 格式也可用，最大 15 MB。预设已应用，预览免费，无需注册账户。
  3. Check the preview. 查找杂散的色点、缺失的细节以及同一颜色的多余色调，并在需要时调整质量。
  4. Download the SVG. 下载它需要消耗一个积分。对于 Canva，请确保文件大小在 3 MB 以下；如果超出，请降低质量并重新转换。
  5. Import it. 在 Canva 中，通过上传功能添加它。在 Figma 中，将 SVG 拖到画布上。

推荐设置

图像类型设计设计适用于扁平色彩图形，如图标、徽标和徽章：硬边、扁平填充，且文件中无裁剪瓦片。
质量5/105 平衡细节与文件大小；如果 SVG 超过 Canva 的 3 MB 限制，请降低该值；如果在 Figma 中需要精细细节，请提高该值。
识别文字关关闭，因此文本被追踪为形状：Canva 要求将文本扩展，并且标志字母保持其确切的设计。
透明背景在On，因此移除了外部背景，图形位于任何 Canva 或 Figma 背景之上。
合并路径关对设计类型无效（仅适用于照片类型），因此请将其关闭。

为什么PNG在Canva和Figma中变得模糊

PNG 是像素网格。将其放大用于 Canva 中的横幅或 Figma 中的大画框时，边缘会变得模糊且呈锯齿状。将 PNG 转换为 SVG（用于 Canva 和 Figma）可将像素替换为矢量形状，从而使图形在任何尺寸下都保持清晰。

如果您使用的是 Canva 的免费计划，制作一个标志也会有所帮助。将 SVG 上传到 Canva 并不限于专业版，但以下载 SVG 格式保存设计是付费计划的功能。请改为下载 PNG 格式，并在此处执行 Canva PNG 转 SVG 的步骤。

Canva 上传 SVG 的规则

Canva 的帮助中心列出了 SVG 上传的几项要求。以下是每项要求与 SVGR 的对应关系。

Canva SVG上传要求及满足方法
Canva asks forHow to get there in SVGR
A file under 3 MB将质量移向较小的文件，或裁剪源文件以仅保留艺术作品
SVG 1.1SVGR 中无此设置；如果 Canva 拒绝文件，请先检查尺寸和渐变行
展开所有笔触、路径和文本框输出由填充形状组成，没有描边；请保持“识别文字”关闭，以免添加实时文字
避免使用纹理和渐变当设计类型和识别文本关闭时，SVGR 会追踪纯色；请从纯色插画开始，因为源文件中的渐变会显示为色带

将 SVG 导入 Figma 后您将看到的内容

Figma 将 SVG 导入为矢量图层，因此您可以直接选择、重绘和调整形状大小。这就是 Figma PNG 转 SVG 转换的要点：您获得的是可编辑的形状，而非扁平图像。

SVG 图形将形状堆叠，而不是挖空。字母 O 的孔洞或环内部的空隙是一个与背景色相同的形状，叠加在实心形状之上，因此在 Figma 中你会看到重叠的图层。这在匹配的背景上看起来是正确的，但在任何其他颜色上则会显示出来。

要创建真正的孔洞，请选中上方的形状及其下方的形状，然后应用 Figma 的布尔运算中的“减去”操作。

文本：描边形状还是实时文本？

关闭“识别文字”功能时，字母会被作为形状进行描摹。其外观与原件完全一致，且在两个应用中均可使用，但您无法重新编辑它。

启用后，检测到的文本会变为实时 SVG 文本，且 SVGR 还会运行颜色优化，这可能会添加渐变填充。Canva 要求将文本转换为轮廓（展开），因此请在此处保持关闭。Figma 将 SVG 文本作为实时文本导入，但存在以下问题：文本透明度被忽略，基于 em 的字体大小被读取为像素，且单个文本跨度上的字间距被忽略。

对于徽标，请关闭“识别文字”功能。如果需要可编辑的标题，请使用正确的字体在 Figma 中重新输入。

知识的界限

  • PNG 转 SVG 适用于 Canva 和 Figma 中的扁平图形，但不适用于照片。转换后的照片会生成体积庞大且复杂的文件；在 Canva 中，请直接上传 JPG 或 PNG 格式的原图。
  • 带有柔和边缘的 PNG 文件可能会返回近似的重复颜色，例如几种几乎黑色的色调。如果您想要干净的调色板，请在 Figma 或其他编辑器中将其重绘为一种颜色。
  • Canva 如何让您重新着色上传的 SVG 文件取决于具体文件，且我们尚未对每种设计进行测试。在围绕其构建模板之前，请先上传一个测试文件。
  • 在 Canva 中，形状的堆叠也很重要。使用透明背景时，字母 O 的内部会保留其原始背景色，并在任何其他颜色上显示为一个色块。上传前，请在 Figma 中裁剪这些孔洞，或在 Inkscape 中使用“路径 > 差集”功能进行处理。
  • 透明背景会移除图像四角颜色所绘制的形状，这就是人们所说的“背景”。如果您的 artwork 延伸到所有四个角落，或者角落颜色不同，则不会移除任何内容，背景将保留——请为 artwork 提供均匀、平整的边距，然后再次转换。完全被 artwork 包围的区域永远不会被移除，而已经具有透明度通道的 PNG 文件将保持原样。
  • 曲线由许多短直线段描绘而成。从较小的图像描绘时，放大后可能会显得略微呈角状，因此请从您拥有的最大副本开始。

常见问题

免费计划是否支持上传 SVG 文件到 Canva？

是的。上传 SVG 文件并不限于 Pro 用户；将设计下载为 SVG 格式是付费计划的功能。请确保文件大小在 3 MB 以下。

为什么我的 SVG 在 Canva 中看起来不对？

Canva 要求提供小于 3 MB 的 SVG 1.1 文件，其中描边、路径和文本需已展开，且不含纹理或渐变。首先检查是否存在实时文本和渐变填充：从纯色源文件再次转换，并关闭“识别文本”功能。

为什么 Figma 中的形状会重叠在一起？

SVG 图形堆叠形状：字母或圆环中的孔是一个覆盖在实心形状之上的背景色形状。选中这两个形状并使用“减去”命令，即可将其转换为真正的孔洞。

Can I edit the text?

关闭“识别文本”时，文本会转换为形状：您可以更改颜色和重新调整形状，但不能重新编辑内容。开启时，Figma 会将其导入为可编辑文本，但会忽略文本不透明度和部分字间距。Canva 要求文本展开，因此请在此处保持关闭。

Is the file too big?

Canva 对 SVG 上传的限制为 3 MB。将质量设置为“较小文件”，裁剪至 artwork，或减少源文件中的颜色，然后再次转换。

如果图片是 JPG 格式或截图，我可以为 Canva 将其矢量化吗？

是的。SVGR 支持将 PNG、JPG、WEBP、BMP 和 GIF 格式的图片（最大 15 MB）进行转换。转换和预览功能免费，无需注册账户；下载需要消耗一个积分。

相关用例

印刷用标志将网站或电子邮件签名徽标转换为您打印机要求的矢量文件。AI 标志将来自 ChatGPT、Gemini、Midjourney 或 Looka 的标志矢量化，使其适用于打印和招牌展示。草图和绘画将墨水草图、线稿和儿童绘画转换为适用于周边产品和印刷的可扩展 SVG。照片转矢量艺术将照片转换为大胆的矢量艺术，用于海报、肖像和周边商品。

准备好转换了吗？

转换和预览免费，无需账户。下载 SVG 或 PDF 将使用一个积分。