SVG 转 PNG

SVG 和 PNG 各有适用场景，了解它们的本质区别有助于做出正确的格式选择。

SVG（可缩放矢量图形） 是分辨率无关的格式——它用数学公式描述形状，可以在任何尺寸下完美渲染，不会失真。SVG 是 Logo、图标、插画等需要多尺寸显示的素材的理想格式。文件本身是可读的 XML，可以用 CSS 和 JavaScript 进行样式修改和动画处理。

PNG（便携式网络图形） 是光栅格式——在固定分辨率下存储像素网格。支持无损压缩和完整的 Alpha 通道透明度，是 Web 图标、应用资源的标准格式，也是不支持 SVG 的平台（邮件客户端、部分 CMS、旧版应用）上的通用选择。

需要转换为 PNG 的场景

• 邮件模板——大多数邮件客户端无法可靠渲染 SVG
• 应用商店和系统图标——iOS、Android、macOS 要求特定像素尺寸的 PNG
• 社交媒体上传——各平台普遍接受 PNG，SVG 支持参差不齐
• 设计稿交付——对于不使用 SVG 工具链的开发者，PNG 更易使用
• 第三方平台——CMS、广告平台、数据分析工具通常只接受 PNG

多倍率 PNG 导出是 iOS、Android 和 Web 图标交付的标准工作流。

为什么需要多个倍率

现代设备屏幕的像素密度各不相同——手机屏幕可能将 3 个物理像素压缩到 1 个逻辑像素中（即 3x / @3x）。如果只导出 1x PNG 并在 Retina 或高 DPI 屏幕上显示，操作系统会将其放大，结果会模糊。导出 2x 和 3x 版本可以为设备提供所需的额外像素密度。

倍率命名规范

• 1x — 基础分辨率，适用于标准显示屏。文件名：icon.png
• 2x（@2x） — 双倍像素密度，适用于 Retina 显示屏（大多数现代手机和 MacBook）。文件名：icon@2x.png
• 3x（@3x） — 三倍像素密度，适用于最新款 iPhone 和高端 Android 机型。文件名：icon@3x.png

DPI 与 Apple @2x 识别

将 DPI 元数据设置为 144，macOS 和 iOS 会将该 PNG 识别为 @2x 素材——直接拖入 Xcode 或 macOS Finder 时特别有用。DPI 值不改变像素尺寸，只写入一个元数据标签，应用程序通过它判断图片的预期显示尺寸。

currentColor 是 CSS 关键字，告诉 SVG 元素继承父元素的文字颜色（color 属性）。这是图标库实现主题化的标准技术——图标颜色跟随上下文自动变化。

将 SVG 内联嵌入 HTML 时，currentColor 会继承父元素设置的 color 值。但导出为 PNG 时，没有 CSS 上下文，浏览器会将 currentColor 解析为默认值（通常是黑色），可能与预期的颜色不符。

颜色替换的工作原理

在光栅化之前，工具会扫描 SVG 源代码，将所有 currentColor（fill、stroke、stop-color 等属性中的）替换为你指定的 Hex 颜色值。最终生成的 PNG 会以你选择的颜色精确渲染。

什么时候需要开启

• PNG 预览中图标完全显示为黑色或不可见
• 需要在彩色背景上导出白色图标
• 图标需要以品牌色输出用于设计稿交付

工具会自动检测包含 currentColor 的 SVG，并在文件行显示蓝色提示徽标，提醒你按需开启颜色替换功能。