调整 SVG 尺寸

SVG 尺寸调整

给 SVG 设定新的宽高 —— 或者干脆去掉它们,让它随容器缩放。图形本身始终不被触碰。

调整 SVG 尺寸

☞ 全程在你的浏览器中运行 —— 不会上传任何图片

将 SVG 拖放到此处

或点击浏览 —— 仅限 SVG

什么都不用重绘

为什么调整 SVG 尺寸是无损的

位图必须按新尺寸重绘,过程中细节要么丢失要么被凭空补出。SVG 存的是绘图指令,所以调尺寸只是加一句「按多大渲染」的说明。文件里的每一条路径、每一种颜色、每一个渐变都原样不变。

这句说明就是 width 和 height 这对属性。底下的 viewBox 定义内部坐标系,保持不动 —— 这正是图形会跟着缩放而不是被裁掉的全部原因。

三步完成

如何调整 SVG 尺寸

01

拖入 SVG

选择一个 .svg 文件 —— 它始终留在您的设备上。

02

设定尺寸

输入宽度、选一个百分比,或者改成自适应。

03

下载

还是那幅图,只是变成了您要的尺寸。

快速解答

SVG 尺寸调整常见问题

调整尺寸会让图变糊吗?

不会。根本没有可糊的东西 —— 文件描述的是图形而不是像素,所以无论给多大都会重新绘制一遍。25% 和 400% 同样成立。

移除 width 和 height 有什么用?

让 SVG 变成自适应的。没有这两个属性时,浏览器会退回用 viewBox 确定宽高比,并让元素填满容器,于是您可以从 CSS 控制尺寸。组件库里的图标通常都这么做。

我的文件没有 viewBox,结果看起来不对劲

这种情况下工具会替您补一个。没有 viewBox 时,SVG 会把自己的坐标当成纯像素,于是改宽度只会裁掉图或补出空白,而不是缩放它。补上的 viewBox 与原始尺寸一致,所以什么都不会偏移。

缩小之后文件会变小吗?

几乎不会 —— 改动的只有那两个数字。想要更小的文件,请送去 SVG 优化器,它会清掉编辑器元数据和过高精度的坐标。

我的文件会被上传吗?

不会。文件的解析和重写都在您的浏览器里完成。