代码之家 › 专栏 › 技术社区 › BlackShift

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

svg

BlackShift · 技术社区 · 17 年前

任何地方

或者换一种说法:我可以让下面的例子在所有查看器中呈现相同的效果,而不放弃绝对单位吗?

相关:是否有方法强制下面的任何应用程序以与其他应用程序相同的方式渲染图像?(例如,我试过 -density “convert”选项,但我无法使输出与Inkscape或Firefox的输出相匹配。)

例子:

我创建了一个SVG文件,其中有三个黑色正方形(rect)和一个红色对角线(path):

右:平方毫米,对角线用户单位

这在不同的观众中呈现不同:

Inkscape:90 DPI,所有正方形大小相同,红色对角线匹配
转换:72 DPI,后方形变小(或对角线变长)

Code :

<?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(转换,除了给出的文件名外没有其他选项):

2 回复 | 直到 9 年前

Peter Mortensen Pieter Jan Bonestroo 9 年前

标记,这就是为什么中间正方形中的路径不渲染的原因。

设置宽度&高度(英寸)。
然后将视图框设置为相同。

这在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>