Convert AI -> SVG -> XAML

Discuss SVG code, accessible via the XML Editor.
k9ucyb
Posts: 3
Joined: Wed Feb 11, 2009 8:08 pm

Convert AI -> SVG -> XAML

Postby k9ucyb » Wed Feb 11, 2009 8:11 pm

Hello Experts,

we have designed several buttons in AI and failed to convert them to XML/XAML using the freeware exporter. So we decided to export to SVG, import to Inkscape and THEN export to XAML/XML. I worked fine, exept for some raster-effects namely "outer glow" and "cast shadow". Inkscape displays them correctly, but when exporting the graphics to xaml, the effects are gone.

Example: http://www.imageox.com/share/363092-WPF_3.png

Any suggestions?
K9

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Convert AI -> SVG -> XAML

Postby microUgly » Wed Feb 11, 2009 9:06 pm

It might be a limitation of Inkscape. Since XAML is plain text, you could probably examine the file and see if it has a bitmap in it. The bitmap will either be URL encoded, or have a path defined. If it's a path then maybe the bitmap isn't in the correct folder location.

bbyak
Posts: 64
Joined: Sun Oct 07, 2007 4:53 am

Re: Convert AI -> SVG -> XAML

Postby bbyak » Thu Feb 12, 2009 8:35 am

SVG supports filters, while XAML does not?

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Convert AI -> SVG -> XAML

Postby microUgly » Thu Feb 12, 2009 1:39 pm

bbyak wrote:SVG supports filters, while XAML does not?

I think it's more that Illustrator doesn't support SVG filters--it'll rasterise those effects. So the question is, why isn't XAML displaying the raster images within the file (if Inkscape preserved them when saving the SVG as XAML).

k9ucyb
Posts: 3
Joined: Wed Feb 11, 2009 8:08 pm

Re: Convert AI -> SVG -> XAML

Postby k9ucyb » Thu Feb 12, 2009 5:40 pm

Well, the code looks like this:



Code: Select all

<Canvas
   Name="Ebene_1"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   Width="158.64"
   Height="83.52"
   Canvas.Left="0px"
   Canvas.Top="0px">
   <Canvas.RenderTransform>
      <TranslateTransform X="0" Y="0"/>
   </Canvas.RenderTransform>
   <Canvas.Resources/>
   <Canvas Name="g3354">
      <Canvas Name="g3356">
         <Canvas Name="g3360">
             <Canvas Name="g3364">
               <Canvas.Resources>
                  <LinearGradientBrush x:Key="SVGID_1_" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartPoint="79.988,74.823" EndPoint="79.988,9.606" MappingMode="Absolute">
                     <LinearGradientBrush.GradientStops>
                        <GradientStopCollection>
                           <GradientStop Offset="0" Color="#C9FF99"/>
                           <GradientStop Offset="1" Color="#2F7000"/>
                        </GradientStopCollection>
                     </LinearGradientBrush.GradientStops>
                  </LinearGradientBrush>
               </Canvas.Resources>
               <Path
                  Name="path3371"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  Data="M149.989 58.532c0 9.051-7.405 16.456-16.456 16.456H26.444c-9.05 0-16.456-7.405-16.456-16.456      V26.444c0-9.05 7.405-16.456 16.456-16.456h107.088c9.051 0 16.456 7.405 16.456 16.456V58.532z"
                  Fill="{StaticResource SVGID_1_}"/>
               <Path
                  Name="path3373"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  Data="M149.989 58.532c0 9.051-7.405 16.456-16.456 16.456H26.444      c-9.05 0-16.456-7.405-16.456-16.456V26.444c0-9.05 7.405-16.456 16.456-16.456h107.088c9.051 0 16.456 7.405 16.456 16.456      V58.532z"
                  Stroke="#3C3C3C"
                  StrokeThickness="0.25"/>
            </Canvas>
         </Canvas>
      </Canvas>
      <Canvas Name="g3375">
         <Image
            Name="image3377"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Width="583"
            Height="266"
            Source="data:image/png;base64,iVBORw0 (shortened that part)  uQmCC"/>
         <Canvas Name="g3379">
            <Canvas.Resources>
               <LinearGradientBrush x:Key="SVGID_2_" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartPoint="79.988,17.989" EndPoint="79.988,66.989" MappingMode="Absolute">
                  <LinearGradientBrush.GradientStops>
                     <GradientStopCollection>
                        <GradientStop Offset="0.335" Color="#FFFFFF"/>
                        <GradientStop Offset="0.862" Color="#C4C4C4"/>
                     </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
               </LinearGradientBrush>
            </Canvas.Resources>
            <Path
               Name="path3386"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               Data="M142.489 55.657c0 6.232-5.1 11.332-11.332 11.332H28.821c-6.233 0-11.333-5.1-11.333-11.332     V29.322c0-6.233 5.1-11.333 11.333-11.333h102.335c6.232 0 11.332 5.1 11.332 11.333V55.657z"
               Fill="{StaticResource SVGID_2_}"/>
            <Path
               Name="path3388"
               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
               Data="M142.489 55.657c0 6.232-5.1 11.332-11.332 11.332H28.821     c-6.233 0-11.333-5.1-11.333-11.332V29.322c0-6.233 5.1-11.333 11.333-11.333h102.335c6.232 0 11.332 5.1 11.332 11.333V55.657z"
               Stroke="#3C3C3C"
               StrokeThickness="0.25"/>
         </Canvas>
      </Canvas>
   </Canvas>
</Canvas>


..so there is one image (which would be at least one to less if the filters are rendered seperately) or there is too much code, if the hole button is an image - right?

k9ucyb
Posts: 3
Joined: Wed Feb 11, 2009 8:08 pm

Re: Convert AI -> SVG -> XAML

Postby k9ucyb » Thu Feb 12, 2009 5:42 pm

btw: AI supports SVG filters, i have only used others. And: Inkscape displays AI-filters correctly, only the export does not.. So the next step is to try svg in AI, export to IS and then to XML, i guess?

User avatar
microUgly
Site Admin
Posts: 2985
Joined: Sat Jun 02, 2007 3:13 pm
Contact:

Re: Convert AI -> SVG -> XAML

Postby microUgly » Tue Feb 17, 2009 7:39 am

Can you post just the code for that image (the bit you shortened). If we put that into a browser would should see what that image is and if it's the part of the drawing that is missing.

leKteur

Re: Convert AI -> SVG -> XAML

Postby leKteur » Fri Apr 03, 2009 11:11 pm

The Inkscape SVG is not the standart SVG, it have some custom functions, I think that the outer glow is one of them. Its probably why it does not appears when converted in XAML. To check that, you can open your .svg file in Firefox, wich handle the standart SVG : if the effect appears in Inkscape but not in Firefox, you now its an Inkscape only function.

bbyak
Posts: 64
Joined: Sun Oct 07, 2007 4:53 am

Re: Convert AI -> SVG -> XAML

Postby bbyak » Sat Apr 04, 2009 11:14 am

No, Inkscape SVG is standard SVG, and any glows and filters are standard SVG feature.


Return to “SVG / XML Code”