SVG->XAML custom CSS properties

[ekalchev]

I am working on adding light and dark theme support to my WPF application. The plan is to use SVG resources that will be converted to XAML. To avoid managing two separate WPF resources for each theme, I would like to define colors in the SVG-to-XAML output using DynamicResource. This approach will allow me to switch colors dynamically based on the selected theme by defining the color resources in external resource dictionaries.

For example, instead of hardcoding HEX colors in the XAML, I want the SVG-to-XAML conversion to emit something like:

Brush="{DynamicResource MySolidColor}"
Here, MySolidColor will be defined in an external resource dictionary and can be easily switched when the theme changes.

Example:

<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Icons/Zoom">
<path id="Vector" d="." fill="var(--Stroke-Dark, #3d484fff)"/>
<path id="Vector_2" d="..." fill="var(--Stroke-Blue, #226ecfff)"/>
<path id="Vector_4" d="..." fill="#E31D43"/>
<path id="Vector_5" d="..." fill="#E31D43"/>
</g>
</svg>

and I hope to achieve something like that - Note this two lines

Brush="{DynamicResource Stroke-Dark}
Brush="{DynamicResource Stroke-Blue}

<DrawingGroup xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:svg="http://sharpvectors.codeplex.com/runtime/">
  <DrawingGroup svg:SvgLink.Key="_SvgDrawingLayer">
    <DrawingGroup.ClipGeometry>
      <RectangleGeometry Rect="0,0,25,25" />
    </DrawingGroup.ClipGeometry>
    <DrawingGroup svg:SvgObject.Id="Icons/Zoom" svg:SvgObject.UniqueId="89113247-2efe-473b-b056-e77323070651">
      <GeometryDrawing Brush="{DynamicResource Stroke-Dark}" svg:SvgObject.Id="Vector" svg:SvgObject.UniqueId="5f7ea98c-42a2-4724-b9c4-4a97a61d3f52">
        <GeometryDrawing.Geometry>
          <PathGeometry FillRule="Nonzero" Figures="..." />
        </GeometryDrawing.Geometry>
      </GeometryDrawing>
      <GeometryDrawing Brush="{DynamicResource Stroke-Blue}" svg:SvgObject.Id="Vector_2" svg:SvgObject.UniqueId="3036341d-9011-4b95-90bf-e25d0f8297f1">
        <GeometryDrawing.Geometry>
          <PathGeometry FillRule="Nonzero" Figures="..." />
        </GeometryDrawing.Geometry>
      </GeometryDrawing>
      <GeometryDrawing Brush="#FF226ECF" svg:SvgObject.Id="Vector_3" svg:SvgObject.UniqueId="9ec20e50-0dda-4d38-ab93-af3162877eb9">
        <GeometryDrawing.Geometry>
          <PathGeometry FillRule="Nonzero" Figures="..." />
        </GeometryDrawing.Geometry>
      </GeometryDrawing>
      <GeometryDrawing Brush="#FFE31D43" svg:SvgObject.Id="Vector_4" svg:SvgObject.UniqueId="152871eb-3204-48e7-8cbf-01674e460d06">
        <GeometryDrawing.Geometry>
          <PathGeometry FillRule="Nonzero" Figures="M12.4465,8.9286L6.1965,8.9286 6.1965,9.8214 12.4465,9.8214 12.4465,8.9286z" />
        </GeometryDrawing.Geometry>
      </GeometryDrawing>
      <GeometryDrawing Brush="#FFE31D43" svg:SvgObject.Id="Vector_5" svg:SvgObject.UniqueId="98265402-4382-4358-8d50-ec00cb0715e0">
        <GeometryDrawing.Geometry>
          <PathGeometry FillRule="Nonzero" Figures="..." />
        </GeometryDrawing.Geometry>
      </GeometryDrawing>
    </DrawingGroup>
  </DrawingGroup>
</DrawingGroup>

I guess this is probably not supported but I am looking for something that will help me to achieve similar solution. Please advice.

[paulushub]

There is a ResourceSvgConverter, which be used or integrated into your development cycles.
To change colors at runtime, look at the image controls, in particular the SvgIcon.

If you have CSS with the variables, you can set the values in CssVariables properties of the WpfDrawingSettings class.

[kkbp58]

In order achieve the behavior described by @ekalchev we are using ResourceSvgConverter and WpfResourceSettings.
We pass the names of the brushes used in our svg file by setting the ColorPalette property of WpfResourceSettings.

resourceSettings.ColorPalette = new Dictionary<Color, string>(WpfDrawingResources.ColorComparer);
            colorPalette.Add((Color)ColorConverter.ConvertFromString("#3d484f"), "Stroke-Dark");

This way the resulting xaml has the names of the brushes:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Color x:Key="Stroke-Dark">#FF3D484F</Color>
  <SolidColorBrush x:Key="Brush1" Color="{DynamicResource Stroke-Dark}" />
  <DrawingImage x:Key="Zoom">
    <DrawingImage.Drawing>
      ...
        <DrawingGroup>
          <GeometryDrawing Brush="{DynamicResource Brush1}" Geometry="F1M21.7678,21.8214C22.4374,21.1339,21.8214,20.8304,21.1696,20.125L16.1428,13.6875C15.7946,15.4732,15.2946,16,13.5356,16.1696L20.0356,21.2232C20.6874,21.9286,21.0892,22.5089,21.7678,21.8214z" />
         ...

Is this the correct approach? @paulushub
And one more question - is there any setting available that would allow us to generate the resulting XAML without including the lines for <Color x:Key="Stroke-Dark">#FF3D484F</Color> and <SolidColorBrush x:Key="Brush1" Color="{DynamicResource Stroke-Dark}" />, given that we have already defined these in our theme resources?

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <DrawingImage x:Key="Zoom">
    <DrawingImage.Drawing>
      ...
        <DrawingGroup>
          <GeometryDrawing Brush="{DynamicResource Stroke-Dark}" Geometry="F1M21.7678,21.8214C22.4374,21.1339,21.8214,20.8304,21.1696,20.125L16.1428,13.6875C15.7946,15.4732,15.2946,16,13.5356,16.1696L20.0356,21.2232C20.6874,21.9286,21.0892,22.5089,21.7678,21.8214z" />
         ...

[paulushub]

Is this the correct approach?

Difficult question. We have provided several ways to support various use cases. The correct approach will depend on your needs.

given that we have already defined these in our theme resources?

You know this is basically a library, we added those high level stuff to make life easier.
In particular, please look at the IResourceKeyResolver. The library currently uses a default implementation
of that interface with various support options; including using code snippets.
You can implement your own and set the key names to your existing values, and then remove the colors and/or brushes
defined in the resource dictionary.

Also, the default implementation has support for user-defined name-value pairs, and can save the various options
to an XML file so that it can be reused. So, please explore the other options and provide any feedback or ask questions.

I do not know of anyone implementing that interface yet, so your case could provide feedback for any needed improvements.