causes pixelated image

Question

I want to create a SVG with repeated elements. Therefore, I created a SVG of the image that I want to use multiple times and I include it by using the <image> tag (described here). Let us call this multiple-use-image "M" and let us call the SVG file with the <image> tag "S".

The Problem: No SVG Viewer antialiases image M.

For example, if I use ImageMagick to convert the final SVG to a PNG I use

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

Yet, image M is not rendered with 2000 DPI and completely pixelated whereas the shapes directly created in S look perfect.

For example in S.svg:

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

How can I make programs, any program, render image M at higher DPI?

Answer 1

Depending on the included image (is it used somewhere else?), you could include it in your main SVG as well using <defs> and <use>.

This lets you define groups within an SVG, that are used multiple times throughout the SVG. Seems like a perfect fit here.

An example would be something like this:

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