SVG 和 viewBox 值

平面设计 墨景 svg xml
2021-12-26 11:50:50

我只是好奇是否有人知道viewBox值(即viewBox="a b c d")是如何确定的。

我试图了解 Inkscape 的 SVG 功能,所以我所做的是在 Inkscape 中创建一个文档100pxx 100px,从视口的左侧(即0水平值)到右侧(即100水平值)画一条线.

然而,奇怪的是,当我将此文档保存为纯 SVG 文件,然后在文本编辑器中打开该文件时,这些viewBox值被设置为,viewBox="0 0 26.458333 26.458334"而不是viewBox="0 0 100 100".

有谁知道这些值 ( 0 0 26.458333 26.458334) 是如何确定的,为什么它们与视口尺寸之间似乎没有关系?

PS 我知道您可以viewBox在文档选项中手动编辑该属性,但我仍然很好奇 Inkscape 为什么将它们设置为时髦的值。

1个回答

Inkscape 使用 mm 作为文档的默认显示单位用户单位。用户单元用于在 SVG 文件中存储值。

<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">

这个标签描述了一个图纸尺寸100px x 100pxviewBox 属性定义了100px x 100px等价于26.458333 x 26.458333 user units.

SVG 比例因子是1px / 0.2645 user-unit,SVG 渲染器可以使用它来将存储在用户单位中的所有值转换为真实世界的绘图尺寸。


在这种情况下,Inkscape 想要将值存储在 中mm,因此它必须知道如何px关联到mm. CSS 规范描述了绝对长度单位相对于彼此是固定的96px = 1in

这意味着100px = 1.041666667in = 2.645833333cm = 26.45833333mm

这就是它的26.45833333来源。


如果您希望 Inkscape 将所有值存储在 中,您可以在文档属性(文件 > 文档属性 > 选项卡:页面 > 常规 > 显示单位)px中更改默认显示单位用户单位px

  1. 默认值,毫米:

文档属性 mm

  1. 更改:像素:

文档属性 px

导出相同的文档将产生以下 SVG 标记:

<svg width="100" height="100" viewBox="0 0 100 100">

现在 SVG 比例因子是1px / 1 user-unit.

如果您想了解更多关于这个主题的信息, Inkscape Wiki中有更详细的解释

评论:

  • Inkscape v0.92 使用 的关系96px/in,Inkscape v0.91 和早期使用的值90px/in