<image> 导致图像像素化答案

【问题标题】：<image> causes pixelated image<image> 导致图像像素化
【发布时间】：2013-05-22 18:45:46
【问题描述】：

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

问题：没有 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？

【问题讨论】：

M.svg 是否包含位图图像？可以在 svg 图像中包含 .png，但这不会神奇地将其转换为矢量表示。
@DanRoss: M.svg 不包含位图图像。

标签： svg

【解决方案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>

【讨论】：

这对我有用，但 Firefox 似乎忽略了 use 的 width 和 height 属性，尽管它们在您链接的网站上明确列出。
@Throwaway647172 也许创建一个小提琴并为此提出一个新问题:-)
使用的宽度和高度属性被视为对定义中指定的任何宽度和高度的附加转换。 Firefox 倾向于让你指定你应该指定的东西：它不会用合理的默认值填充缺失的值。