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 (мой просмотрщик по умолчанию):
![Alt text]()
Firefox (обратите внимание, что красная линия не доходит до нижнего правого угла. Я сделал скриншот и обрезал произвольно):
![Firefox]()
ImageMagick (конвертировать, без параметров кроме указанных файлов):
![Alt text]()
Ответы
Ответ 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).