[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

  {
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.6",
    "backgroundImage": {
      "url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100%\" height=\"100%\" fill=\"white\" /><rect width=\"100%\" height=\"10%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"20%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"40%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"60%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"80%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"20%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"40%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"60%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"80%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"rgb(255,0,0)\" stroke-width=\"5%\" /></svg>"
    }
  }
  

• container with larger width than height
  

  Card payload

  {
    "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,<svg xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100%\" height=\"100%\" fill=\"white\" /><rect width=\"100%\" height=\"10%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"20%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"40%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"60%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"80%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"20%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"40%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"60%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"80%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"rgb(255,0,0)\" stroke-width=\"5%\" /></svg>"
            }
          }
        ]
      }
    ]
  }
  

• container with larger height than width
  

  Card payload

  {
    "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,<svg xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100%\" height=\"100%\" fill=\"white\" /><rect width=\"100%\" height=\"10%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"20%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"40%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"60%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"80%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"20%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"40%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"60%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"80%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"rgb(255,0,0)\" stroke-width=\"5%\" /></svg>"
            }
          }
        ]
      }
    ]
  }
  

• image:

  Card payload

    {
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.6",
    "body": [
      {
        "type": "Image",
        "url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100%\" height=\"100%\" fill=\"white\" /><rect width=\"100%\" height=\"10%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"20%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"40%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"60%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"10%\" y=\"80%\" fill=\"rgb(0,255,0)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"20%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"40%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"60%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"10%\" height=\"100%\" x=\"80%\" fill=\"rgb(0,0,255)\" fill-opacity=\".5\" /><rect width=\"100%\" height=\"100%\" fill=\"none\" stroke=\"rgb(255,0,0)\" stroke-width=\"5%\" /><rect width=\"105px\" height=\"105px\" fill=\"rgb(0,0,0)\" fill-opacity=\"0.5\" /></svg>",
        "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.

Card JSON

Provided on the above screenshots

Sample Code Language

No response

Sample Code

No response

Start by reproducing the issue on WinUI3 with SDK 24.05 using the provided Adaptive Card payloads, comparing backgroundImage and Image rendering before and after a widget update. Done means SVGs without viewBox render consistently at their intended dimensions in both cases.