调整 SVG 尺寸
☞ 全程在你的浏览器中运行 —— 不会上传任何图片将 SVG 拖放到此处
或点击浏览 —— 仅限 SVG
预览
调整 SVG 尺寸
给 SVG 设定新的宽高 —— 或者干脆去掉它们,让它随容器缩放。图形本身始终不被触碰。
或点击浏览 —— 仅限 SVG
预览
什么都不用重绘
位图必须按新尺寸重绘,过程中细节要么丢失要么被凭空补出。SVG 存的是绘图指令,所以调尺寸只是加一句「按多大渲染」的说明。文件里的每一条路径、每一种颜色、每一个渐变都原样不变。
这句说明就是 width 和 height 这对属性。底下的 viewBox 定义内部坐标系,保持不动 —— 这正是图形会跟着缩放而不是被裁掉的全部原因。
三步完成
选择一个 .svg 文件 —— 它始终留在您的设备上。
输入宽度、选一个百分比,或者改成自适应。
还是那幅图,只是变成了您要的尺寸。
快速解答
不会。根本没有可糊的东西 —— 文件描述的是图形而不是像素,所以无论给多大都会重新绘制一遍。25% 和 400% 同样成立。
让 SVG 变成自适应的。没有这两个属性时,浏览器会退回用 viewBox 确定宽高比,并让元素填满容器,于是您可以从 CSS 控制尺寸。组件库里的图标通常都这么做。
这种情况下工具会替您补一个。没有 viewBox 时,SVG 会把自己的坐标当成纯像素,于是改宽度只会裁掉图或补出空白,而不是缩放它。补上的 viewBox 与原始尺寸一致,所以什么都不会偏移。
几乎不会 —— 改动的只有那两个数字。想要更小的文件,请送去 SVG 优化器,它会清掉编辑器元数据和过高精度的坐标。
不会。文件的解析和重写都在您的浏览器里完成。