如何在 uwp 的 xaml 中拉伸/调整 svg 的大小？答案

【问题标题】：how to stretch/resize svgs in uwp's xaml?如何在 uwp 的 xaml 中拉伸/调整 svg 的大小？
【发布时间】：2017-04-09 08:59:23
【问题描述】：

自从创作者更新出来后，uwp 可以使用 svg 图片，简要说明here (minute 3)。

我有this svg (48x48)，我可以很好地使用它，如果（且仅当）我将图像的宽度和高度设置为 48 并将拉伸设置为无：

<Image Source="ms-appx:///Assets//check.svg" Height="48" Width="48" Stretch="None"/>

如果我将拉伸设置为填充，图像就会消失。如果我增加宽度和高度，我可以看到图标固定在图像的左上角（screenshot with a different svg but same size）。 Stretch=Fill 和固定的高度/宽度不是缩放图像的预期方式吗？

在我看来，拉伸算法似乎没有掌握我的 svg 应该是 48x48。我做错了吗，还是有解决方法？

【问题讨论】：

我认为 Image.Source 需要BitmapImage class，所以我假设它将 SVG 渲染为光栅位图。这意味着您可能需要将Image 包装在ViewBox 中，或者我个人只使用类似于SVG 的XAML 路径标记，您可以从Adobe Illustrator 导出为该格式。我还没有听说过 SVG 支持，而且它甚至还没有在文档中，但如果它得到完全支持，那就太棒了。

标签： c# xaml svg uwp

【解决方案1】：

好的，这就是我解决这个问题的方法！

YouTube Video for this!

打开 SVG 文件
SVG 文件的宽度和高度 - 将它们设置为自动！

【讨论】：

【解决方案2】：

我整个早上都遇到同样的问题，并且即将完全放弃对 Svg 的支持，似乎很生气，因为您无法获得可扩展的格式来正确扩展...

但是，我又尝试了一次，我想我已经解决了这个问题。

您似乎需要告诉SvgImageSource 以SVG 的原始设计尺寸进行光栅化，然后让Image 对其进行缩放。不确定这是一种特别有用的方法，但肯定会在 build 15063 中解决。

<Image Width="24" Stretch="Uniform" VerticalAlignment="Center">
  <Image.Source>
    <SvgImageSource UriSource="ms-appx:///Assets/salesorder.folder.plain.svg"
                    RasterizePixelHeight="48"
                    RasterizePixelWidth="48" />
  </Image.Source>
</Image>

因此，如果 SVG 为 48x48，我们使用 RasterizePixelHeight 和 RasterizePixelWidth 值将其转换为 48x48 的位图，然后图像将其缩放为 24x24。

希望对您有所帮助。

更新我刚刚重新阅读了您的问题，并意识到您正在寻求增加规模，而我一直在努力减少规模。看起来该技术仍然有效，但是当您放大时，由于位图缩放过程，您将失去图像的任何清晰度。我认为这指出了当前实施中的一个根本缺陷。他们似乎将 svg 渲染为位图，我们必须告诉它原始大小以使其正确渲染，然后他们允许位图代码完成其余工作。

我认为这是真正的支持还是奇怪的中途之家，这有点值得商榷。某处有人建议 Adobe Illustrator 可以生成 XAML 路径，我想我会看看我是否可以获得更好质量的输出，但很遗憾，因为我真的很喜欢 Inkscape :-(

【讨论】：

这是纯金
有趣的是，如果您不设置 RasterizePixelWidth/Height 并依赖于您的图像宽度/高度，那么当显示器的 DPI 发生变化时，您的图像将调整大小。使用 SVG 时，您应始终定义 RasterizePixelWidth/Height 以避免此问题。

【解决方案3】：

对我来说，它可以像这样修改 SVG 文件：

将适当的preserveAspectRatio 属性添加到svg 标记。对我来说是"xMinYMin meet"。
将svg 标签的viewbox 属性设置为此模板“0 0 ActualHeight ActualWidth”，在我的例子中是"0 0 1050 805"。
将svg标签中的height和width设置为"auto"。现在 svg 元素与您在 XAML 页面或视图中提供的 Height、Width 和 Stretch 属性相关。
可能需要重新构建项目才能使 XAML 设计器生效。

SVG 文件：

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1050 805" width="auto" height="auto" ... > ... </svg>

XAML 文件：

<Image
    Width="200"
    Source="ms-appx:///Assets/Photos/Illustrations/sample.svg"
    Stretch="UniformToFill" />

【讨论】：

对我来说，我只需要使用viewBox 属性。我将其设置为 svg 图像中的值（将 <svg height="45" width"45"> 更改为 <svg viewBox="0 0 45 45">)
老实说，这比批准的答案要好。如果您有 200% 的比例并且 SVG 图像显示的尺寸只是其所需尺寸的一小部分，则 RasterizePixelHeight 会将小图像转换为位图，然后将其展开，这会降低质量。

【解决方案4】：

对我来说，只有将 RasterizePixelHeight 和 RasterizePixelWidth 设置为 svg 原始分辨率（例如 Inkscape 中的文档属性）才有效。

【讨论】：

【解决方案5】：

对我来说，它无需设置这些属性就可以工作，而是将preserveAspectRatio="xMinYMin" 添加到<svg ...> 标记并从<svg ...> 标记中删除width 和height。

【讨论】：