< image>导致像素化图像 [英] <image> causes pixelated image

问题描述

我想创建一个包含重复元素的SVG.因此，我创建了要多次使用的图像的SVG，并使用<image>标记(<image>标记"S"的SVG文件称为.

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

问题: 没有SVG Viewer抗锯齿图像M.

The Problem: No SVG Viewer antialiases image M.

例如，如果我使用ImageMagick将最终的SVG转换为我使用的PNG

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

但是，图像M并未使用2000 DPI渲染并完全像素化，而直接在S中创建的形状看起来很完美.

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

例如在S.svg中:

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

如何制作程序，任何程序，并以更高的DPI渲染图像M?

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

推荐答案

根据所包含的图像(它是否在其他地方使用?)，您也可以使用

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

这使您可以定义SVG中的组，这些组在整个SVG中被多次使用.似乎很适合这里.

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

一个例子就是这样:

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

这篇关于&lt; image&gt;导致像素化图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！