Image doesn't recognize SVG internal CSS

[nxtn]

Steps to reproduce the bug

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">
  <defs>
    <style>
      .cls-1 {
        fill: #666;
      }
    </style>
  </defs>
  <rect class="cls-1" x="0" y="0" width="1000" height="1000"/>
  <rect fill="#999" x="1000" y="0" width="1000" height="1000"/>
</svg>

<Image Source="svg.svg"/>

Expected behavior
The two rects are grey.

Actual behavior
The left rect is black.

Version Info

Windows 10 version	Saw the problem?
October 2018 Update (17763)	Yes

Device form factor	Saw the problem?
Desktop	Yes

[jevansaks]

I would guess that the XAML svg parser just doesn't support this. @jesbis do you have info about this? Is it something that should work?

[jesbis]

The Xaml Image/SvgImageSource uses Direct2D, which supports the SVG 1.1 Secure Static mode features listed here:
https://docs.microsoft.com/windows/desktop/Direct2D/svg-support

Applying CSS-like styles via class attributes isn't currently supported.

@NextTurn: many design tools (e.g. Adobe Illustrator) let you change your SVG save/export options to apply the styles as inlined style attributes instead of external style defs. That will enable using styles in UWP apps and should make your content render correctly. Would that be an option?

I believe there may also be Visual Studio extensions created by the community to convert existing assets.

[nxtn]

Thanks for the answer. Inline style attributes look good to me.