svg - <image> 导致图像像素化

Question

我想创建一个包含重复元素的 SVG。因此，我创建了要多次使用的图像的 SVG，并使用 <image> 包含它。标签( described here )。让我们将此多用途图像称为“M”，并使用 <image> 来调用 SVG 文件。标记“S”。

问题: 没有 SVG 查看器对图像 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 -->

如何使程序(任何程序)以更高的 DPI 渲染图像 M？

Answer 1

根据包含的图像(是否在其他地方使用？)，您也可以使用 <defs> 将其包含在主 SVG 中。和 <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>