[Rendering] [WinUI3] SVG rendering issues when `viewBox` is not specified

Target Platforms

WinUI3

SDK Version

24.05

Application Name

Widget board (with WinUI3 widgets) (Windows Web Experience Pack 524.22801.0.0)

Problem Description

When using an SVG that doesn't have viewBox set, some issues appear:

If set as a background_image at a container or at the AdaptiveCard, it will always be rendered as the viewBox had been set to 1050 x 1050 px, so that when the width and the height are different, it will be fit by filling.
If set as an image element, the image is rendered correctly at the start: it is rendered using width and height from the image element as the rendering resolution, but when the widget gets updated while the widget board is open on the widgets section, it gets rendered again with the same behavior than background_image (1050 x 1050 px viewBox), but it will be stretched to fit the image element width and height.

Screenshots

Background image with different widget sizes

Card payload
```json { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.6", "backgroundImage": { "url": "data:image/svg+xml;utf8," } } ```
container with larger width than height

Card payload
```json { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.6", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "100px", "minHeight": "50px", "backgroundImage": { "url": "data:image/svg+xml;utf8," } } ] } ] } ```
container with larger height than width

Card payload
```json { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.6", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "width": "50px", "minHeight": "100px", "backgroundImage": { "url": "data:image/svg+xml;utf8," } } ] } ] } ```
image:

Card payload
```json { "type": "AdaptiveCard", "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.6", "body": [ { "type": "Image", "url": "data:image/svg+xml;utf8,", "height": "210px", "width": "105px" } ] } ```
- image before widget gets updated:
The black rectangle (105 x 105 px) occupies the half of the image element because its width is 105 px and its height is 210 px
- image after widget gets updated
The black rectangle (which size is still 105x 105 px) occupies the same space than one of the green and blue rectangles, and because the width of the rectangles is 10%, the viewBox of the SVG has been set to 1050 x 1050 px.