XamSVG在Android上的Xamarin表单:一些在棉花糖中没有显示的图像。

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

一些用户将他们的设备升级为棉花糖。由于进行了升级，我的应用程序只显示了一些SVG图像。

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

下面是我在棒棒糖和棉花糖版本的Android上测试的一个示例应用程序的主页面的XAML代码:

    <?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:

这是一个装有棒棒糖的设备和另一个装有棉花糖的设备的结果:

The only accepted image is "SendData".

唯一被接受的映像是“SendData”。

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

下面是一个运行中的SVG文件(SendData.svg)和另一个不工作的文件(Connect.svg)的示例

SendData:

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

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.

预先感谢您的支持。

1 个解决方案

#1

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.

经过多次尝试，看起来XamSvg具有硬件加速功能，它不喜欢太大的图像，也不喜欢太小的图像，这当然是由于表示SVG文本文件中的值的deigits的数量。

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

这里是结论，所有的一切都是使用Inkscape 0.92:

Resize the SVG in order to size about 300 px (File -> Document properties / Custom Size)
将SVG的大小调整为300像素(文件->文档属性/自定义大小)
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)
在“Scale”文档属性组中，将Scale x设置为1.0 (Viewbox大小必须与文档的大小相同)
For each path, ensure "relative mode" is not checked in all "Transform (Shift+Ctrl+M)" properties
对于每个路径，确保在所有的“转换(Shift+Ctrl+M)”属性中都不检查“相对模式”
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"
按照SVG优化指南“清理和优化SVG文件”一节中所描述的那样，将图像保存为“优化的SVG”，并将其保存为“优化的SVG”图像

#1