如何在Figma、Canva或WordPress中导入和修改您的SVG文件？

您已经有了SVG。接下来呢？

大多数转换器在下载按钮处就停止了。但是，如果文件一直留在下载文件夹中，那它就毫无用处。设计师在Figma中打开它以匹配品牌指南。社交媒体经理将其放在Canva中以制作发布内容。前端开发者将其放入WordPress以作为页眉标志。正是之后的这一步，证明了PixelToPath融入了真实的工作流，而不仅仅是一个演示。

PixelToPath的SVG不是静态图像。它是一组路径：每个形状都有填充，可能还有轮廓。将标志的蓝色改为酒红色，分离图标，放大以用于1080x1920的快拍：这一切都在您已在使用的工具中完成，无需再经过Illustrator。

为什么Figma、Canva和WordPress喜欢这种格式

PNG和JPG导入后都是位图。在Figma中重新着色PNG标志意味着在其上叠加一个图层，而不是更改路径的颜色。Canva也不会提供调色板。WordPress会提供一个在Retina屏幕上模糊的大文件。而SVG一次性解决了这三个问题。

具体来说，来自PixelToPath的SVG为您提供：

• 可编辑的路径：每个形状一种颜色，可在Figma（填充）或Canva（调色板）中修改
• 轻量级文件，远低于Canva的3MB限制，并且在WordPress网站上加载速度比@2x PNG更快
• 在网站图标、LinkedIn横幅或易拉宝上清晰度相同：只需一个文件
• 您可以发送给客户的可交付成果：他们在现有的工具中打开，而不是Creative Cloud

Figma：导入SVG并更改颜色

Figma将SVG导入为一组矢量，而不是照片。这就是其重点所在：每个形状仍然是一个图层，您可以对其进行重新着色、移动或隐藏。

1. 从PixelToPath下载.svg并打开您的Figma文件。
2. 将文件从文件资源管理器直接拖到画布上。或者：文件 → 导入，或按Ctrl+Shift+K（Mac上为Cmd+Shift+K）来放置SVG。
3. 图层显示为一个组。双击进入，或者如果想逐个操作形状，请右键单击 → 取消编组（Shift+Ctrl+G / Shift+Cmd+G）。
4. 选择一条路径。在右侧面板的填充（Fill）部分，单击色板：十六进制、色板、吸管。整个形状随之改变，边缘保持清晰。
5. 对于单色标志，选择组中的所有形状并应用一种颜色。如果最终产品不再是矢量，然后从“导出”部分导出为SVG、PNG或PDF。

如果Figma显示平面图像而不是矢量图层，则说明该文件嵌入了位图（封装的PNG）。使用黑白或海报预设导出的PixelToPath不会出现这种情况。请使用这两种模式之一（而不是照片模式）重新转换原始文件。

Canva：放入SVG并重新着色

Canva在免费和Pro版本中都接受SVG。当文件很简单时，重新着色有效：纯色、节点少、无渐变。这正是PixelToPath使用海报或黑白预设所生成的。

1. 在Canva中，打开一个设计。左侧面板 → 上传 → 上传文件。选择您的.svg（小于3MB；PixelToPath的导出文件远远低于此限制）。
2. 文件进入您的上传内容后，将其拖到页面上。通过控制柄调整大小：矢量图保持清晰，包括在快拍或A4格式中。
3. 单击SVG。在工具栏中会出现色板，文件中的每种色调都有一个。单击一个色板，选择新颜色：Canva会将其应用于该色调的所有形状。
4. 如果没有出现调色板，则说明SVG太复杂（渐变、颜色过多、照片类路径）。回到PixelToPath，切换到海报或黑白，重新导出，然后重新导入。

Canva建议使用SVG 1.1配置文件，将相同颜色的形状分组，并且没有纹理。PixelToPath的标志预设已经遵守了这些限制。无需通过Illustrator来“准备”文件。

WordPress：安全允许SVG上传而不会打开漏洞

默认情况下，WordPress拒绝SVG，这并非任性。SVG是XML：它可以包含JavaScript、外部实体和XSS有效负载。访问者或受损的编辑者帐户上传恶意SVG可以在管理后台执行代码。因此被阻止。必须允许格式并清理文件。

不要仅仅在functions.php中添加image/svg+xml。如果不清理文件，就会打开一个漏洞。安全的方法：使用维护的插件清除脚本、onload事件和XML实体。Safe SVG（10up），超过一百万次安装。

1. 在WordPress管理后台中：插件 → 安装插件。搜索Safe SVG（作者：10up）。安装并激活。
2. 转到设置 → 媒体。将SVG上传限制为管理员（或受信任的角色）。如果网站有多个撰稿人，不要向所有作者帐户开放该格式。
3. 媒体 → 添加。放入PixelToPath .svg。插件在导入时对其进行清理，并在媒体库中显示预览，这是WordPress原生不具备的。
4. 在文章或页面中，插入图像块并选择SVG。对于页眉标志，请使用自定义/站点身份，或主题模板（站点编辑器）中的图像块。
5. 开发者方案：不通过媒体库。将文件放入主题（assets/logo.svg）并在模板中引用它，或将其内联以使用CSS设置样式。没有上传，也就没有媒体库的攻击面。

Safe SVG还可以限制谁有权上传。保持插件更新：文件清理才是真正的控制，而不仅仅是“允许SVG”这个复选框。

在这些工具中粘贴什么样的PixelToPath SVG？

编辑器会接收您提供给它的内容。在导入时会付出不良预设的代价：形状过多、无法捕获的颜色、文件被拒绝。

• 标志、图标、刻字：黑白或海报。这些是纯色块，Figma和Canva只需单击即可对其重新着色。
• 如果您打算修改颜色，请避免使用“照片”。此模式会创建大量微小的形状；Canva通常不会显示任何有用的调色板。
• 在转换之前裁剪原图：更少的背景，更少的节点，在Figma图层中更容易读取的SVG。
• 每种用途都有一个变体：用于Figma的单色SVG（品牌指南）、用于Canva的彩色SVG（帖子）、用于WordPress的同一清理文件（页眉）。

此工作流在何处改变日常

一旦SVG进入工具中，您就不用每次变形都重新转换：

• Figma品牌指南：客户的PNG变成一个您可以重新着色（主要、反转、单色）而无需重新绘制的组件
• Canva帖子：一个SVG，六种活动颜色，清晰的快拍和轮播图
• WordPress标志：页眉中的一个文件，在移动设备和Retina屏幕上都很清晰，比传统的PNG更轻
• 自由职业可交付成果：您移交SVG加上Figma/Canva用户指南。客户不再卡住
• 界面图标：在Figma中批量导入它们，将它们对齐到24像素的网格上，导出该集合

将PNG保留用于照片。对于所有必须改变颜色或保持清晰的内容，PixelToPath + Figma/Canva/WordPress的组合就足够了。