1

要素が繰り返される SVG を作成したいと考えています。そのため、複数回使用したい画像の SVG を作成し、<image>タグ (説明はこちら) を使用して含めます。<image>この多目的画像を「M」と呼び、タグ「S」を持つ SVG ファイルを呼びましょう。

問題: SVG Viewer アンチエイリアス画像 M.

たとえば、ImageMagick を使用して最終的な SVG を PNG に変換する場合は、

convert -antialias -density 2000 file.svg -quality 100 file.png

それでも、画像 M は 2000 DPI でレンダリングされず、完全にピクセル化されていませんが、S で直接作成された形状は完璧に見えます。

たとえば、S.svg では次のようになります。

<image xlink:href="M.svg" /> <!-- This looks pixelated -->
<path d="M 0 0 50 50" stroke="black" /> <!-- This looks crisp -->

プログラム、任意のプログラム、画像 M をより高い DPI でレンダリングするにはどうすればよいですか?

4

1 に答える 1

2

含まれている画像に応じて (他の場所で使用されていますか?)、 と を使用して、メインの SVG に含めることもでき<defs>ます<use>。

これにより、SVG 全体で複数回使用される SVG 内のグループを定義できます。ここにぴったりのようです。

例は次のようになります。

<svg viewBox = "0 0 1000 1000" version = "1.1">
    <defs>
      <g id="myGroup">
        <circle cx = "200" cy = "200" r = "200" fill = "yellow" stroke = "black" stroke-width = "3"/>
        <!-- your included image's content basically in here -->
      </g>
    </defs>

    <use x = "100" y = "100" xlink:href = "#myGroup"/>
    <use x = "100" y = "650" xlink:href = "#myGroup"/>
</svg>
于 2013-05-22T06:41:24.210 に答える