CODEWITHSUNDEEP
wpfxaml
Dannys
Dannys

Reputation: 335

Converting SVG to XAML

I know this question has already been answered, as I have followed the instructions of these answers. I have a .SVG image of an icon, which I am trying to convert into useable XAML code, I am using my images like this;

<ControlTemplate x:Uid="ControlTemplate_9" x:Key="IconTemplate">
  <Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
    <Canvas Name="svg2" Width="24" Height="16" ToolTip="IconToolTip.">
      <Canvas.RenderTransform>
        <TranslateTransform X="0" Y="0"/>
      </Canvas.RenderTransform>
      <Canvas.Resources/>
      <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path16" Fill="#FFFCF0F0">
        <Path.Data>
          <PathGeometry Figures=" M 22.30" FillRule="NonZero"/>
        </Path.Data>
      </Path>
    </Canvas>
  </Viewbox>
</ControlTemplate>

When I picked up this system most of these were already provided, but my issue is adding more to it. When using programs such as Inkscape or printing to PDF and opening the .fpage file I am getting .XAML along the lines of -

<?xml version="1.0" encoding="UTF-8"?>
<!--This file is NOT compatible with Silverlight-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
    <Canvas Name="svg2" Width="24" Height="16">
        <Canvas.RenderTransform>
            <TranslateTransform X="0" Y="0"/>
        </Canvas.RenderTransform>
        <Canvas.Resources/>
        <!--Unknown tag: metadata-->
        <!--Unknown tag: sodipodi:namedview-->
        <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
        <Rectangle xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
        <Image xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
    </Canvas>
</Viewbox>

The latter will not compile and causes the program to crash. So my extension to the previous questions would be, how do I use the latter XAML in my codebase without directly having an image in the project folder or how do I convert this into useable path data.

Upvotes: 1

Views: 4291

Answers (1)

Nawed Nabi Zada
Nawed Nabi Zada

Reputation: 2875

What I have done and which is actually working perfectly is to remove all the part with xml:

<Viewbox Stretch="Uniform">
  <Canvas Name="svg2" Width="24" Height="16">
    <Canvas.RenderTransform>
        <TranslateTransform X="0" Y="0"/>
    </Canvas.RenderTransform>
    <Canvas.Resources/>
    <Rectangle Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
    <Rectangle Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
    <Image Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
  </Canvas>
</Viewbox>

And I have added them to a ResourceDictionary, so they can be used in the whole project.

<Viewbox x:Key="MyIcon" x:Shared="False" Stretch="Uniform">
  <Canvas Name="svg2" Width="24" Height="16">
    <Canvas.RenderTransform>
        <TranslateTransform X="0" Y="0"/>
    </Canvas.RenderTransform>
    <Canvas.Resources/>
    <Rectangle Width="24" Height="16" RadiusX="4" RadiusY="4" Name="Rounded_Rectangle_1" Fill="#000000"/>
    <Rectangle Canvas.Left="11" Canvas.Top="3" Width="2" Height="6" Name="rect9" Fill="#000000"/>
    <Image Name="image11" Canvas.Left="11" Canvas.Top="11" Source="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQAAAABazTCJAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAHdElNRQfgCRoPHAwMuTLjAAAADElEQVQI12M4wHAAAAMEAYHFO6KpAAAAAElFTkSuQmCC" Width="2" Height="2"/>
  </Canvas>
</Viewbox>

Upvotes: 1

Related Questions