如何将 SVG 转换为用于印刷和网页的 PNG
为什么要将 SVG 转换为 PNG？
SVG（可缩放矢量图形）本应是完美的格式。它将形状存储为数学路径，而不是像素，所以一个 logo 可以从一个微小的网站图标缩放到一块巨大的广告牌，而不会损失任何一点锐度。那我们为什么还要讨论转换它呢？因为在现实世界中，许多平台根本不支持它。你试试上传一个 SVG 到默认的 WordPress 媒体库，就会遇到安全限制。大多数按需打印服务，如 Printful 和 Redbubble，都要求使用栅格格式——PNG 或 JPEG——因为它们的工业级打印软件（RIP，即光栅图像处理器）需要的是像素，而不是 XML。甚至电子邮件客户端和旧版的 Microsoft Office 要么无法一致地渲染 SVG，要么就直接罢工。这时候 PNG 就派上用场了。PNG 提供了关键的 Alpha 透明通道，能让你的 logo 背景保持透明，而不是在后面加一个白色的方框。它还使用无损压缩，所以你每次保存文件时都不会损失质量。但缺点是？PNG 是依赖分辨率的。一旦你把它导出为 300 像素宽，你就不能把它拉伸到 3000 像素，否则就会变成一团马赛克。这是根本性的权衡，也意味着从一开始就设置对导出尺寸是整个过程中最重要的一步。
理解分辨率：PPI、DPI 以及该用什么数值
我们先来搞清楚这一点：分辨率是整个过程中最令人困惑的部分。人们总是把 DPI（每英寸点数）和 PPI（每英寸像素）挂在嘴边，好像它们是一回事，但其实不是。PPI 是你能控制的，它是你正在创建的数字图像的像素密度。DPI 是实体打印机做的事情——它在纸上喷了多少个微小的墨点。当你将 SVG 导出为 PNG 时，你设置的是 PPI。 对于网页图形，我们先把话说清楚：“网页用 72 PPI”这条老规矩早就是老古董了，毫无意义。真正重要的是绝对的像素尺寸。以它将要显示的精确尺寸导出你的图形。如果你的主图位置是 1200 × 600 像素，那就导出一张 1200 × 600 像素的 PNG。对于现代的 retina 和 HiDPI 屏幕，你还需要一个“2x”版本——也就是 2400 × 1200 像素——来保持图像的清晰度。 对于印刷，这些数字才真正重要起来。行业标准是在最终物理尺寸下计算出的 300 PPI。如果你正在设计一张标准的 3.5 × 2 英寸名片，你的 PNG 至少需要是 1050 × 600 像素（即 3.5 × 300 和 2 × 300）。对于一张大的 A4 海报，你需要一张 2480 × 3508 像素的图像才能达到 300 PPI 的目标。唯一的例外是用于远距离观看的大幅印刷品，比如横幅，通常用 150 PPI 甚至 96 PPI 也完全足够，因为距离会让像素融合在一起。 这种灵活性正是其核心优势。你的原始 SVG 是与分辨率无关的。你可以从同一个源文件生成一个用于微小图标的 PNG 和另一个用于巨型海报的 PNG，而完全不需要动原始文件。这是你从一张低分辨率 JPEG 开始时所不具备的能力。
如何使用 CocoConvert 将 SVG 转换为 PNG
因为 CocoConvert 在你的浏览器中运行，你不需要安装 Illustrator 或 Inkscape。转换过程在我们的服务器上处理。过程很简单，但别想都不想就猛戳“转换”按钮，要先检查一下设置。精髓在于细节。 1. 前往 [SVG 到 PNG 转换器](/convert/svg-to-png) 页面。 2. 将你的 SVG 文件拖到上传区域，或使用“选择文件”按钮。50 MB 的文件大小限制很宽松；大多数 SVG 都很小，通常不到 1 MB。 3. 这是关键步骤。在转换前，打开“输出设置”面板。你可以在这里设置目标的像素宽度。使用你之前计算出的数字——例如，对于那份 300 PPI 的 A4 打印任务，设置为 2480 像素。CocoConvert 会自动保持原始的宽高比。只有当你需要强制指定一个高度并可能扭曲图像时，才勾选“自定义尺寸”复选框。 4. 背景默认为透明，保留了 Alpha 通道。这通常是你想要的。如果你需要一个纯色背景（比如，为了后续工作流只接受 JPEG），你可以在这里设置一个颜色，而不是之后再到 Photoshop 里修改。 5. 点击“转换”，然后下载你的新 PNG 文件。 关于字体，这里快速提醒一下：CocoConvert 使用标准的浏览器引擎来渲染 SVG。这意味着如果你的 SVG 通过 CSS 的 `@font-face` 规则使用了特殊字体，除非该字体已嵌入 SVG 文件本身，否则它可能无法正确显示。任何在网页上跟字体渲染斗争过的人都懂这种特别的头疼。通用的解决方法是在导出 SVG 之前，在你的矢量编辑器中将文本转换为轮廓（或路径）。在 Illustrator 中，是“文字 > 创建轮廓”。在 Inkscape 中，是“路径 > 对象到路径”。这会把文本变成形状，并保证它在任何地方看起来都一模一样，这对于 logo 来说无论如何都是一个好习惯。
批量转换多个 SVG 文件
如果你正在处理一个图标库、一个 UI 工具包或一个品牌资产文件夹，一个一个地转换文件是根本行不通的。CocoConvert 允许你批量转换。只需在文件选择器中一次性选择所有 SVG 文件（按住 Shift 或 Ctrl/Cmd），它们将全部使用相同的输出设置进行处理。你转换后的 PNG 文件会打包在一个整洁的 ZIP 压缩包里。 在运行批量任务时，有几个行为需要了解。你选择的宽度设置会应用于批次中的每个文件，但每个独立文件的宽高比都会被保留。例如，如果你在同一批次中有一个 24 × 24 像素的正方形图标和一个 1200 × 300 像素的宽幅横幅，并且你将输出宽度设置为 512 像素，那么图标将变成 512 × 512 像素的 PNG，而横幅将变成 512 × 128 像素的 PNG。对于混合尺寸的批处理，这几乎总是你想要的结果，但在处理一个巨大的文件夹之前，最好还是先了解这一点。 另外，注意你的输入文件名。输出的 ZIP 文件会镜像它们，只是把扩展名换成 .png。如果你的源文件命名得很好，比如 `icon-home.svg` 和 `icon-cart.svg`，你的输出也会同样井井有条。如果它们被命名为 `download(1).svg`，你得到的将是一团糟。在上传前先整理好你的文件名。 我们得明确什么场景用什么工具。CocoConvert 是为方便而生的，非常适合转换几十个甚至几百个文件。如果你面对的是一个包含 500 多个文件的文件夹，用于一个庞大的自动化流程，那么使用像 Inkscape 或 ImageMagick 这样的命令行工具会更合适。用适合你任务规模的工具。
转换前准备 SVG：常见陷阱
你最终的 PNG 文件质量取决于源 SVG 的质量。这就是典型的“输入的是垃圾，输出的也是垃圾”问题。如果你的转换结果看起来不对劲，问题几乎总是潜藏在 SVG 代码本身。以下是需要调查的最常见的罪魁祸首。 有缺失的部分或奇怪的白色方块？这通常指向损坏的剪切路径或蒙版。SVG 可以用一个形状来遮罩另一个形状，但如果蒙版和形状之间的引用关系被破坏了（通常是从一个应用导出并在另一个应用中编辑导致的），渲染器就懵了。如果你看到这种情况，用文本编辑器打开 SVG，搜索带有错误 ID 引用的 `clipPath` 或 `mask` 元素。 输出尺寸不对？罪魁祸首很可能是缺失了 `viewBox` 属性。一个格式良好的 SVG 需要一个 `viewBox`（比如 `viewBox='0 0 100 100'`）来定义其内部坐标系并使其能够正确缩放。一些工具导出的 SVG 只有 `width` 和 `height` 属性，这可能导致渲染器忽略你请求的输出尺寸，而只使用文件的字面像素尺寸。解决方法是编辑 SVG 并添加一个与文档尺寸匹配的 `viewBox`。 矢量文件里有像素化的部分？你的 SVG 可能包含一个嵌入的光栅图像。是的，SVG 可以在 `<image>` 标签内隐藏 JPEG 或 PNG。例如，如果一个 logo 有照片纹理，那么该纹理的清晰度永远只能达到原始嵌入图像的水平。将整个文件放大到 4000 像素宽并不会神奇地让那一部分变得高清。 印刷颜色不对？记住，SVG 和 PNG 都是 RGB 格式，默认情况下处于 sRGB 色彩空间。PNG 无法存储 CMYK 颜色数据。如果你的打印机绝对要求 CMYK 文件，你无法通过转换为 PNG 来实现。你需要回到你的矢量编辑器，导出一个 CMYK 原生格式，如 TIFF 或一个正确配置的 PDF。
转换后优化 PNG 文件
如果你发现刚刚创建的漂亮、高分辨率的 PNG 文件大得惊人，可别惊讶。一个来自复杂 SVG 的可用于印刷的 PNG，比如一个带有渐变的 2480 × 3508 像素文件，可以轻松超过 15–25 MB。对于网页来说，这绝对行不通。对于印刷，大小不是那么重要，但许多打印服务有上传限制，所以如果可能的话，将文件保持在 10 MB 以下是个好习惯。 对于网页传输，优化不是可选项，而是必选项。你必须用无损优化器处理你的 PNG 文件。像基于浏览器的 Squoosh、命令行工具 `pngquant` 或网页服务 TinyPNG 这样的工具，可以在质量没有任何肉眼可见损失的情况下，将文件大小削减 40–70%。它们的原理是智能地减少调色板并应用更高效的压缩算法。一个 2 MB 的 PNG 通常可以使用 `pngquant --quality=65-80 yourfile.png` 压缩到 300 KB 以下。 你还应该问问自己，PNG 是否真的是网页的最佳最终格式。如果你的图像不需要透明度，将其转换为 WebP 是一个明智之举。WebP 在现代浏览器中享有普遍支持，并且通常生成比同等 PNG 小 25–35% 的文件。对于纯网页资产，你可以用 CocoConvert 直接从 SVG 转换到 WebP，完全跳过中间的 PNG 步骤。 对于印刷，做法恰恰相反：不要优化。将你下载的完整分辨率、未经压缩的 PNG 直接发送给你的打印服务商。一些服务，如 Printful，特别警告不要上传压缩过的 PNG。在你的屏幕上完全看不见的有损压缩瑕疵，在打印出来时可能会变得非常显眼。
快速参考：按使用场景划分的设置
你不应该每次转换文件都得算一遍。把这一节加到书签里，或者当个小抄备用，这里有最常见的导出设置。 网站图标 (Favicon) (网页)：导出为 512 × 512 像素。现代的 favicon 生成器会用这个大的 PNG 为你创建所有更小的尺寸（16、32、180、192 像素）。 社交媒体头像：使用 800 × 800 像素作为你的最低标准。尽管像 Twitter/X 和 Facebook 这样的平台会把它显示得更小，但上传一个更大的源文件能为它们的压缩算法提供更好的数据，从而得到更清晰的最终图像。 开放图谱 / 社交分享图片：1200 × 630 像素。这是 Facebook 推荐并现在几乎被所有人使用的标准宽高比。 名片 (印刷, 3.5 × 2 英寸 @ 300 PPI)：1050 × 600 像素。如果你的打印机要求出血，每边增加 0.125 英寸，使你的文档尺寸变为 1125 × 675 像素（每个维度总共增加 75 像素）。 A4 海报 (印刷, 300 PPI)：2480 × 3508 像素。 信纸尺寸海报 (印刷, 300 PPI)：2550 × 3300 像素。 T恤印刷区域 (12 × 14 英寸 @ 300 PPI)：一个常见的尺寸是 3600 × 4200 像素。 Retina 网页图形 (2x)：将你在 CSS 中定义的尺寸加倍。一个样式设置为 600 × 400 像素的图像需要一个 1200 × 800 像素的源 PNG。 所有这些像素值都可以直接输入到 [SVG 到 PNG 转换器](/convert/svg-to-png) 页面的宽度字段中。对于需要定义两个维度的非正方形图像，只需使用自定义尺寸切换开关。虽然这个列表是一个很好的起点，但最终的权威来源永远是特定打印服务的指南。Redbubble、Printful、Gooten 等公司都为他们销售的每种产品发布了详细的像素和 DPI 要求。在大批量印刷前，一定要核对它们的技术规格。