Question

我想用重复的元素创建一个SVG。因此，我创建了一个我想要多次使用的图像的SVG，并使用<image>标记（described here）将其包含在内。我们将这个多用途图像称为“M”，然后让我们使用<image>标记“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 -->

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

Answer 1

根据所包含的图片（是否在其他地方使用？），您可以使用<defs>和<use>将其包含在主SVG中。

这使您可以在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>

<img/>导致像素化图像

1 个答案: