SVG和DPI,绝对单位和用户单位:Inkscape vs. Firefox vs. ImageMagick

Question

我尝试自动生成一个打印在特定尺寸(A4)上的SVG文件.我希望在其中使用一个路径,它只允许"用户单位",而不是"绝对单位".

在我看来,无法"发布"具有绝对单位(例如文档大小)和任何地方的路径的SVG文件,因为我无法让它在整个查看器中正常工作.

有没有办法在渲染中获得一些一致性,比如指定'默认DPI'？

或者换一种说法:我可以得到下面的例子,在不放弃绝对单位的情况下在所有观众中呈现相同的内容吗？

相关:有没有办法强制下面的任何应用程序以与其他应用程序相同的方式呈现图像？(例如,我尝试了-density'convert'选项,但我无法获得与Inkscape或Firefox输出相匹配的输出.)

---

例:

我创建了一个SVG文件,其中三个黑色方块(rect)带有红色对角线(路径):

• 左:用户单位中的正方形和对角线
• 中间:正方形和对角线(在我看来是最合乎逻辑的选择,但不允许)
• 右:平方毫米,用户单位对角线

在不同的观看者中呈现的方式不同:

• Inkscape:90 DPI,所有方块大小相同,红色对角线匹配
• Firefox:96 DPI？,后面的方块到大(或从对角到短)
• 转换:72 DPI,后方为小(或从对角线到长)

代码:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="200mm"
   height="100mm"
   >
  <g transform="translate(50,50)">
    <rect
       width="100."
       height="100."
       x="10"
       y="10" />
    <path style="stroke: #ff0000" d="M 10 10 L 110 110" />
  </g>
  <g transform="translate(200,50)">
    <rect
       width="1.111in"
       height="1.111in"
       x="0.1111in"
       y="0.1111in" />
    <path style="stroke: #ff0000" d="M 0.1111in 0.1111in L 1.111in 1.111in" />
  </g>
  <g transform="translate(350,50)">
    <rect
       width="1.111in"
       height="1.111in"
       x="0.1111in"
       y="0.1111in" />
    <path style="stroke: #ff0000" d="M 10 10 L 110 110" />
  </g>
</svg>

Inkscape(我的默认'查看器'):

Firefox(请注意,红线没有到达右下角.我制作了截图并随意裁剪):

ImageMagick(转换,除了给出的文件名之外没有选项):

Answer 1

路径标记中的所有维度都以用户单位表示.

您不能在路径标记中指定绝对单位,这就是中间方块中的路径不呈现的原因.

我发现最简单的方法是使用viewbox设置单位:

• 以英寸为单位设置宽度和高度.
• 然后将视图框设置为相同.
• 这将用户单位设置为一英寸.
• 然后以英寸为单位指定所有尺寸(注意:我在路径标签中使用小写l来指定相对移动)

这在Inkscape和Firefox中正确显示.

<svg
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="8in"
    height="4in"
    viewBox="0 0 8 4">

    <g transform="translate(4,0.5)">
        <rect
            width="1.111"
            height="1.111"
            x="0.1111"
            y="0.1111" />
        <path d="M 0.1111,0.1111 l 1.111 1.111" style="stroke: #ff0000;stroke-width:0.01"  />
    </g>
</svg>