裁剪 SVG
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将 SVG 拖放到此处
或点击浏览 —— 仅限 SVG
预览
裁剪 SVG
在 SVG 上拖一个框,选出您要保留的部分。变的只有 viewBox —— 每一条路径都原样保留,所以随时可以再裁回去。
或点击浏览 —— 仅限 SVG
预览
是开一扇窗,不是下一刀
SVG 把图形画在一套坐标系里,而 viewBox 就是您透过去看它的那扇窗。挪动这扇窗,图就被裁了 —— 没有路径被编辑,没有点被删除,也没有重绘。这正是结果在任何尺寸下都像素级精确的原因,也是您日后把窗口再拉大就能拿回整幅图的原因。
代价是文件不会变小:窗外的部分仍在文件里,只是不显示。若希望它们真正消失,请先在这里裁好,再把文件送去 SVG 优化器。
三步完成
选择一个 .svg 文件 —— 它始终留在您的设备上。
框住您想要的部分,或直接输入精确的 viewBox 数值。
还是那幅图,只是换了一扇观看它的窗。
快速解答
不能,这是正常的。裁剪只是挪动 viewBox,窗外的图形依然在文件里 —— 浏览器只是不去画它们。如果想把这些残余清理掉,请把裁好的文件送去 SVG 优化器。
能。因为什么都没被删除,把裁好的文件再拿到这里打开、把框往外拖,整幅图就回来了。这正是它与裁剪 JPG 的实质区别。
它们是 viewBox 的用户单位,也就是 SVG 自己的坐标系。一个文件可以宽 24 个单位,却渲染成 512 像素。width 和 height 属性会按比例同步缩小,所以裁好的文件渲染出来正是您预期的尺寸。
工具会按文件的 width 和 height 自动补一个。没有 viewBox 就没有可挪动的窗,裁剪也就无从下手。补上它不会带来任何视觉变化。
如果您的 SVG 原本就没有 width 和 height 属性 —— 由 CSS 控制尺寸的图标通常如此 —— 那它仍然没有。这两个属性只有本来就存在时才会被改写。
不会。文件的解析和重写都在您的浏览器里完成。