如何在 uwp 的 xaml 中拉伸/调整 svgs 的大小? [英] how to stretch/resize svgs in uwp's xaml?

问题描述

自从creators更新出来，uwp可以使用svg图片，简单解释一下此处(第 3 分钟).

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

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

如果我将拉伸设置为填充，图像就会消失.如果我增加宽度和高度，我可以看到图标固定在图像的左上角 (具有不同 svg 但大小相同的屏幕截图).Stretch=Fill 和固定的高度/宽度不是缩放图像的预期方式吗?

在我看来，好像拉伸算法不知道我的 svg 应该是 48x48.是我做错了，还是有解决方法?

解决方案

我整个上午都在遇到同样的问题，正准备完全放弃 Svg 支持，似乎很生气，因为您无法获得可扩展的格式正确缩放...

但是，我又做了一次，我想我已经解决了这个问题.

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

<图片来源><SvgImageSource UriSource="ms-appx:///Assets/salesorder.folder.plain.svg"RasterizePixelHeight="48"RasterizePixelWidth="48"/></Image.Source></图片>

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

希望有所帮助.

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

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

Since the creators update came out, uwp can use svg images as briefly explained here (minute 3).

I have this svg (48x48) and i can use it fine, if (and only if) i set the image's width&height to 48 and the strech to none:

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

If i set the stretch to fill, the image disappears. If i increase the width and height i can see that the icon is pinned to the upper left corner of the image (screenshot with a different svg but same size). Isn't Stretch=Fill and a fixed height/width the intended way to scale an image?

It looks to my as if the stretching algorithm does not grasp that my svg is supposed to be 48x48. Am i doing it wrong, or are there workarounds?

解决方案

I've been having the same issue all morning and was about to completely give up on Svg support, seems mad that you can't get a scalable format to scale properly...

But, I had one more go and I think I've worked this out.

It seems that you need to tell the SvgImageSource to rasterize at the SVG's original design size and then get the Image to scale it. Not sure it's a particularly helpful approach, but certainly solves it as of 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>

So if the SVG was 48x48 we turn it into a bitmap at 48x48 using the RasterizePixelHeight and RasterizePixelWidth values and then the image scales that to 24x24.

Hope that helps.

Update I just re-read your question and realised that you were looking to increase the scale whereas I've been working to decrease it. Looks as though the technique still works, but as you scale up you're going to lose any sharpness of image due to the bitmap scale process. I think this points to a fundamental flaw in the current implementation. They seem to be rendering the svg as a bitmap, and we have to tell it the original size to get it to render properly, and then they allow the bitmap code to do the rest of the work.

I think it's somewhat debateable whether this is true support or an odd half way house. Somewhere someone suggested that Adobe Illustrator can generate XAML paths, I think I'm going to look at that to see whether I can get a better quality output, shame though because I really like Inkscape :-(

这篇关于如何在 uwp 的 xaml 中拉伸/调整 svgs 的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！