Forums | NoesisGUI

Posted: **04 Jan 2022, 19:30**

Hi friends, I wanted to ask if there is a plan in future Noesis releases to support SVG Image Source. Currently we need to convert all SVG artwork to XAML files defining a ControlTemplate (using Path, Ellipse, Rectangle...) in order to allow some customization of our UI.

Posted: **04 Jan 2022, 20:06**

Hello! Could you please elaborate a bit more about your planned usage of SVG? I assume you need SvgImageSource for displaying images but it seems you are using this to define controls and styles?

Posted: **05 Jan 2022, 17:15**

Currently a logo asset is defined as a ControlTemplate with a set of Paths:

<ControlTemplate x:Key="Product_Logo_Asset" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Viewbox>
        <Grid>
                <!-- Logo SVG converted to UWP Paths -->
        	<Path Data="..." Fill="..." />
        	<Path Data="..." Fill="..." />
        	<Path Data="..." Fill="..." />
        	<Path Data="..." Fill="..." />        
        </Grid>
    </Viewbox>
</ControlTemplate>

And we use it as following

<Control
      x:Name="Product_Logo"
      Template="{DynamicResource Product_Logo_Asset}"
      HorizontalAlignment="Center"
      VerticalAlignment="Top"
      Focusable="False">
    </Control>

With SvgImageSource support our product logo ControlTemplate could be defined as following:

<ControlTemplate x:Key="Product_Logo_Asset" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <Viewbox>
        <Grid>
                <!-- Logo SVG loaded from the original SVG file -->
                <Image Source="Assets/product_logo.svg"/>        
        </Grid>
    </Viewbox>
</ControlTemplate>

Posted: **10 Jan 2022, 17:55**

Thanks for the detailed clarification!

Support for SVG has been requested in the past. I am not familiar with SvgImageSource (it is not WPF) but it seems to be rasterizing internally the image. Have you considered using Adobe After Effects and our plugin ? (https://github.com/Noesis/Lottie-Noesis).

I am not sure what would be the best implementation for something similar to SvgImageSource. if rasterizing or just converting to real-time paths. Let us think about it.

Posted: **10 Jan 2022, 18:35**

Thanks for taking care of that. Not sure how rasterizing affects the quality but I guess it would be nice to have a choice of the rendering method.

Posted: **18 Mar 2022, 11:15**

We have created a ticket for this: #2311

Forums | NoesisGUI

SVG Image source

SVG Image source

Re: SVG Image source

Re: SVG Image source

Re: SVG Image source

Re: SVG Image source

Re: SVG Image source