SVG 工具

SVG Width / Height Editor

调整 SVG 的显示宽高,保持比例或自行设定尺寸,保留原有内部坐标。

SVG 内容仅在您的浏览器中处理,不会上传到服务器。

这个工具是什么

SVG Width / Height Editor 调整 SVG 外层的显示尺寸,适合为图标或插图设置明确宽高。它不会把 SVG 变成位图,也不通过重写路径坐标来缩放图形。

如何使用

  1. 选择 SVG 文件或粘贴源码,查看当前宽高和 viewBox。
  2. 输入新的宽度;已知比例且启用锁定时,高度会相应变化。
  3. 需要单独设置宽高时,关闭比例锁定并填写两个值。
  4. 应用尺寸,核对预览后下载 resized.svg。

功能说明

  • 以像素设置显示宽高,默认启用宽高比锁定。
  • 优先使用有效 viewBox 的比例;没有 viewBox 时尝试使用明确的宽高。
  • 缺少可靠尺寸时会提示比例未知,需要自行输入宽度和高度。

显示尺寸与内部坐标

  • width 和 height 决定显示区域大小,viewBox 决定 SVG 内部坐标范围;本工具修改显示尺寸,保留原有 viewBox。
  • 例如 viewBox 为 0 0 800 600,锁定比例后将宽度改为 400,高度会为 300。
  • 如果没有 viewBox,改变宽高不一定让已有图形随之缩放,可能只改变可见区域。请检查结果,必要时使用 ViewBox Calculator。
  • 主下载保留原文件中未修改的内容,可能仍有脚本或外部引用。预览会过滤这些内容,也可选择另行下载安全过滤版 SVG。

SVG 安全说明

预览使用经过安全处理的静态副本,不运行脚本、点击事件或动画,也不加载外部图片、字体和样式。外部引用、内嵌网页和不支持的内容会被移除,因此预览可能与原文件不同。含 DOCTYPE 或自定义实体的文档不受支持。

SVG 文件或 UTF-8 源码最多 2 MiB,最多 20000 个节点(包括元素和文本),嵌套深度最多 96 层。内容过大或结构过于复杂时,请先简化文件。

隐私

SVG 内容仅在您的浏览器中处理,不会上传到服务器。

工具不会自动保存输入或结果。请在清空或离开页面前下载需要保留的文件,并保留原始副本。

FAQ

width、height 和 viewBox 有什么区别?

width 和 height 控制外层显示区域的尺寸,viewBox 描述图形内部坐标范围。修改宽高不会直接改写路径中的坐标。

修改 SVG 宽高会降低清晰度吗?

矢量形状仍可清晰缩放,但文件中嵌入的像素图片不会因此增加细节。文字显示还会受字体与浏览器影响。

SVG 为什么放大后通常不会像位图一样模糊?

矢量形状由路径和坐标描述,浏览器按当前尺寸重新绘制;位图则由固定数量的像素组成。

保持宽高比怎么计算?

例如原比例为 800:600,即 4:3,新宽度为 400 时,高度为 400 × 3 ÷ 4,也就是 300。比例未知时需自行提供两个尺寸。

返回开发者工具分类首页