This project has moved and is read-only. For the latest updates, please go here.

Problem converting gradient fills

Topics: Converters and Runtime, SVG, SVG# and Parsing
Feb 10, 2016 at 2:57 PM
Edited Feb 10, 2016 at 2:58 PM
Hey! Thank you for the nice library!

I have got a trouble with converting linear gradients to XAML.
Grdients in SVG maid by Inkscape 0.91 displayed incorrectly.

This is demo example for the problem:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="48px"
   height="48px"
   id="svg7407"
   version="1.1"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="Test.svg">
  <defs
     id="defs7409">
    <linearGradient
       inkscape:collect="always"
       id="linearGradient7424">
      <stop
         style="stop-color:#d40000;stop-opacity:1;"
         offset="0"
         id="stop7426" />
      <stop
         style="stop-color:#d4aa00;stop-opacity:1"
         offset="1"
         id="stop7428" />
    </linearGradient>
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient7424"
       id="linearGradient7430"
       x1="30.142857"
       y1="18.714285"
       x2="17.857141"
       y2="21.714285"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient7424-7"
       id="linearGradient7430-1"
       x1="30.142857"
       y1="18.714285"
       x2="17.857141"
       y2="21.714285"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       inkscape:collect="always"
       id="linearGradient7424-7">
      <stop
         style="stop-color:#d40000;stop-opacity:1;"
         offset="0"
         id="stop7426-0" />
      <stop
         style="stop-color:#d4aa00;stop-opacity:1"
         offset="1"
         id="stop7428-4" />
    </linearGradient>
    <linearGradient
       gradientTransform="matrix(0.46101243,0,0,0.46101243,27.882021,-1.8870041)"
       y2="21.714285"
       x2="17.857141"
       y1="18.714285"
       x1="30.142857"
       gradientUnits="userSpaceOnUse"
       id="linearGradient7451"
       xlink:href="#linearGradient7424-7"
       inkscape:collect="always" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="9.8994949"
     inkscape:cx="26.42683"
     inkscape:cy="13.318847"
     inkscape:current-layer="layer1"
     showgrid="true"
     inkscape:grid-bbox="true"
     inkscape:document-units="px"
     inkscape:window-width="1920"
     inkscape:window-height="1018"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7412">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:label="Layer 1"
     inkscape:groupmode="layer">
    <path
       style="fill:url(#linearGradient7430);stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
       d="M 13.285715,23.142857 C 11.253503,20.968369 11.867714,17.639204 12.065596,14.948657 13.081306,11.760802 16.802003,10.908574 19.764851,11.213583 23.757087,11.380073 28.380625,11.237303 31.42218,14.299563 34.741129,19.640582 36.972453,26.20631 35.446804,32.507884 34.672463,35.701272 30.534199,36.253501 27.904113,35.157108 24.765064,34.218701 22.111624,31.857946 20.882728,28.816628 19.717994,26.004591 16.280019,25.972681 14.564343,24.048703 14.289849,23.595987 13.87697,23.105481 13.285715,23.142857 z"
       id="path7415"
       inkscape:connector-curvature="0" />
    <path
       style="fill:url(#linearGradient7451);fill-opacity:1;stroke:#000000;stroke-width:0.46101242px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 34.006901,8.7821409 C 33.070026,7.7796749 33.353185,6.2448883 33.444411,5.0045127 33.912666,3.534872 35.627953,3.1419843 36.993863,3.2825972 38.834334,3.3593512 40.965842,3.2935324 42.368037,4.7052723 43.898113,7.1675485 44.926781,10.19443 44.223438,13.099534 43.866457,14.571726 41.958666,14.82631 40.746164,14.320859 39.299023,13.888242 38.075755,12.799905 37.509218,11.397819 36.972261,10.101435 35.387312,10.086724 34.596364,9.1997472 34.469819,8.9910392 34.279477,8.7649101 34.006901,8.7821409 z"
       id="path7415-8"
       inkscape:connector-curvature="0" />
  </g>
</svg>
Sharp Vectors converts gradients from this example to XAML:
Figure 1:

<LinearGradientBrush StartPoint="30.142857,18.714285" EndPoint="17.857141,21.714285" MappingMode="Absolute" Opacity="1">
<LinearGradientBrush.Transform>
<TransformGroup>
<TransformGroup>
<ScaleTransform ScaleX="8.1721035639444981" ScaleY="8.1721035639444981" />
<TranslateTransform X="-272.65089303135073" Y="-141.77932773153782" />
</TransformGroup>
<RotateTransform Angle="-45" CenterX="0.5" CenterY="0.5" />
</TransformGroup>
</LinearGradientBrush.Transform>
<GradientStop Color="#FFD40000" Offset="0" />
<GradientStop Color="#FFD4AA00" Offset="1" />
</LinearGradientBrush>

There is some excess transformations. I have marked it bold.

Figure 2:
<LinearGradientBrush StartPoint="30.142857,18.714285" EndPoint="17.857141,21.714285" MappingMode="Absolute" Opacity="1">
<LinearGradientBrush.Transform>
<TransformGroup>
<TransformGroup>
<ScaleTransform ScaleX="3.7674412727355957" ScaleY="3.7674412727355957" />
<TranslateTransform X="-97.813427346398811" Y="-67.249035460302835" />
</TransformGroup>
<MatrixTransform>0.46101243,0,0,0.46101243,27.882021,-1.8870041</MatrixTransform>
</TransformGroup>
</LinearGradientBrush.Transform>
<GradientStop Color="#FFD40000" Offset="0" />
<GradientStop Color="#FFD4AA00" Offset="1" />
</LinearGradientBrush>

There is some excess transformations too.

I compared result of Sharp Vectors and Svg2xaml util. Result of Svg2xaml makes gradients without bolded transformations and they displays correct by wpf.
Feb 11, 2016 at 11:38 AM
Edited Feb 11, 2016 at 1:32 PM
I have fixed it for myself. All corrections were in the WpfGradientFill.cs:

1). Commented lines 94-96:

//viewBoxTransform = FitToViewbox(new SvgRect(x1, y1,
// Math.Abs(x2 - x1), Math.Abs(y2 - y1)),
// elementBounds);

2) Commented line 160:

//brush.RelativeTransform = new RotateTransform(45, 0.5, 0.5);

3) Commented line 182:

//brush.RelativeTransform = new RotateTransform(-45, 0.5, 0.5);

In my case MatrixTransform is enough. I think it is Inkscape specific issue.
I can send any sample pictures if you need it for reproduce and fix this issue.
Coordinator
Mar 13, 2016 at 5:54 AM
Hello Kozinaka,

Thanks for the quick fix.

Have you tried testing the fix with the test samples provided with the library?

Best regards,
Paul.
Oct 3 at 12:42 PM
I return to this problem again. My fix is bad and doesn't work on some new examples. :( Don't use it, please.

SelormeyPaul wrote:
Have you tried testing the fix with the test samples provided with the library?
Trouble with gradients still actual. You can reproduce it with "WPF Test Application" from library:
  1. On this icon: https://commons.wikimedia.org/wiki/Tango_icons#/media/File:Video-display.svg (shadow of display looks weird cos gradient shifts somewhere).
  2. On this icon: https://commons.wikimedia.org/wiki/GNOME_Desktop_icons#/media/File:Gnome-network-wired.svg (trouble with gradients on wire and it's shadows).
Oct 3 at 3:54 PM
As I see linear gradients from Inkscape is ignored by SharpVectors now, but radial gradients works fine.