LocalTools离线浏览器工具合集

分类: 开发工具

SVG viewBox 编辑器

站方自主规划没找到想要的工具？

手动读取并重写 SVG 的 viewBox

粘贴 SVG 标记，加载它当前的 viewBox（若没有则加载其宽度和高度），然后调整 min-x、min-y、宽度和高度来裁剪、留白或重新定位图形，并复制重写后的 SVG。

SVG 预览
输出
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <rect width="120" height="120" rx="16" fill="#0f766e" />
  <circle cx="60" cy="60" r="34" fill="#f4d35e" />
</svg>

不会上传任何内容。标记只会在本页面内被解析和重写。

本页的所有处理都在浏览器中完成，不会上传任何内容。

这个工具能做什么

viewBox 属性决定了 SVG 内部坐标系如何映射到它实际渲染的空间，因此改变它就是在裁剪图标的一部分、为其添加留白，或者不改动任何路径就移动其原点的方式。在文本编辑器里手动改这四个数字既繁琐又容易出错；本工具会解析你粘贴的 SVG，用解析出的数值预填这四个 viewBox 字段，并在你修改时实时重写标记，同时提供预览，让你在复制之前先看到裁剪效果。

使用方法

  1. 粘贴包含 <svg> 标签的 SVG 标记。
  2. 点击“加载当前 viewBox”以预填四个字段，或自行输入 min-x、min-y、宽度和高度。
  3. 查看预览，然后复制重写后的 SVG 标记。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

常见问题

这会把我的 SVG 上传到什么地方吗？
不会。标记只会在你的浏览器标签页中通过纯字符串匹配来解析和重写，不会发送到服务器。
宽度和高度属性会发生什么变化？
它们会被完全保留。修改 viewBox 只会重新缩放绘制在现有视口内的内容，就像浏览器本身应用它的方式一样，而不会改变元素本身的尺寸。
为什么预览有时看起来是空的？
宽度或高度为零，或者 viewBox 与图形没有重叠，都会把图形裁剪得什么也不剩。请放大取值范围，或检查 min-x、min-y 的数值。

返回全部工具