图片转 SVG

装着图片的 SVG 到底是什么

SVG 文档是文本文件，装图片的元素是 `<image>`。它不指向别处的文件，而指向一个 `data:` URL——你的图片，base64 编码后以文本写进文档里。这就是文件能自包含的原因：发给别人时图片跟着一起走，没有文件夹、没有失效链接、没有坏缩略图。

两个属性决定几何关系，各司其职。`viewBox` 是图片自己的像素网格——“这张图是 4000 × 3000 个单位”；`width`、`height` 是这个文件声明自己有多大。声明成 210 mm 而 viewBox 说 4000 像素并不矛盾：这正是矢量容器的意义，两者之间的比例就是图片自身的比例，所以任何情况下都不会被拉伸。

文件能在所有浏览器、Illustrator、Inkscape、Affinity、Word、PowerPoint，以及那些要求 SVG 的上传系统里打开——因为它是一个有效的 SVG 文档，而不是仿制品。它对打开它的程序只有一个要求：看懂里面装的是什么格式。JPEG 和 PNG 是通用的，而 SVG 里装 BMP 或 AVIF 就不是每个编辑器都读得懂。这正是本页面可以在导入时把图片重新编码成 PNG 或 JPEG 的全部原因。

矢量容器里的像素：什么依然清晰，什么不会

容器可以任意缩放而不损失任何东西，这本身就值得拥有。一张 600 像素的 PNG 以 5 cm 放进幻灯片，通常会被排版程序重采样，因而稍微变软；同一个 PNG 放进 SVG，则是正好 600 像素映射到 5 cm，一像素不动。透明度保留，颜色值就是文件里的值，除非你要求，否则没有重新编码。

不会发生的是细节增加。把 SVG 放大到足够近，你看到的是里面那张图的像素，因为那里就是像素——一张写进文本的固定网格。这类 SVG 在“文件声明的大小”上清晰，而且在任何尺寸下都是同一张图。把这叫做“矢量艺术”是撒谎，而正是这个谎让人以为图片转 SVG 能救活一个小 Logo。

所以诚实的用例是那些“一个自包含文件、尺寸受控”就够的场景：打印模板里的标签、必须保持单文件的幻灯片配图、规格书上的 Logo、只接受 SVG 的上传系统、不能依赖一整个图片文件夹的文档。至于要在全屏观看的照片，普通 JPEG 更小也一样好。

描摹，以及为什么这个页面不做描摹

把像素变成图形有个名字：描摹（tracing，也叫矢量化）。常见做法是把图片压到少量颜色、找出每个色块的轮廓、简化轮廓，然后写成 `<path>` 元素。用在平面图形上（Logo、图标、图表、扫描签名、只有几种颜色的地图）效果确实比原始位图更好，因为它真的变成了图形。

用在照片上则会产生成千上万条极小路径、一个比 JPEG 大很多倍的文件，以及一张像被复印机折磨过的海报。这不是描摹器的 bug；这是你让一张照片用轮廓描述自己时必然发生的事。

因此本工具做的是封装而不是描摹，并说明你需要哪一种。如果你有平面图形、想要真正的矢量，专门的描摹器才是对的工具——Inkscape 的 “Trace Bitmap” 免费且恰好擅长这件事——这里不会假装做过它。

原始字节、PNG 或 JPEG：三种载体

保留图片到达时的样子是最小、最诚实的选择：字节原样进去，不重新编码，唯一代价是打开 SVG 的程序必须懂图片原来的格式。PNG 是安全的通用载体，保留透明度但文件更大；JPEG 是小载体，不能保留透明度，且会按你选的质量损失一点。

选择在表单上，计划尺寸会在你运行任何东西之前先打印出来。这些都不改变图片：每种情况下 viewBox 都保留原始像素网格，所以声明的尺寸和里面的数据永远不会互相矛盾。