SVG 转 PNG
SVG to PNG
按任意倍率把 SVG 渲染成 PNG、JPEG 或 WebP,背景可透明也可填色。
把 SVG 变成位图,是目的地接受不了矢量时做的事:社交卡片、邮件、应用图标。麻烦在于浏览器是孤立地渲染 SVG 的——没有链接的图片、没有外部样式表、没有网页字体——所以出来的不总是你页面上显示的样子。
把 SVG 放到这里
也可以把标记粘到下面。
源文件
怎么用
拖入文件或粘贴标记
固有尺寸从 width/height 或 viewBox 读取,不得不猜的时候页面会说。
设倍数
它乘以固有尺寸,结果的像素尺寸显示在滑块旁边,所以 24px 图标的 3× 明明白白是 72px,而不是一个猜测。
选透明或背景
JPEG 没有 alpha,所以选它会强制一个背景色,而不是悄悄合成到黑色上。
常见问题
文字出来是错的字体。
渲染器不能获取网页字体——这样栅格化的 SVG 不加载任何外部资源。导出之前在编辑器里把文字转成路径;这是对必须在任何地方栅格化一致的 SVG 的标准建议。
它说浏览器拒绝渲染。
通常是缺 xmlns 属性——没有它的 SVG 不是浏览器会绘制的 XML——或者标记格式错误,或者引用了它不被允许加载的资源。
我的网站该栅格化吗?
通常不该。SVG 在任何像素密度下都清晰,往往比 PNG 还小;给 CSS 用的话,data URI 编码工具能让它保持矢量。只在下游确实读不了 SVG 时栅格化。
可以从这些接进来
SVG 优化压缩
SVG Optimiser
清掉编辑器留下的冗余、合并变换、缩减路径精度,并把渲染结果并排对比。
图片转 SVG 矢量
Image to SVG
把位图描摹成 SVG 路径,适合 logo 和线稿,不适合照片。
SVG 路径编辑器
SVG Path Editor
在绝对和相对命令之间转换路径数据,做平移、缩放、旋转和方向反转,并显示包围盒和实时预览。
SVG 编辑器与解读
SVG Editor and Explainer
一边在实时渲染旁边改 SVG,一边解释这个文件:viewBox 与缩放、变换、每一条路径命令、继承来的填色、白白占地方的字节,以及它在 <img>、data URI 和内联三种用法下各会坏在哪里。
接下来
这些工具吃得下当前工具的产出,结果可以直接送过去。
Favicon 网站图标生成
Favicon Generator
一次生成整套图标——ICO、各尺寸 PNG、苹果触摸图标、web manifest——外加可直接粘贴的 HTML。
图片尺寸调整
Image Resizer
按像素、百分比或最长边缩放,可锁定宽高比并批量套用预设。
PNG 压缩
PNG Compressor
量化调色板并重写 deflate 数据流,在不改变尺寸的前提下减小 PNG 体积。
SVG 优化压缩
SVG Optimiser
清掉编辑器留下的冗余、合并变换、缩减路径精度,并把渲染结果并排对比。
图片抠图去背景
Background Remover
在 OKLab 色彩空间中抠掉纯色或均匀背景,输出透明 PNG,并可用画笔修补边缘。
EXIF 信息清除
EXIF Remover
删掉照片里的相机、GPS 和编辑记录等元数据,像素本身分毫不动。