question

BrandonBoone-5778 avatar image
0 Votes"
BrandonBoone-5778 asked HuiLiu-MSFT commented

WPF converting from SVG (with animation) to XAML

I have an SVG with a built an animation and I am converting it to XAML. It took me all-day but I got it to mostly look right. The only problem I am having right now is this part of the SVG file:

 <g id="pg2">
     <defs>
         <path id="SVGID_7_" d="M439.37,410c-1.85-14.35,9.97-40.64,23.1-43.32c13.13-2.68,67.21,2.87,76.02,4.79c8.81,1.91-3.3,18.15-3.3,18.15L439.37,410z"/>
     </defs>
     <use xlink:href="#SVGID_7_"  overflow="visible" fill="#FFFFFF"/>
     <clipPath id="SVGID_8_">
         <use xlink:href="#SVGID_7_"  overflow="visible"/>
     </clipPath>
     <g clip-path="url(#SVGID_8_)">
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="458.14" y1="389.73" x2="467.31" y2="367.64"/>
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="468.11" y1="391.38" x2="476.59" y2="369.94"/>
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="476.59" y1="393.11" x2="484.87" y2="371.09"/>
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="484.87" y1="394.64" x2="491.84" y2="372.23"/>
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="497.3" y1="397.68" x2="504.4" y2="374.34"/>
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="504.4" y1="400.27" x2="514.74" y2="372.23"/>
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="512.24" y1="401.88" x2="521.64" y2="374.34"/>
         <line fill="none" stroke="#003897" stroke-miterlimit="10" x1="517.68" y1="404.3" x2="527.52" y2="375.68"/>
     </g>
     <use xlink:href="#SVGID_7_"  overflow="visible" fill="none" stroke="#000000" stroke-miterlimit="10"/>
 </g>


Inkscape is not converting it right , and now when I run my WPF application the Vector image is off.

This is the keyframe for that part:

 <Canvas Name="pg2">
     <Canvas.Resources>
         <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="SVGID_7_" Fill="#000000" x:Key="SVGID_7_" Data="M439.37 410c-1.85-14.35 9.97-40.64 23.1-43.32c13.13-2.68 67.21 2.87 76.02 4.79 c8.81 1.91-3.3 18.15-3.3 18.15L439.37 410z"/>
     </Canvas.Resources>
     <Canvas Name="g332" Clip="{StaticResource SVGID_8_}">
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="458.14" Y1="389.73" X2="467.31" Y2="367.64" Name="line316" Stroke="#FF003897" StrokeMiterLimit="10"/>
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="468.11" Y1="391.38" X2="476.59" Y2="369.94" Name="line318" Stroke="#FF003897" StrokeMiterLimit="10"/>
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="476.59" Y1="393.11" X2="484.87" Y2="371.09" Name="line320" Stroke="#FF003897" StrokeMiterLimit="10"/>
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="484.87" Y1="394.64" X2="491.84" Y2="372.23" Name="line322" Stroke="#FF003897" StrokeMiterLimit="10"/>
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="497.3" Y1="397.68" X2="504.4" Y2="374.34" Name="line324" Stroke="#FF003897" StrokeMiterLimit="10"/>
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="504.4" Y1="400.27" X2="514.74" Y2="372.23" Name="line326" Stroke="#FF003897" StrokeMiterLimit="10"/>
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="512.24" Y1="401.88" X2="521.64" Y2="374.34" Name="line328" Stroke="#FF003897" StrokeMiterLimit="10"/>
         <Line xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" X1="517.68" Y1="404.3" X2="527.52" Y2="375.68" Name="line330" Stroke="#FF003897" StrokeMiterLimit="10"/>
     </Canvas>
 </Canvas>


But in Microsoft Visual Studio it gives me an error. Does anyone have any ideas ?

his is there error : System.Windows.Markup.XamlParseException HResult=0x80131501 Message='Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Inner Exception 1: Exception: Cannot find resource named 'SVGID_2_'. Resource names are case sensitive. –

dotnet-csharpwindows-wpfdotnet-wpf-xaml
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@ BrandonBoone-5778. The error message shows that the resource SVGID_2_ could not be found. Are you using your svg resource name correctly?
If it is not the svg resource name problem, could you show me your data of your entire svg file?

0 Votes 0 ·

Hi just posted the full svg file

0 Votes 0 ·

I posted the full svg file.

0 Votes 0 ·

I used Inkscape to convert it. but it is not doing it right and I do not know why

0 Votes 0 ·

Hi,@ BrandonBoone-5778. Did I miss something? I did not see the complete svg code or file. Which InkSpace are you using? Are your question is using InkSpace to convert svg to xaml?  Or is it the question of using svg in the wpf project in VisualStudio?

0 Votes 0 ·

0 Answers