裁剪并去除 SVG 四周留白
拖拽 SVG 文件到此处，点击虚线框任意区域选择文件，或直接在键盘上按 Cmd+V 粘贴代码。
为什么需要裁剪 SVG 的多余留白？
矢量图标和设计稿在导出时常带有大片无用画布，影响布局并增加文件体积。通过 ViewBox 重新校准可解决以下问题：
解决 UI / 网页布局对齐难题
从 Figma、Illustrator 导出的图标通常包含固定的大画布边距，在网页中使用 Flex/Grid 居中对齐时会导致视觉偏移。裁剪后可实现 0 边距精准对齐。
优化 ViewBox 与 CSS 缩放行为
清理无用的大画布空间，让 SVG 在通过 CSS 设置 width/height 时能够按有效矢量内容等比例缩放，不占用额外的布局空白盒。
标准化图标资产与组件库
将团队所有的图标统一清洗为“无外留白”或“统一安全留白”（如统一 2px 保障边缘不贴边），大幅提升设计组件库的一致性。
专为矢量处理打造的硬核功能
利用纯前端 SVG DOM 算法，高效精准地重构 ViewBox。
智能包围盒计算 (Smart Bounding Box)
基于浏览器 DOM API (getBBox)，精准算入路径、线条描边粗细与文本的最外层极值点。
可调安全边距 (Customizable Padding)
提供 0px 到 50px 的实时边距调节滑块，在彻底裁掉无用留白的同时，保障发光或粗描边不被裁切。
100% 本地极速处理
基于纯前端技术处理，矢量设计原稿绝不上传到任何服务器，毫秒级响应且保障数据隐私安全。
双面板实时对比
带有棋盘格底图的原图 vs 裁剪后效果对比，像素级的几何改动一目了然。
三步轻松完成 SVG 裁剪
1. 导入 SVG 矢量文件
拖拽 SVG 文件到页面，或点击按钮选择文件，亦可直接粘贴 SVG 源码代码。
2. 调节安全留白参数
拖动 Padding 滑块（如设置 0px 或 4px），在右侧对比面板中实时预览新的 ViewBox 包围盒。
3. 复制或导出文件
点击“复制代码”直接粘入编辑器，或点击“下载 SVG”保存优化后的文件。
SVG 裁剪常见问题解答 (FAQ)
完全不会。本工具采用非破坏性更新算法，仅重置 SVG 根节点的 viewBox 坐标范围，图形内部的所有 <path>、<g>、<text> 及 CSS 样式保持 100% 原样。
不会。算法在计算边界时开启了 stroke 包含计算。如果希望保留更多呼吸感，建议通过滑块添加 2px ~ 4px 的安全边距。
完全可以。导出文件遵循国际 W3C 标准 SVG 规范，可完美导入 Figma、Sketch、Adobe Illustrator、React/Vue 组件或作为网页 <img> 使用。
最新文章
查看全部 →批量SVG转PNG：尺寸、边距和透明背景应该怎么统一
图标、Logo、设计系统资源批量 SVG 转 PNG 前，需要先统一尺寸、边距、透明背景、viewBox 和文件命名。
PNG、JPG、WebP、AVIF图片格式怎么选？实际使用场景指南
按真实场景选择图片格式：Logo、截图、照片、透明背景、网页图片、社交分享图分别应该用 PNG、JPG、WebP 还是 AVIF。
SVG字体、外链图片和filter导出失败的原因与修复方法
排查SVG导出失败：字体缺失、外链图片无法加载、filter效果不一致、mask/clipPath失效、外部CSS不可用。