1

I use FFImageLoading v2.3.4 for my Xamarin Forms project. However, it does not render properly. It renders images which I saved as svg format from Adobe XD as black. When I download a svg format image from internet, FFImageLoading renders properly.

<StackLayout>
<ffimageloadingsvg:SvgCachedImage Source="gmail.svg" Width="50" Height="50"/>
</StackLayout>
  1. not proper svg image
  2. normal png render
xamarin
  • 61
  • 1
  • 1
  • 8
  • This is something I've witnessed when using Adobe Illustrator before. I can only assume that the SVG exporting code has been shared between different products, so it might be you're suffering from the same problem. Can you paste a couple of lines from the beginning of the gmail.svg file in text here? If the file is not large, you could paste the whole thing. – Timo Salomäki Feb 02 '18 at 10:40
  • Hi there, I'm also having this problem. I heard it was due to an issue with SkiaSharp which FFImageLoading uses under the hood to render SVG files. Have yo had any luck with this? – Rob Sanders Feb 04 '18 at 16:45
  • Unfortunately I have not solved this problem even though I updated SkiaSharp v1.59.3. It seems @hankide has an idea. – xamarin Feb 05 '18 at 07:53
  • @RobSanders I have a solution. If you copy your a svg image into resources file and then remove tag it will work! – xamarin Feb 07 '18 at 07:57

1 Answers1

0

@hankide I export the image as 'save image embed' and this is code:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="1196.794 90.28 25.421 53.047">
  <defs>
    <style>
      .cls-1 {
        fill: #ffd673;
      }

      .cls-2 {
        fill: #663448;
      }
    </style>
  </defs>
  <g id="Group_286" data-name="Group 286" transform="translate(1022 -13)">
    <path id="Path_23" data-name="Path 23" class="cls-1" d="M109.6,73.31A11.21,11.21,0,1,0,120.81,62.1,11.21,11.21,0,0,0,109.6,73.31Z" transform="translate(66.695 70.307)"/>
    <path id="Path_24" data-name="Path 24" class="cls-1" d="M120.863,92.215A11.142,11.142,0,0,1,109.794,82.6a8.838,8.838,0,0,0-.094,1.595,11.21,11.21,0,1,0,22.42,0c0-.516-.047-1.079-.094-1.595A11.345,11.345,0,0,1,120.863,92.215Z" transform="translate(66.642 59.422)"/>
    <path id="Path_25" data-name="Path 25" class="cls-2" d="M119.111,84.321a12.711,12.711,0,1,1,12.711-12.711A12.751,12.751,0,0,1,119.111,84.321Zm0-22.42a9.709,9.709,0,1,0,9.709,9.709A9.728,9.728,0,0,0,119.111,61.9Z" transform="translate(68.394 72.006)"/>
    <path id="Path_26" data-name="Path 26" class="cls-1" d="M126.385,74.664a6.294,6.294,0,0,1,6.191,5.253,7.669,7.669,0,0,0,.094-1.032,6.285,6.285,0,1,0-12.57,0,7.027,7.027,0,0,0,.094,1.032A6.264,6.264,0,0,1,126.385,74.664Z" transform="translate(61.12 64.732)"/>
    <path id="Path_27" data-name="Path 27" class="cls-2" d="M125.27,85.04a7.27,7.27,0,1,1,7.27-7.27A7.276,7.276,0,0,1,125.27,85.04Zm0-12.57a5.253,5.253,0,1,0,5.253,5.253A5.245,5.245,0,0,0,125.27,72.47Z" transform="translate(62.235 65.847)"/>
    <g id="Group_6" data-name="Group 6" transform="translate(184.503 103.28)">
      <path id="Path_28" data-name="Path 28" class="cls-2" d="M128.085,23.076a.991.991,0,0,1-.985-.985V.985a.985.985,0,1,1,1.97,0V22.091A.962.962,0,0,1,128.085,23.076Z" transform="translate(-127.1 0)"/>
      <path id="Path_29" data-name="Path 29" class="cls-2" d="M136.585,31.625a.991.991,0,0,1-.985-.985V17.085a.985.985,0,1,1,1.97,0V30.64A.935.935,0,0,1,136.585,31.625Z" transform="translate(-131.613 -8.549)"/>
      <path id="Path_30" data-name="Path 30" class="cls-2" d="M136.585,9.8a.991.991,0,0,1-.985-.985V7.785a.985.985,0,0,1,1.97,0V8.77A.948.948,0,0,1,136.585,9.8Z" transform="translate(-131.613 -3.611)"/>
    </g>
  </g>
</svg>
xamarin
  • 61
  • 1
  • 1
  • 8