How to stretch / resize svgs in uwp xaml?

Question

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 normally if (and only if) I set the width and height of the image to 48, and the stretch to zero:

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

If I set the stretch to fill, the image will disappear. If I increase the width and height, I see that the icon is attached to the upper left corner of the image ( screenshot with a different svg, but the same size ). Isn't Stretch = Fill and fixed height / width designed to scale an image?

It seems to me that the stretch algorithm does not understand that my svg should be 48x48. Am I doing this wrong or are there workarounds?

Answer 1

I had the same problem all morning and was going to completely abandon Svg support, it seems crazy that you cannot get a scalable format for proper scaling ...

But I had one more way out, and I think I did it.

It seems you need to say SvgImageSourcerasterize the original size of the SVG and then get it Imageto scale. Not sure if this is a particularly useful approach, but it certainly decides how to 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, 48x48 RasterizePixelHeight RasterizePixelWidth, 24x24.

, .

, , . , , - . , . , svg , , , .

, , . - - , Adobe Illustrator XAML, , , , , Inkscape: - (

Answer 2

, preserveAspectRatio="xMinYMin" <svg...> width height <svg...>.

Answer 3

, RasterizePixelHeight RasterizePixelWidth svg (, Inkscape).

Answer 4

SVG :

1. preserveAspectRatio svg. "xMinYMin meet".
2. viewbox viewbox svg "0 0 ActualHeight ActualWidth", "0 0 1050 805".
3. height width svg "auto". svg Height, Width Stretch XAML.
4. XAML Designer .

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" />

Answer 5

, !

YouTube !

1. SVG
2. SVG - !