CODEWITHSUNDEEP
androidsvgxamarin.forms
Jean-Daniel Gasser
Jean-Daniel Gasser

Reputation: 512

XamSVG for Xamarin forms on Android : some images not showed in Marshmallow

Some of users upgraded their device to Marshmallow. Since that upgrade, my app is only showing some SVG images.

Here is the XAML code of the MainPage of a sample application I tested on both Lollipop and Marshmallow versions of Android:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TestXamSVGMarshmallow"
             xmlns:svg="clr-namespace:XamSvg.XamForms;assembly=XamSvg.XamForms"
             x:Class="TestXamSVGMarshmallow.MainPage">
  <StackLayout>
    <svg:SvgImage Svg="res:Views.Images.Connect" HeightRequest="40" HorizontalOptions="Center" VerticalOptions="Center"/>
    <svg:SvgImage Svg="res:Views.Images.LoadMeasurement" HeightRequest="40" HorizontalOptions="Center" VerticalOptions="Center"/>
    <svg:SvgImage Svg="res:Views.Images.SendData" HeightRequest="40" HorizontalOptions="Center" VerticalOptions="Center"/>
    <svg:SvgImage Svg="res:Views.Images.SendEMail" HeightRequest="40" HorizontalOptions="Center" VerticalOptions="Center"/>
  </StackLayout>
</ContentPage>

And here are the result on one device with Lollipop and the other one running Marshmallow: SVG on Lollipop and Marshmallow

The only accepted image is "SendData".

Here are example of one working SVG file (SendData.svg) and another which is not working (Connect.svg)

SendData:

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="30.001px" height="30.002px" viewBox="0 0 30.001 30.002" style="enable-background:new 0 0 30.001 30.002;"
     xml:space="preserve">
<g>
    <path d="M27.798,12.362l-2.9-2.9l-7.479,7.479c-0.472,0.47-1.241,0.47-1.712-0.002l-2.712-2.712c-0.471-0.47-0.471-1.24,0-1.712
        l7.478-7.477l-2.961-2.962C17.042,1.605,17.197,1.165,17.86,1.1l10.925-1.094c0.661-0.065,1.149,0.422,1.082,1.083l-1.093,10.924
        C28.708,12.677,28.269,12.834,27.798,12.362z M24.658,13.782l4.308,4.308c0.726,0.727,0.726,1.916,0,2.643l-8.724,8.725
        c-0.727,0.727-1.917,0.727-2.643,0L0.674,12.533c-0.726-0.728-0.726-1.916,0-2.644l8.723-8.723
        c0.727-0.727,1.917-0.727,2.643-0.001L16.174,5.3l-0.919,0.92l-3.36-3.36l-9.527,9.527l15.025,15.026l9.527-9.528l-3.184-3.183
        L24.658,13.782z M4.593,8.195c0.088,0.09,0.231,0.089,0.32,0l2.791-2.79c0.088-0.09,0.088-0.231,0-0.32
        c-0.089-0.089-0.231-0.089-0.32,0L4.593,7.876C4.505,7.964,4.504,8.107,4.593,8.195z M23.943,23.111
        c-0.365-0.364-0.958-0.363-1.321,0c-0.365,0.365-0.365,0.957,0.001,1.322c0.363,0.364,0.956,0.364,1.32,0
        C24.307,24.068,24.307,23.477,23.943,23.111z"/>
</g>
</svg>

Connect.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="580px" height="580px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="nonzero" viewBox="0 0 5800 5800" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>graph_connection icon</title>
    <desc>graph_connection icon from the IconExperience.com I-Collection. Copyright by INCORS GmbH (www.incors.com).</desc>
        <path id="curve28" fill="#000000" d="M1900 2800l2000 0 0 200 -2000 0 0 -200zm-900 -600c387,0 700,313 700,700 0,387 -313,700 -700,700 -387,0 -700,-313 -700,-700 0,-387 313,-700 700,-700zm0 200c-276,0 -500,224 -500,500 0,276 224,500 500,500 276,0 500,-224 500,-500 0,-276 -224,-500 -500,-500zm3800 -200c387,0 700,313 700,700 0,387 -313,700 -700,700 -387,0 -700,-313 -700,-700 0,-387 313,-700 700,-700zm0 200c-276,0 -500,224 -500,500 0,276 224,500 500,500 276,0 500,-224 500,-500 0,-276 -224,-500 -500,-500z"/>
</svg>

Thank you in advance for your support.

Upvotes: 2

Views: 897

Answers (1)

Jean-Daniel Gasser
Jean-Daniel Gasser

Reputation: 512

Thanks to this great information page, I finally figured out.

After many tries, it appears that XamSvg with hardware acceleration doesn't like too big and also too small images, this is certainly due to the number of deigits representing the values in SVG text file.

Here are the conclusions, everything is done using Inkscape 0.92:

  • Resize the SVG in order to size about 300 px (File -> Document properties / Custom Size)
  • In "Scale" group of Document properties, set the Scale x to 1.0 (Viewbox size must be the same as the size of the document)
  • For each path, ensure "relative mode" is not checked in all "Transform (Shift+Ctrl+M)" properties
  • Clean the image by saving it as "Optimized SVG" with Inkscape as described in the SVG optimizing guide under section " Cleaning and Optimizing SVG files"

Upvotes: 1

Related Questions