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