如何在不丢失字体的情况下将 SVG 转换为 PNG？
为什么 SVG 转换为 PNG 输出的大小是声明大小的 2 倍，以及为什么浏览器沙箱在渲染过程中静默丢弃外部字体和链接图像。
SVG 中没有像素。它是 XML：路径、填充、视口和可能的 <text> 元素，命名了文件实际上并不包含的字体。将其光栅化为 PNG 意味着选择一个像素网格并将这些形状绘制到上面，因此有两个因素决定您是否喜欢结果。您请求了多少像素，以及渲染器在绘制时被允许加载什么。
我们在您的浏览器中运行该渲染。文件进入一个 blob URL，一个 <img> 元素加载它，浏览器将其绘制到 OffscreenCanvas 上，WebAssembly 编码器写入 PNG。此应用没有 API 路由和服务器操作，因此未发布的徽标不会在某人的临时存储桶中等待删除计划。大多数 SVG 转 PNG 转换器 首先上传，然后承诺稍后清理。我们的转换器从不将字节发送到任何地方，这正是我们 隐私模型 的核心。
浏览器光栅化 SVG 时实际发生了什么？
您的 SVG 被传递给一个 <img> 元素，这一细节驱动了此页面上的其他所有内容。作为图像加载的 SVG 运行在受限的处理模式下，其中脚本不执行，外部引用不被获取，这被 SVG 2 合规规则 定义为安全处理模式。一旦加载解析，我们使用 drawImage 将其绘制到 OffscreenCanvas 上，读取像素，使用 @jsquash/png 编码，然后对字节运行 oxipng 级别 3。该步骤是无损的。Alpha 在整个过程中都能存活，因此透明徽标最终是透明的。
PNG 实际上会是什么大小？
我们的转换器以 SVG 的固有大小的两倍进行渲染。一个 500x500 的 SVG 最终为 1000x1000。这个倍增为您提供了一个视网膜级别的文件，而这也是当规范要求确切像素数量时人们会遇到的问题。如果浏览器根本没有报告可用的固有大小，我们会在倍增之前替代为 1024x1024，因此 PNG 最终为 2048x2048。CSS 图像规范 涵盖了为什么大小可能会丢失的原因：没有固有宽度或高度的替换元素回退到默认对象大小，而单独的 viewBox 提供了一个没有附加大小的比例。因此，在根 <svg> 上设置宽度和高度为目标的一半。256 进，512 出。
| 根 <svg> 声明的内容 | 我们写入的 PNG |
|---|---|
| width="500" height="500" | 1000 x 1000 |
| width="256" height="256" | 512 x 512 |
| width="64" height="64" (图标) | 128 x 128，通常太小 |
| 没有可用的固有大小 | 2048 x 2048 (1024 回退，倍增) |
为什么我的文本以错误的字体显示？
这是最常见的投诉，这并不是转换器中的错误。指向 .woff2 URL 的 @font-face 规则被视为外部引用，因此安全模式在开始之前阻止该获取。页面周围加载的字体也无法进入，因为在 <img> 中的 SVG 是一个独立的文档，进行自己的字体解析。您得到的是机器可以从字体系列列表中匹配的内容，这在审阅者的笔记本电脑上意味着一个您从未选择的回退。解决方法是停止将文本作为文本进行传输。Illustrator 称之为类型 > 创建轮廓。Inkscape 称之为路径 > 对象转路径。两者将每个字形转换为路径，文件会稍微增大，渲染不再依赖于机器。
为什么我 SVG 中的照片缺失？
相同的规则，不同的症状。如果您的 SVG 通过带有绝对 https URL 的 <image> 元素引入位图，则该 URL 不会被获取，PNG 返回时照片应该在的位置会有一个空洞。data: URI 工作正常，因为没有网络请求被阻止。嵌入的第二个原因是：绘制到画布中的跨域位图会 污染它，然后读取像素会抛出 SecurityError。该失败至少会自我宣布。被阻止的引用是静默的，这就是让人们浪费一个下午的原因。在转换之前，在文本编辑器中打开文件并搜索 http。
我可以将 PNG 转换回 SVG 吗？
不可以，我们也不假装如此。我们的转换器解码 SVG，但无法编码：构建中的编码器写入 JPEG、PNG、WebP、AVIF 和 PDF，24 对跨 11 种格式中没有一种以 SVG 为目标。从像素回到路径是追踪，机器猜测边缘的位置，而追踪的字标通常不够接近以进行交付。如果您仍然拥有原始文件，请重新导出。如果您真正需要的是更大尺寸的光栅图像，我们的 放大器 运行 Real-ESRGAN，并始终写入 PNG：它将一个 400x269 的文件放大到 1600x1076，放大 4 倍。
我如何将 SVG 转换为 favicon 集？
该 图标生成器 直接接受 SVG，而压缩器、调整大小工具 和裁剪工具则不接受：这三者仅接受 JPEG、PNG、WebP、AVIF 和 GIF。它将您的 SVG 渲染到一个方形画布上，大小为其两个维度中较大的一个或 512 像素，以较大者为准，因此一个 64x64 的图标仍然会获得一个 512 的画布进行下采样。输出七个文件：favicon.ico 包含 16、32 和 48，favicon-16x16.png，favicon-32x32.png，一个 180px 的 apple-touch-icon.png，android-chrome-192x192.png，android-chrome-512x512.png 和 site.webmanifest。为什么那个 .ico 仍然占用 4.6 KB 是一个单独的论点。一次一个文件，10 MB 限制。转换器 是批处理工具：每次 10 个文件和 50 MB。
我应该在之后压缩 PNG 吗？
通常是的，模式比任何滑块更重要。在一个 942.4 KB 的透明 PNG（900x606）上，无损路径（oxipng 级别 3）为 383.9 KB，减少了 59%，每个像素与输入完全相同。调色板路径（imagequant）将相同的文件压缩到 98.3 KB，减少了 90%，通过将其减少到 256 种颜色。平面矢量艺术是调色板模式的最佳案例，因为一个有六个填充的徽标没有 256 种颜色可以放弃。压缩还会剥离所有元数据。在 压缩器 中运行两者，并保留任何一个保持良好的。
接下来做这个：在文本编辑器中打开 SVG，搜索 http 以捕获链接的字体和图像，将任何活动文本轮廓化，然后在根 <svg> 上设置宽度和高度为目标尺寸的一半，并将其放在 /convert/svg-to-png 上。如果 PNG 将用于网页，请直接发送到压缩器，并且 PNG 与 WebP 的透明文件数字 告诉您是否根本需要更改格式。如果它将用于文档，我们关于 JPG 转 PDF 的说明 涵盖了转换图像最终的页面大小。