Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

575
Visualizações
how to stretch/resize svgs in uwp's xaml?

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?

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

Okay, so here is how I solved this!

YouTube Video for this!

  1. Open the SVG file
  2. The SVG file Width and Height - set these to auto!

Screenshot of Visual Studio SVG file

over 4 years ago · Santiago Trujillo Relatório

0

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 :-(

over 4 years ago · Santiago Trujillo Relatório

0

For me, it worked with modifying SVG file like this:

  1. Add appropriate preserveAspectRatio property to svg tag. For me it was "xMinYMin meet".
  2. Set viewbox property of svg tag to this template "0 0 ActualHeight ActualWidth", in my case it was "0 0 1050 805".
  3. Set height and width of svg tag to "auto". Now svg element is relative to Height, Width and Stretch properties you provide in your XAML page or view.
  4. It might be needed to rebuild the project for XAML Designer to take effect.

SVG File:

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

XAML File:

<Image
    Width="200"
    Source="ms-appx:///Assets/Photos/Illustrations/sample.svg"
    Stretch="UniformToFill" />
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda