矢量基础

SVG 的 viewBox 是什么?坐标范围与画布大小

编写与维护:甜番茄电商科技有限公司 · 更新于

viewBox 定义 SVG 内部使用的坐标范围,通常由起点和宽高四个数字组成。它与文件像素、印刷分辨率不是同一指标,数值更大不代表图像更清晰。

先判断问题与适用条件

例如 viewBox="0 0 100 100" 的图形可在不同显示尺寸渲染。实际画布宽高与内部坐标之间存在映射;修改 viewBox 而不检查主体范围,可能导致留白、裁切或缩放变化。

按顺序处理与检查

  1. 检查 SVG 根元素的 viewBox 与 width、height。
  2. 在副本上调整画布或对象边界,不直接覆盖原文件。
  3. 分别以窄容器和宽容器显示,核对比例及边缘。

完成后怎样验收

裁切画布时要考虑描边、阴影与超出坐标的装饰。若主体因 viewBox 错误消失,应恢复原坐标范围再调整,不必重新上传图片转换。

SVG 格式依据与参考资料

SVG 可以同时包含矢量形状、图像和文字。因此,文件名以 .svg 结尾,并不能单独证明原图已转换成可编辑路径。W3C SVG 2 规范:SVG 图形对象说明了这些对象类型。

以上资料用于说明文件格式。本站的上传限制、会员要求、结果保存与编辑能力,以页面说明和实际功能为准。

本篇延伸资料