web-dev-qa-db-ja.com

SVGとDPI、絶対単位とユーザー単位：Inkscape vs. Firefox vs. ImageMagick

特定のサイズ（A4）で印刷することを目的としたSVGファイルを自動生成しようとしています。その中で、「絶対単位」ではなく「ユーザー単位」のみを許可するパスを使用したいと思います。

絶対単位（ドキュメントサイズなど）とパスをどこにでも持つSVGファイルを「公開」することは不可能だと思います。視聴者間で適切に機能するようにします。

'デフォルトのDPI'を指定するなど、レンダリングの一貫性を確保する方法はありますか？

言い換えると、絶対単位をまったく放棄せずに、すべてのビューアで同じようにレンダリングするために、以下の例を取得できますか？

関連：以下のアプリケーションのいずれかを強制して、他のアプリケーションと同じ方法で画像をレンダリングする方法はありますか？ （たとえば、「convert」の-densityオプションを試しましたが、InkscapeまたはFirefoxの出力と一致する出力を取得できませんでした。）

例：

赤い対角線（パス）を持つ3つの黒い四角（rect）を持つ1つのSVGファイルを作成しました。

  • 左：ユーザー単位の正方形と斜め
  • 中央：インチ単位の正方形と対角線（私には最も論理的な選択のように見えますが、許可されていません）
  • 右：正方形（mm）、対角（ユーザー単位）

視聴者によってレンダリングが異なります。

  • 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

svg
34
BlackShift

pathタグのすべてのディメンションはユーザー単位です。

pathタグ内で絶対単位を指定することはできません。そのため、中央の正方形のパスはレンダリングされません。

私が見つけた最も簡単な方法は、viewboxを使用して単位を設定することです。

  • 幅と高さをインチで設定します。
  • 次に、ビューボックスを同じに設定します。
  • これにより、ユーザー単位が1インチに設定されます。
  • 次に、すべてのサイズがインチで指定されます（注：相対移動を指定するためにパスタグで小文字の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>
30
Greeny

Apache Batik を使用してSVGファイルをPDF file using iText 。iTextは72 DPIを使用し、 PDFの標準ですが、Batikは96を使用します。

PDFファイルで画像を正しく表示する、つまり拡大縮小するには、SVGヘッダーのwidth = x cm height = y cmを1.33（96/72）。

3
John Powell