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
Convert AI -> SVG -> XAML
Re: Convert AI -> SVG -> XAML
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.
Re: Convert AI -> SVG -> XAML
SVG supports filters, while XAML does not?
Re: Convert AI -> SVG -> XAML
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).
Re: Convert AI -> SVG -> XAML
Well, the code looks like this:
..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?
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?
Re: Convert AI -> SVG -> XAML
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?
Re: Convert AI -> SVG -> XAML
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.
Re: Convert AI -> SVG -> XAML
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.
Re: Convert AI -> SVG -> XAML
No, Inkscape SVG is standard SVG, and any glows and filters are standard SVG feature.