Support .svg formats

[limeniye]

Attached discussion:

https://github.com/unoplatform/uno/discussions/16456

The problem

In previous version of Uno.Resizetizer I had a good quality pictures via .svg format for WinUI. After the packages update I had to change the .svg to .png (because the .svg format doesn't work now for me) When I have changed the formats to .png -- the quality of pictures were downgraded.

What I have tried

I have tried to move the image file to the /Svg/ folder but it didn't display.

Attached files

SvgIssue.zip

For which platform

Windows (WinAppSDK)

[jeromelaban]

@limeniye thanks for the report. It's indeed something that is not working properly anymore, likely because assets are not excluded properly. @pedrojesus-work @dansiegel can you take a look?

[MartinZikmund]

We should provide a succinct way to exclude a folder from being processed by Resizetizer and have such a folder even included by default in the template - e.g. have a Svg folder at the same level as Assets

[MartinZikmund]

@limeniye transfered here as the issue is caused by Resizetizer

[limeniye]

Also I have one more question: Why I can't use the upper case name for image?

[pedrojesus-work]

@limeniye, I could use the .svg on winUI to show up the svg on both Packaged and Unpackged, as you can see in the image below:

<Image
    Height="50"
    HorizontalAlignment="Center"
    Source="ms-appx:///UnoApp77/Svg/tikal.svg"
    Stretch="Uniform" />

The thing, is that on old templates we've a instruction on csproj that make all svg inside the assets folder to be UnoImage, and Uno.Resizetizer removes the .svg that're marked as UnoImages, in order to avoid it to be added to final app. If you want to use the svg without resizing it, create a Svg folder, as you did, and select the .svg as content.

I'll confirm if we've something like that on Uno.Sdk, but I think so.

[pedrojesus-work]

Why I can't use the upper case name for image?

@limeniye, we describe the reason on our docs, right here

[pedrojesus-work]

updated sample that works:

svg_sample.zip

But I found an issue, right now we just lookup for asset's name inside the ContentFilesProjectOutputGroupOutput collectoin, I'll submit a PR that will look for the full path comparing with UnoImages collection instead. It will allow devs to have the same .svg name, but in another folder location, that was used for a UnoImage packaged inside the app.

[agneszitte]

From @Youssef1313:

For Resizetizer, I'm not sure, but here: https://github.com/unoplatform/uno.resizetizer/blob/ec018465f3b7dd7286a46597ebc2b9b66776ee7f/src/Resizetizer/src/SkiaSharpTools.cs#L36, we may need to set IsAntialias = true and FilterQuality = SKFilterQuality.High

fyi @pedrojesus-work, cf. related changes in Uno -> https://github.com/unoplatform/uno/pull/16558/files

[limeniye]

@pedrojesus-work, I have the following problem:

As you can see the .svg file, inside of /Svg/ folder is displaying well. But the file inside of /Svg/ /*.svg** -- is not. Does your PR will fix this problem also?

[pedrojesus-work]

@limeniye it should be, can you try the latest dev package? Anyway @dansiegel will move this forward

[limeniye]

@pedrojesus-work, Unfortunately, images inside of subfolders (ms-appx:///UnoApp77/Assets/Svg/Folder/image.svg) doesn't display with the Uno.Resizetizer 1.5.0-dev.58 for me.

[dansiegel]

@limeniye when this is merged to Uno this should help as well it seems that on the Uno targets we aren't actually including Svg's as Content even though we do have the exclude for the UnoImage. unoplatform/uno#16593

[agneszitte]

From @Youssef1313:

For Resizetizer, I'm not sure, but here: uno.resizetizer/src/Resizetizer/src/SkiaSharpTools.cs

https://github.com/unoplatform/uno.resizetizer/blob/ec018465f3b7dd7286a46597ebc2b9b66776ee7f/src/Resizetizer/src/SkiaSharpTools.cs#L36

ColorFilter = SKColorFilter.CreateBlendMode(tint, SKBlendMode.SrcIn) , we may need to set IsAntialias = true and FilterQuality = SKFilterQuality.High fyi @pedrojesus-work, cf. related changes in Uno -> unoplatform/uno#16558 (files)

@dansiegel I think we should match for Resizetizer here the latest changes @Youssef1313 made in the Uno repo to set IsAntialias = true and FilterQuality = SKFilterQuality.High.