# SVG 转图片 矢量图转 PNG、JPEG 或 WebP，尺寸随你定
说个尺寸。矢量图本来就没有尺寸可丢。
> 在浏览器里把 SVG 转成 PNG、JPEG 或 WebP，尺寸随你定。给宽度、给倍数，或者给一个框，还能顺手出 @2x 和 @3x。透明保住，什么都不上传。
这是一个浏览器交互工具，地址是 https://abox.tools/zh/svg-to-image/。文件在运行该浏览器的设备上处理。主动分享和可选联网功能都在页面上说明。下文是它的文字说明；使用工具请打开该地址。
## 你的 SVG 文件**在浏览器里处理**，无须上传处理。
光栅化用的，就是刚把这张图显示在你屏幕上的那个引擎。文件从你的硬盘上读进来，根标签由 `src/svg.js` 里一百来行你能读的代码改写成你要的尺寸，再画到浏览器自带的画布上。这个工具没有任何联网功能，不取东西，也不发东西。就算真有，这个页面的另一头也没有服务器能接住一个 logo。
- ✗ 不上传
- ✗ 不注册
- ✗ 没有水印
- ✓ 断网能用
- ✓ 开源
## 不上传怎么把 SVG 转成 PNG
1. **选 SVG。** 拖一个到下面的方框里，或者挑一整个文件夹一次转完。浏览器直接从你的硬盘上读，这期间没有东西发出去。每一行都写着这个文件认为自己有多大，而且会分清这个尺寸是来自它的 `viewBox`，还是因为文件根本没声明尺寸而替它假定的。
2. **定多大。** 给个倍数最省事，整批处理时也最合适：每张图都从自己的尺寸出发去放大，所以一套图标之间的比例关系不会乱。其他办法是给宽、给高、给最长边，或者给一个两边都定死的框。这里填个大数字不像处理照片那样要付代价，因为图是按那个尺寸重画一遍，不是硬拉过去的。
3. **需要高分屏的那几份，就一起出了。** 手机和 Retina 笔记本每个 CSS 像素要画两到三个设备像素，所以一个 200 像素的 logo，背后得垫一张 400 或者 600 像素的文件。勾上 `@2x` 和 `@3x`，出来的文件名正是 Xcode、安卓工具链和 CSS `image-set()` 各自期待的那种，而且每一份都严格是第一份的两倍或三倍，不是各自取整。
4. **挑格式，顺便定透明怎么办。** 没有特别理由就用 PNG：无损，保得住透明，大片纯色在它里面压得也好。JPEG 根本没有透明可言，所以不管你挑不挑，都会给它垫一个背景色，不垫的话每一个透明像素都会变黑。WebP 两样都行，文件还更小，代价是老一点的软件读不了。
5. **下载之前先看预览。** 预览由写文件的同一段代码、拿你的文件、在你的机器上画出来。一张图变成像素时有两件事会变，而这两件在预览里都看得见：只有半个像素宽的发丝线会发灰，文字则用这台电脑上有的字体来画，而不是从网上取一个。
6. **把文件拿走。** 一个文件一个下载，或者整批打成一个 zip。名字跟着来源的 SVG 走，多出来的那几份带 `@2x` 和 `@3x` 后缀。两个文件要是会重名，会给它们编号，而不是让其中一个悄悄把另一个盖掉。
## 说得更细的版本
[怎么把 SVG 转成合适尺寸的 PNG](https://abox.tools/zh/guides/convert-an-svg-to-png/): 矢量图自己没有像素尺寸，所以这个数字由你定。屏幕、应用图标和印刷各自的数字从哪儿来，以及一张图纸变成像素那一刻会发生什么变化。
## 工具箱里还有
- [图片转 SVG](https://abox.tools/zh/image-to-svg/): 一个形状，一条轮廓。不该有的东西，点一下就好。
- [身高对比图](https://abox.tools/zh/compare-heights/): 把身高打进去，把图带走。为了画它，不会往外送任何东西。
- [商家资料预览](https://abox.tools/zh/business-profile-preview/): 把内容打进去，它就变成 Google 会画的那张卡片。为了画它，不会往外送任何东西。
- [图片压缩](https://abox.tools/zh/compress-image/): 说个大小，剩下的它来算。
## 常见问题
### 我的 SVG 会传到什么地方去吗？
不会。文件由你自己的浏览器在你自己的硬件上读进来，再由那个负责渲染你看到的每一张图的引擎画到画布上，然后作为下载还给你。这个工具没有任何联网功能，不取东西，也不发东西。页面的 `Content-Security-Policy` 把它可能联的地址全列了出来，没有一个是本站的。
### SVG 该转成多大？
读它的那个东西要多大，就乘上它将要出现的那块屏幕的设备像素比。一个占 200 CSS 像素的 logo，Retina 笔记本上要 400，近几年的手机上要 600，这里的 `@2x` 和 `@3x` 就是干这个的。做应用图标或者商店素材，那是商店给你一个确切数字，照着填。什么依据都没有的时候，最长边 1024 是个好用的默认值，够大多数场合用，也还发得动邮件。
### 放大会掉画质吗？
不会。这也是唯一一处这个回答能老老实实说“不会”的地方。矢量图是指令，不是像素，浏览器会按要的尺寸把曲线重画一遍。从一个 24 像素的图标出发画到 4000 像素，跟 24 像素时一样锐利。反过来就不行了：一旦变成 PNG，它就跟别的图一样是像素，所以要多大就直接按多大转，别转完再去缩放。
### 我的 SVG 没写宽高，出来是多大？
看 `viewBox`，有的话就用它。它的宽高是用户单位而不是像素，但那是文件里仅有的数字，浏览器也就把它当成这张图的自然尺寸。要是连 viewBox 都没有，页面会在那一行旁边标上*假定*，并按 300 × 150 处理，一个 `![]()
` 本来也是这么画它的。哪种情况都不妨碍你自己指定尺寸，指定了就按那个画。
### 为什么 PNG 里的文字变了样？
因为字体不在 SVG 里。一个画文字的 SVG 只是点了字体的名字，剩下的交给机器自己去找，而那种用 `@import` 从 Google Fonts 拉字体的文件，在这儿什么都拉不到：经由 `![]()
` 绘制的 SVG 不许取任何东西，这跟拦住它偷偷把你文件送出去的是同一条规则。解决办法每个设计师都知道：导出之前在绘图软件里把文字转成路径。转完它就是几何图形了，到哪儿都长一个样。
### 能一次转好几个文件吗？
能。列表上每个 SVG 都按同一套设置渲染，整批打成一个 zip。整批处理时通常该选倍数，比如“按文件自己声明的尺寸放大 4 倍”，因为这样每张图都是从自己的尺寸出发，而不是被一起硬拽到同一个像素数上。点任意一行，就能把那张换进预览。
### 有尺寸上限吗？
有，是浏览器的上限，不是我们的。画布过了每边 16384 像素左右就撑不住，iPhone 和 iPad 上的 Safari 大约停在 1670 万像素的面积，也就是 4096 × 4096。超过这个数，页面会先警告你，而不是甩给你一张空白图，而空白正是浏览器撑不住时的表现：`toBlob` 什么都不返回，连个说明原因的报错都没有。超过一亿像素的，工具直接拒绝，因为那还没编码一个字节，画布本身就已经 400 MB 了。
### 透明会怎么样？
PNG 和 WebP 都保住。JPEG 根本没有 alpha 通道，所以不管你要不要，都会在整张图后面垫一层颜色，不垫的话所有透明的地方都会变黑，那看着像个 bug，而不像 JPEG 该有的样子。选 PNG 时也想垫个背景色，同样是很正常的需求：它会把图压平到那个颜色上，而不是留一个洞。
### SVG 里带脚本或者外部图片，它能读吗？
能读，而且浏览器肯画的部分它都会画出来。经由 `![]()
` 加载的 SVG 处在*安全静态模式*：脚本不跑，外部引用不取，动画也不播，你拿到的是第一帧。所以一个里面引了远程 `` 的文件，出来会缺那一块。那是浏览器替你拒掉的，也正因如此，这个页面才敢放心打开一个从没见过的文件。
### 这个跟图片缩放有什么区别？
区别在源头。[图片缩放](https://abox.tools/zh/resize-image/)从像素出发，JPEG 或者 PNG，所以放大就得编造本来不存在的细节。这个从一张图纸出发，没什么可编造，也没有值得操心的上限。你手上是 SVG，这边能给你锐利的结果；你手上是照片，那边才对路。
### 免费吗？要注册吗？
免费，没有账号，不用登录，没有试用期，也没有水印。文件的数量和大小同样没有上限，因为没有哪台服务器在为它们掏钱，活是在你自己的机器上干的。本站带广告，经费就是这么来的，广告拿不到关于你文件的任何信息。
### 断网能用吗？
能。页面开一次之后断网，它照干不误。这也是证明“什么都没上传”最省事的办法。一个把图稿送出去渲染的工具，拔线那一刻就停了。
## 这条隐私承诺怎么核实
- **处理在这个浏览器里完成。** 本工具在浏览器里处理输入和结果，处理代码不把它们上传去处理。Content-Security-Policy 限制可用资源和连接目的地，但已允许的主机仍可接收请求。策略不检查载荷，不能单独证明什么都没有发出。请把具体操作的请求与源码核对，或断网完成该本地操作。
- **这里没有任何东西会去联网取数据。** 整个 `src/` 里，一个 `fetch`、一个 `XMLHttpRequest`、一个 `sendBeacon` 都找不到。整个光栅化就是一个装着你自己文件 blob 的 `![]()
`、一次往画布上的 `drawImage`，再加一次 `canvas.toBlob`。
- **SVG 是文档，而这是它动弹不得的那种模式。** 一个 SVG 里可以装 `