How to display SVG image

Saarix · 17 Jun 2021, 10:58

Hello,

recently I've started exploring Noesis with Unity and discovered one roadblock. I would like to use SVG images across my app, but I haven't found a solution to display them.
I used Inkscape (https://inkscape.org/) to convert SVG file to XAML.
My question is, how to display the output XAML file in some component inside View. (I need to avoid any runtime stuff, to allow previews during design)

Thanks for help.

17 Jun 2021, 12:50

As mentioned here you can place the generated xaml inside a ControlTemplate and apply that to a control in the view. For example, if InkScape generated the following xaml:

<?xml version="1.0" encoding="UTF-8"?>
<!--This file is compatible with Silverlight-->
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="Layer_1" Canvas.Left="0" Canvas.Top="0" Width="512" Height="512">
  <Canvas.RenderTransform>
    <TranslateTransform X="0" Y="0"/>
  </Canvas.RenderTransform>
  <Canvas.Resources/>
  <Canvas Name="g12">
    <Canvas Name="g10">
      <Canvas Name="g8">
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path2" Fill="#000000" Data="M256.002 182.774c-12.718 0-21.761 5.37-21.761 13.283V303.73c0 6.782 9.044 13.565 21.761 13.565     c12.152 0 22.043-6.783 22.043-13.565V196.057C278.045 188.144 268.154 182.774 256.002 182.774z"/>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path4" Fill="#000000" Data="M256.002 116.361c-13 0-23.174 9.326-23.174 20.065c0 10.739 10.174 20.348 23.174 20.348     c12.718 0 22.892-9.609 22.892-20.348C278.894 125.688 268.719 116.361 256.002 116.361z"/>
        <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path6" Fill="#000000" Data="M256 0C134.398 0 36 98.348 36 219.873c0 99.231 65.333 181.626 153.417 209.609l50.032 73.747     C243.171 508.715 249.37 512 256 512s12.829-3.285 16.551-8.771l50.032-73.747C410.706 401.486 476 319.061 476 219.873     C476 98.271 377.523 0 256 0z M304.645 393.099c-4.555 1.274-8.51 4.12-11.165 8.033L256 456.376l-37.479-55.243     c-2.656-3.913-6.611-6.76-11.166-8.033C132.377 372.135 76 303.181 76 219.873C76 120.69 156.748 40 256 40     s180 80.69 180 179.873C436 303.264 379.54 372.158 304.645 393.099z"/>
      </Canvas>
    </Canvas>
  </Canvas>
</Canvas>

You can define a ControlTemplate resource in any ResourceDictionary or View as this:

<ResourceDictionary>
  <ControlTemplate x:Key="InfoIcon" TargetType="Control">
    <Viewbox>
      <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Name="Layer_1" Canvas.Left="0" Canvas.Top="0" Width="512" Height="512">
        ... <!-- same as above -->
      </Canvas>
    </Viewbox>
  </ControlTemplate>
</ResourceDictionary>

And then use it in your xamls like this:

<Control Template="{StaticResource InfoIcon}" Width="100" Height="100"/>

Saarix · 17 Jun 2021, 13:51

Thank you very much for quick response.

It works like a charm :-)

17 Jun 2021, 14:55

Great, marking this as solved.

How to display SVG image Topic is solved

How to display SVG image

Re: How to display SVG image

Re: How to display SVG image

Re: How to display SVG image

Who is online