SVG и DPI, абсолютные единицы и пользовательские единицы: Inkscape против Firefox против ImageMagick

Я пытаюсь автоматически генерировать SVG файл, предназначенный для печати на определенном размере (A4). Я хочу использовать в нем путь, который позволяет только "пользовательские единицы", а не "абсолютные единицы".

Мне кажется, что невозможно "публиковать" SVG файл, который имеет абсолютные единицы (например, размер документа) и путь в любом месте, потому что я не могу заставить его работать должным образом между зрителями.

Есть ли способ получить некоторую согласованность в рендеринге, например, указать "DPI по умолчанию"?

Или по-другому: могу ли я привести свой пример ниже, чтобы сделать то же самое во всех зрителях, вообще не отказываясь от абсолютных единиц?

Связано: Есть ли способ заставить любое из нижеприведенных приложений отображать изображение так же, как один из других? (Например, я попробовал параметр -density для "конвертировать", но я не смог получить вывод в соответствии с выходом Inkscape или Firefox.)

Пример:

Я создал один файл SVG с тремя черными квадратами (прямоугольник) с красной диагональю (путь):

Слева: квадрат и диагональ в пользовательских единицах
Середина: квадратная и диагональная в дюймах (показался мне наиболее логичным выбором, но не разрешен)
Справа: квадрат в мм, диагональ в пользовательских единицах

Что различается у разных зрителей по-разному:

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 (конвертировать, без параметров кроме указанных файлов):

Ответ 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>

Ответ 2

У меня была аналогичная проблема, используя Apache Batik для вставки SVG файла в файл PDF с помощью iText. iText использует 72 DPI, стандарт для PDF, в то время как Batik использует 96.

Чтобы изображение отображалось правильно, то есть масштабировать в PDF файле, вам нужно разделить ширину = x cm height = y cm в заголовке SVG на 1.33 (96/72).