1

我想创建一个带有重复元素的 SVG。因此，我创建了一个我想多次使用的图像的 SVG，并使用<image>标签（在此处描述）将其包含在内。让我们将此多用途图像称为“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 渲染图像 M？

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