在线裁剪 SVG 图片

通过收紧 viewBox 或栅格化为 PNG 来裁剪 SVG 图标与插画。免费、坦诚说明矢量裁剪的局限,100% 浏览器本地运行。

上传图片

拖放或点击上传

支持 PNG、JPG、WebP、GIF、BMP

Step by Step

How to 裁剪 SVG

01

上传 SVG 文件

将 .svg 文件拖入页面或点击上传,工具会通过浏览器原生 SVG 引擎渲染到 Canvas。

02

选择裁剪区域

在渲染好的 SVG 上拖动裁剪框,框选要保留的可见区域。

03

预览裁剪效果

预览以目标输出分辨率显示裁剪后的 SVG,导出前即可确认清晰度。

04

下载为 PNG 或 SVG

点击下载,默认输出为裁剪区域的 PNG 栅格图;也可切换为 SVG 模式,下载一份 viewBox 已收紧的矢量副本。

Core Features

What You Get

使用浏览器原生引擎渲染 SVG,渐变、描边、滤镜均能正确显示
提供两种输出:栅格化为 PNG / WebP,或下载已更新 viewBox 的矢量 SVG
导出分辨率支持 1x 至 4x 自由调节,让 PNG 在 Retina 屏依然锐利
导出 PNG 时保留裁剪区域以外的透明背景
按所选分辨率实时预览,方便对齐细节
100% 浏览器本地处理,SVG 文件不会上传到任何服务器
Use Cases

When to Use This

为图标合集逐个收紧 viewBox,让每个图标都贴合各自的包围盒
把 SVG 插画栅格化为裁剪后的 PNG,方便插入 PPT、Keynote 或社交平台
从 SVG 信息图中提取某一区域并单独输出为 PNG
在嵌入 HTML 或 README 之前,裁掉导出的 SVG Logo 四周空白
FAQ

Frequently Asked Questions

裁剪后还能保持矢量 SVG 吗?

看模式。默认输出是裁剪区域的栅格 PNG,便于直接放入大多数软件。如果切换为 SVG 模式,工具会改写根节点的 viewBox 与 width / height 属性,让裁剪区域成为新画布,文件依然是矢量。

SVG 裁剪和 JPG / PNG 裁剪有何不同?

栅格裁剪只是丢弃像素;SVG 裁剪要么 (a) 通过修改 viewBox 限制可见区域,保留所有原始 path;要么 (b) 把可见区域栅格化为 PNG。两种模式都支持。选择 PNG 输出之前,新 viewBox 之外的 path 不会被真正删除。

可以裁剪 Heroicons、Lucide 等图标库里的 SVG 吗?

可以。把 .svg 拖进来,沿着图标拖动裁剪框,再选择收紧 viewBox(仍是矢量,适合做图标字体),或者导出 256×256 的 PNG 供不支持 SVG 的地方使用。

渐变和透明效果会被保留吗?

导出 PNG 时会完整保留——渐变、不透明度、羽化描边的呈现与 Chrome 渲染结果完全一致。SVG viewBox 模式下,文件中的 <defs> 块不会被改写,所以渐变和 Alpha 信息完全原样保留。

裁剪后的 SVG 导出多大的 PNG 比较好?

网页用图建议导出 2x 显示尺寸(例如 256 px 的位置导出 512 px 宽 PNG),在 Retina 屏上依然锐利。打印用图建议按 300 DPI 计算,4 英寸宽的成品大约需要 1200 px 宽的 PNG。