Why won't this SVG rasterize fine with my code? - android

I'm getting the svg string from this library, and I wanted to rasterize it on both Android and iOS with SkiaSharp:
<svg viewBox="0 0 160 160" width="160" height="160" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/xlink">
<defs>
<clipPath id="hexagon-clip-3602224084" transform="scale(0.5) translate(0, 16)">
<path d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
</clipPath>
</defs>
<path fill="white" stroke="#bbbbbb" transform="translate(0, 8) scale(0.5)" d="M251.6 17.34l63.53 110.03c5.72 9.9 5.72 22.1 0 32L251.6 269.4c-5.7 9.9-16.27 16-27.7 16H96.83c-11.43 0-22-6.1-27.7-16L5.6 159.37c-5.7-9.9-5.7-22.1 0-32L69.14 17.34c5.72-9.9 16.28-16 27.7-16H223.9c11.43 0 22 6.1 27.7 16z" />
<g transform="scale(0.9) translate(9, 8)">
<g clip-path="url(#hexagon-clip-3602224084)">
<g color="#3949ab" fill="#fb8c00">
<rect fill="#795548" x="0" y="0" width="160" height="160">
</rect>
<circle cx="80" cy="80" r="40" fill="#3949ab">
</circle>
<g opacity=".1" fill="#010101">
<path d="M119.21,80a39.46,39.46,0,0,1-67.13,28.13c10.36,2.33,36,3,49.82-14.28,10.39-12.47,8.31-33.23,4.16-43.26A39.35,39.35,0,0,1,119.21,80Z" />
</g>
<path d="M78.1 20.6C59.9 21.7 45.6 26.4 46 31.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" opacity=".1" />
<path d="M78.1 19.6C59.9 20.7 45.6 25.4 46 30.1s15.5 7.7 33.7 6.6 32.5-5.8 32.1-10.5-15.6-7.7-33.7-6.6zm1.3 14.5c-16.3.9-29.8-1.1-30.1-4.6s12.6-7.1 29-8.1 29.8 1.1 30.1 4.6-12.6 7.1-29 8.1z" fill="#fff800" />
<path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464s-2.035 4.07-9.022 4.07c-6.988 0-24.148-13.092-30.163-25.121-6.014-12.03-4.068-15.214-3.095-17.248z" stroke-width=".885" />
<path d="M29.958 70.973s6.103-5.042 10.083 2.034c3.98 7.076-.973 12.118-.973 12.118s11.057 15.302 19.106 16.187c0 0 3.361-4.865 10.26-1.504 6.9 3.361 3.804 9.464 3.804 9.464-4.334-7.518-7.873-6.633-15.214-6.191-12.118-3.184-21.582-14.418-20.079-16.806 0 .088 5.307-14.595-6.987-15.302z" opacity=".18" fill="#010101" stroke-width=".885" />
<path d="M26.7 55.6c-4.2 2.2-8.8 8.3-9.7 13" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M30 59.2c-3.4 1.8-7.2 6.8-7.9 10.7" opacity=".6" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M94 85s4.8-2 8.2 0c.8.4.7 1.1 0 2 0 0-3.4 4-4.1 4s-4.8-4-4.8-4c-.6-1-.3-1.7.7-2z" fill="#3a3a3a" />
<path d="M99.3 84.1c1 .2 2 .4 3 .9.8.4.7 1.1 0 2-1.2 1.5-2.6 2.9-4.1 4 1.9-3.2 2.6-6.3 1.1-6.9z" opacity=".2" />
<path d="M96 100c1.6.2 2-5.8 2-9M88 95.5s7.5 11 18 0" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
<path d="M79 82s0-12 6-12 6 11.6 6 11.6S86 70 79 82zM102 82s0-12 6-12 6 11.6 6 11.6-5-11.6-12 .4z" fill="#010101" opacity=".6" />
<path d="M96 86s4-1 6 0h-6z" opacity=".3" fill="#fff" />
<path d="M93 90c-9.9-3.8-20.4-6.2-31-7M92.6 91.3c-12-2.8-27.7-1.2-27.7-1.2M92.5 93.2c-12.3-1-27.6 5-27.6 5M101 90c8.5-3.8 17.7-6.2 27-7M101.3 91.3c10.5-2.8 24.1-1.2 24.1-1.2M101.4 93.2c10.7-1 24 5 24 5" fill="none" stroke="#000" stroke-width=".5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 5.6 7 16.7 11.8 22.9 8.4s5.6-15.3-1.4-20.2c-1.7-1.4-3.2-2.9-4.4-4.7-7.9-3.2-14.6-8.1-19.5-15.8z" fill="#99671d" />
<path d="M46.4 101.1s-1.3 1.9-1.1 5.9c.7 9.7-2.1 19.5 3.5 26.4 12.2 12.9 22.9 8.4 22.9 8.4-10.1 1.1-21.6-35.8-21.6-35.8-1.4-1.5-2.6-3.1-3.7-4.9z" fill="#6d4716" />
<path d="M54.8 115.4c-4 0-7.3-3.3-7.3-7.3.1-1.3.5-2.7 1.1-3.8.1-.2 7.1 8.1 10.8 9.5 0-.1-1.3 1.2-4.6 1.6z" fill="#fff" />
<path d="M58.8 113.3c-.8.3-1.7.5-2.6.6-3.4-.1-6-2.9-5.9-6.3 0-.6.1-1.2.2-1.8 0 .2 4.6 6.2 8.3 7.5z" opacity=".2" />
<path d="M94 124.5s-2.8 5.5-5.5 7.5c-1.2.8-2.3 1.8-3.4 2.7v4.4c0 .4 10.2-3 8.9-14.6z" fill="#6d4716" />
<path d="M94.6 124.5s-5.4-1.4-8.9 2c-3.4 3.4-3.4 8.2-1.4 8.2s2.2.7 10.3-10.2z" fill="#fff" />
<path d="M120.5 108.8s-4.8-8.2-19.1-.7c-14.3 7.5-2.7 23.2-15.7 30.7 0 0 3.7 3.64 8.39-5.85 4.644-9.396 4.61-24.75 26.41-24.15z" fill="#99671d" />
<path d="M85.8 138.8s6.1 2.7 10.2-10.9 8.9-21.8 20.4-21.1c1.6 0 3.2.6 4.4 1.7 5.6 5 1.3 19.6-4.4 24.2-6.8 5.4-21.8 10.9-27.9 8.9s-2.7-2.8-2.7-2.8z" fill="#444" />
<path d="M84.8 119.2l1 7.4c1.9-1.4 3.6-2.3 5-2.3l-.6-6.2c-1.8.5-3.6.8-5.4 1.1z" fill="#ffc866" />
<path d="M119.2 112.6h-11.6c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h11.6c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM120.3 115.8h-14.7c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h14.7c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM120.3 118.9h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.3.5-.5.5zM119.2 122.1h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .2-.2.5-.5.5zM118.1 125.2h-17.9c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h17.9c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5zM116.1 128.4H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5h17.9c.3 0 .5.2.5.5 0 .2-.3.5-.5.5zM114 131.5H98.2c-.3 0-.5-.2-.5-.5s.2-.5.5-.5H114c.3 0 .5.2.5.5v.1c0 .2-.3.4-.5.4zM109.8 134.7H96.1c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h13.7c.3 0 .5.2.5.5v.1c0 .2-.3.5-.5.5zM104.5 137.8H95c-.3 0-.5-.2-.5-.5v-.1c0-.3.2-.5.5-.5h9.5c.3 0 .5.2.5.5v.1c0 .3-.2.5-.5.5z" />
</g>
</g>
</g>
</svg>
This is how I'm currently doing it:
var byteArray = Encoding.ASCII.GetBytes(svgStoredAsString);
using (var inputStream = new MemoryStream(byteArray))
{
var svg = new SkiaSharp.Extended.Svg.SKSvg();
svg.Load(inputStream);
using (var bitmap = new SKBitmap(100, 100))
using (var canvas = new SKCanvas(bitmap))
{
canvas.Scale(100 / svg.CanvasSize.Width, 100 / svg.CanvasSize.Height);
canvas.DrawPicture(svg.Picture);
canvas.Flush();
canvas.Save();
using (var file = File.OpenWrite(path))
using (var outputStream = new SKManagedWStream(file))
{
bitmap.Encode(outputStream, SKEncodedImageFormat.Png, 100);
}
}
}
((Image)image).Source = ImageSource.FromFile(path);
The svg shows just fine on the browser and even opens on Illustrator:
This is what I'm getting instead when rasterizing with my code:

Related

SVG to VectorDrawable - black areas

When converting my SVG file to XML in Android Studio, some areas lose their colour and turn black. I generate the images with matplotlib.
I would like to know what is the reason, has anyone had a similar experience?
Part of the SVG code:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with matplotlib (https://matplotlib.org/) -->
<svg height="325.44pt" version="1.1" viewBox="0 0 169.766662 325.44" width="169.766662pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style type="text/css">
*{stroke-linecap:butt;stroke-linejoin:round;}
</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 325.44
L 169.766662 325.44
L 169.766662 0
L 0 0
z
" style="fill:#ffffff;"/>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 7.2 318.24
L 7.2 7.2
L 162.566662 7.2
L 162.566662 318.24
L 7.2 318.24
" style="fill:#ffffff;"/>
</g>
<g id="PathCollection_1">
<path clip-path="url(#p754b03d407)" d="M 78716.596016 -27474.520089
L 77942.322246 -27221.279456
L 78050.518304 -27028.327541
L 78716.596016 -27059.341745
L 78716.596016 -25924.398002
L 77866.272281 -26189.452266
L 76119.356759 -26479.331987
L 74855.808906 -26442.999703
... Path continues ...
M -22910.24931 -17813.121791
L -23104.077101 -18117.690382
L -23995.151323 -17916.360593
L -23910.337932 -17664.227519
L -23274.708335 -17321.128788
z
" style="fill:#ffffff;stroke:#ffffff;"/>
</g>
<g id="PathCollection_2">
<defs>
<path d="M 87.509701 -270.95066
L 113.70849 -250.33765
L 119.863663 -259.100553
L 128.991691 -265.620573
L 132.903703 -256.492545
L 136.815715 -242.1485
L 144.639739 -241.496498
L 138.472461 -234.591775
L 138.119719 -223.240442
L 125.868684 -220.480916
L 129.427765 -185.137266
L 128.093109 -131.553327
L 119.047112 -64.622833
L 113.560196 -51.350428
L 95.913086 -25.225786
L 95.814223 -25.126923
L 91.760825 -43.490791
L 84.84039 -63.6342
L 75.250644 -83.258577
L 63.090452 -100.139495
L 36.595072 -127.203339
L 32.146221 -144.034825
L 44.009824 -164.425393
L 47.321746 -173.273663
L 50.633669 -182.121934
L 47.173451 -204.984085
L 37.929727 -227.450783
L 27.598506 -243.812669
L 25.126923 -251.128557
L 25.522376 -261.064324
L 32.591106 -289.78413
L 37.039957 -296.85286
L 44.899594 -300.313077
L 44.998457 -300.288362
L 45.591637 -300.288362
L 58.542737 -299.967055
L 66.105784 -298.558253
L 75.843825 -294.554287
L 83.752893 -291.291796
L 83.802325 -291.316512
L 108.814755 -300.263646
L 112.818721 -297.890925
L 115.339736 -289.957141
L 119.788587 -284.470224
L 121.123243 -281.973925
L 122.457898 -279.502341
L 119.047112 -273.026791
L 113.313037 -271.593272
L 96.01195 -273.768266
z
" id="mae49ba8945" style="stroke:#ffffff;stroke-width:0.25;"/>
</defs>
<g clip-path="url(#p754b03d407)">
<use style="fill:#000098;stroke:#ffffff;stroke-width:0.25;" x="0" xlink:href="#mae49ba8945" y="325.44"/>
</g>
</g>
<g id="patch_3">
<path d="M 7.2 318.24
L 7.2 7.2
L 162.566662 7.2
L 162.566662 318.24
L 7.2 318.24
" style="fill:none;stroke:#000000;stroke-linejoin:miter;"/>
</g>
</g>
</g>
<defs>
<clipPath id="p754b03d407">
<rect height="311.04" width="155.366662" x="7.2" y="7.2"/>
</clipPath>
</defs>
</svg>
Android Studio complains the document contains very long lines, could that be the issue?

The svg to xml thing is not perfect. You can probably fix the problem by manually coloring the object. The structure of a simple image is something like
<vector ...>
<path
android:fillColor="this attribute you want to add"
android:pathData="..." />
</vector>
P.S. As for the long path, you can use avocado to optimize the image.

Convert android vector drawable XML to SVG

How can I convert my android vector drawable to SVG?
Don't mark it as duplicate question. I have already tried those methods but didn't work, what I have tried https://shapeshifter.design/ website, but actually it is good, but it gives me wrong input and output.
Suppose I have a vector
<vector android:height="80dp" android:viewportHeight="512"
android:viewportWidth="512" android:width="80dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#color/colorLightYellow" android:pathData="M150.561,144.549c-1.315,0 -2.647,-0.341 -3.86,-1.06L52.164,87.532c-3.609,-2.136 -4.803,-6.793 -2.667,-10.402c2.137,-3.608 6.793,-4.802 10.402,-2.667l94.537,55.957c3.609,2.136 4.803,6.793 2.667,10.402C155.685,143.217 153.156,144.549 150.561,144.549z"/>
<path android:fillColor="#color/colorLightYellow" android:pathData="M150.568,144.548H47.842c-4.194,0 -7.593,-3.399 -7.593,-7.593s3.4,-7.593 7.593,-7.593h102.727c4.194,0 7.593,3.399 7.593,7.593S154.762,144.548 150.568,144.548z"/>
<path android:fillColor="#color/colorLightOrange" android:pathData="M342.693,335.833L207.961,136.955l51.811,-74.838c10.849,-15.671 -0.367,-37.077 -19.426,-37.077H118.183c-19.059,0 -30.275,21.406 -19.426,37.077l51.811,74.838L15.836,335.833C5.516,351.066 0,369.043 0,387.443l0,0c0,50.82 41.198,92.018 92.017,92.018h174.495c50.82,0 92.017,-41.198 92.017,-92.018l0,0C358.529,369.043 353.013,351.066 342.693,335.833z"/>
<path android:fillColor="#color/colorLightOrange" android:pathData="M342.693,335.833L207.961,136.955l51.811,-74.838c10.849,-15.671 -0.367,-37.077 -19.426,-37.077h-22.144c17.303,0 27.486,21.406 17.637,37.077l-47.038,74.838L311.12,335.833c9.369,15.233 14.377,33.211 14.377,51.61c0,50.82 -37.402,92.018 -83.539,92.018h24.555c50.82,0 92.017,-41.198 92.017,-92.018C358.529,369.043 353.013,351.066 342.693,335.833z"/>
<path android:fillColor="#color/colorLightYellow" android:pathData="M214.129,144.548h-71.883c-4.194,0 -7.593,-3.399 -7.593,-7.593s3.4,-7.593 7.593,-7.593h71.883c4.194,0 7.593,3.399 7.593,7.593S218.323,144.548 214.129,144.548z"/>
<path android:fillColor="#FCAB29" android:pathData="M393.083,249.127c-65.571,0 -118.917,53.346 -118.917,118.917c0,65.57 53.346,118.916 118.917,118.916S512,433.614 512,368.044C512,302.473 458.654,249.127 393.083,249.127z"/>
<path android:fillColor="#DD8D19" android:pathData="M458.128,268.543c22.753,21.675 36.953,52.25 36.953,86.081c0,65.57 -53.346,118.916 -118.917,118.916c-23.991,0 -46.341,-7.148 -65.045,-19.417c21.347,20.336 50.223,32.836 81.964,32.836C458.654,486.96 512,433.614 512,368.044C512,326.464 490.544,289.807 458.128,268.543z"/>
<path android:fillColor="#F2DF33" android:pathData="M393.08,368.04m-80.17,0a80.17,80.17 0,1 1,160.34 0a80.17,80.17 0,1 1,-160.34 0"/>
<path android:fillColor="#FCAB29" android:pathData="M403.037,360.544h-19.908c-5.535,0 -10.038,-4.503 -10.038,-10.038s4.503,-10.038 10.038,-10.038h29.192c4.142,0 7.5,-3.357 7.5,-7.5s-3.358,-7.5 -7.5,-7.5h-11.738v-7.827c0,-4.143 -3.358,-7.5 -7.5,-7.5s-7.5,3.357 -7.5,7.5v7.827h-2.454c-13.806,0 -25.038,11.232 -25.038,25.038s11.232,25.038 25.038,25.038h19.908c5.535,0 10.038,4.503 10.038,10.037c0,5.535 -4.503,10.038 -10.038,10.038h-29.192c-4.142,0 -7.5,3.357 -7.5,7.5s3.358,7.5 7.5,7.5h11.739v7.827c0,4.143 3.358,7.5 7.5,7.5s7.5,-3.357 7.5,-7.5v-7.827h2.454c13.806,0 25.038,-11.232 25.038,-25.038S416.843,360.544 403.037,360.544z"/>
<path android:fillColor="#color/colorLightYellow" android:pathData="M368.669,144.262l-18.046,-14.437c-0.019,-0.016 -0.042,-0.025 -0.061,-0.041c-0.315,-0.248 -0.648,-0.473 -1.001,-0.668c-0.007,-0.003 -0.013,-0.008 -0.02,-0.012c-0.339,-0.186 -0.696,-0.339 -1.064,-0.472c-0.05,-0.018 -0.1,-0.038 -0.15,-0.055c-0.347,-0.116 -0.704,-0.207 -1.071,-0.272c-0.065,-0.011 -0.129,-0.02 -0.193,-0.029c-0.368,-0.056 -0.741,-0.093 -1.124,-0.093s-0.756,0.038 -1.124,0.093c-0.065,0.01 -0.129,0.018 -0.193,0.029c-0.367,0.065 -0.725,0.156 -1.071,0.272c-0.051,0.017 -0.1,0.037 -0.15,0.055c-0.368,0.132 -0.725,0.286 -1.064,0.472c-0.007,0.004 -0.013,0.009 -0.02,0.012c-0.353,0.195 -0.686,0.421 -1.001,0.668c-0.02,0.016 -0.042,0.025 -0.061,0.041l-18.046,14.437c-3.234,2.588 -3.759,7.307 -1.171,10.542c2.587,3.233 7.306,3.759 10.542,1.171l5.861,-4.688v68.76c0,4.143 3.358,7.5 7.5,7.5s7.5,-3.357 7.5,-7.5v-68.76l5.861,4.688c1.383,1.106 3.037,1.644 4.68,1.644c2.2,0 4.38,-0.963 5.861,-2.814C372.429,151.568 371.904,146.85 368.669,144.262z"/>
<path android:fillColor="#color/colorLightYellow" android:pathData="M462.959,104.039l-18.046,-14.437c-0.019,-0.016 -0.042,-0.025 -0.061,-0.041c-0.315,-0.248 -0.648,-0.473 -1.001,-0.668c-0.007,-0.003 -0.013,-0.008 -0.02,-0.012c-0.339,-0.186 -0.696,-0.339 -1.064,-0.472c-0.05,-0.018 -0.1,-0.038 -0.15,-0.055c-0.347,-0.116 -0.704,-0.207 -1.071,-0.272c-0.065,-0.011 -0.129,-0.02 -0.193,-0.029c-0.368,-0.056 -0.741,-0.093 -1.124,-0.093s-0.756,0.038 -1.124,0.093c-0.065,0.01 -0.129,0.018 -0.193,0.029c-0.367,0.065 -0.725,0.156 -1.071,0.272c-0.051,0.017 -0.1,0.037 -0.15,0.055c-0.368,0.132 -0.725,0.286 -1.064,0.472c-0.007,0.004 -0.013,0.009 -0.02,0.012c-0.353,0.195 -0.686,0.421 -1.001,0.668c-0.02,0.016 -0.042,0.025 -0.061,0.041l-18.046,14.437c-3.234,2.588 -3.759,7.307 -1.171,10.542c2.587,3.233 7.306,3.758 10.542,1.171l5.861,-4.688v68.76c0,4.143 3.358,7.5 7.5,7.5s7.5,-3.357 7.5,-7.5v-68.76l5.861,4.688c1.383,1.106 3.037,1.644 4.68,1.644c2.2,0 4.38,-0.963 5.861,-2.814C466.718,111.346 466.193,106.627 462.959,104.039z"/>
</vector>
than this website shows me this:
but my actual vector is this:
The website doesn't show the knapsack and those 2 arrows and after exporting also, it only shows the coins only.
I need to make this vector into PNG, that why I am trying it to make SVG then PNG, and I tried few more websites but either those shows deprecated.

I have converted it without of any programm. Here is the SVG for you:
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 512 512">
<path fill="#fcab29" d="M150.561,144.549c-1.315,0 -2.647,-0.341 -3.86,-1.06L52.164,87.532c-3.609,-2.136 -4.803,-6.793 -2.667,-10.402c2.137,-3.608 6.793,-4.802 10.402,-2.667l94.537,55.957c3.609,2.136 4.803,6.793 2.667,10.402C155.685,143.217 153.156,144.549 150.561,144.549z"/>
<path fill="#fcab29" d="M150.568,144.548H47.842c-4.194,0 -7.593,-3.399 -7.593,-7.593s3.4,-7.593 7.593,-7.593h102.727c4.194,0 7.593,3.399 7.593,7.593S154.762,144.548 150.568,144.548z"/>
<path fill="#ed664c" d="M342.693,335.833L207.961,136.955l51.811,-74.838c10.849,-15.671 -0.367,-37.077 -19.426,-37.077H118.183c-19.059,0 -30.275,21.406 -19.426,37.077l51.811,74.838L15.836,335.833C5.516,351.066 0,369.043 0,387.443l0,0c0,50.82 41.198,92.018 92.017,92.018h174.495c50.82,0 92.017,-41.198 92.017,-92.018l0,0C358.529,369.043 353.013,351.066 342.693,335.833z"/>
<path fill="#ed664c" d="M342.693,335.833L207.961,136.955l51.811,-74.838c10.849,-15.671 -0.367,-37.077 -19.426,-37.077h-22.144c17.303,0 27.486,21.406 17.637,37.077l-47.038,74.838L311.12,335.833c9.369,15.233 14.377,33.211 14.377,51.61c0,50.82 -37.402,92.018 -83.539,92.018h24.555c50.82,0 92.017,-41.198 92.017,-92.018C358.529,369.043 353.013,351.066 342.693,335.833z"/>
<path fill="#fcab29" d="M214.129,144.548h-71.883c-4.194,0 -7.593,-3.399 -7.593,-7.593s3.4,-7.593 7.593,-7.593h71.883c4.194,0 7.593,3.399 7.593,7.593S218.323,144.548 214.129,144.548z"/>
<path fill="#FCAB29" d="M393.083,249.127c-65.571,0 -118.917,53.346 -118.917,118.917c0,65.57 53.346,118.916 118.917,118.916S512,433.614 512,368.044C512,302.473 458.654,249.127 393.083,249.127z"/>
<path fill="#DD8D19" d="M458.128,268.543c22.753,21.675 36.953,52.25 36.953,86.081c0,65.57 -53.346,118.916 -118.917,118.916c-23.991,0 -46.341,-7.148 -65.045,-19.417c21.347,20.336 50.223,32.836 81.964,32.836C458.654,486.96 512,433.614 512,368.044C512,326.464 490.544,289.807 458.128,268.543z"/>
<path fill="#F2DF33" d="M393.08,368.04m-80.17,0a80.17,80.17 0,1 1,160.34 0a80.17,80.17 0,1 1,-160.34 0"/>
<path fill="#FCAB29" d="M403.037,360.544h-19.908c-5.535,0 -10.038,-4.503 -10.038,-10.038s4.503,-10.038 10.038,-10.038h29.192c4.142,0 7.5,-3.357 7.5,-7.5s-3.358,-7.5 -7.5,-7.5h-11.738v-7.827c0,-4.143 -3.358,-7.5 -7.5,-7.5s-7.5,3.357 -7.5,7.5v7.827h-2.454c-13.806,0 -25.038,11.232 -25.038,25.038s11.232,25.038 25.038,25.038h19.908c5.535,0 10.038,4.503 10.038,10.037c0,5.535 -4.503,10.038 -10.038,10.038h-29.192c-4.142,0 -7.5,3.357 -7.5,7.5s3.358,7.5 7.5,7.5h11.739v7.827c0,4.143 3.358,7.5 7.5,7.5s7.5,-3.357 7.5,-7.5v-7.827h2.454c13.806,0 25.038,-11.232 25.038,-25.038S416.843,360.544 403.037,360.544z"/>
<path fill="#fcab29" d="M368.669,144.262l-18.046,-14.437c-0.019,-0.016 -0.042,-0.025 -0.061,-0.041c-0.315,-0.248 -0.648,-0.473 -1.001,-0.668c-0.007,-0.003 -0.013,-0.008 -0.02,-0.012c-0.339,-0.186 -0.696,-0.339 -1.064,-0.472c-0.05,-0.018 -0.1,-0.038 -0.15,-0.055c-0.347,-0.116 -0.704,-0.207 -1.071,-0.272c-0.065,-0.011 -0.129,-0.02 -0.193,-0.029c-0.368,-0.056 -0.741,-0.093 -1.124,-0.093s-0.756,0.038 -1.124,0.093c-0.065,0.01 -0.129,0.018 -0.193,0.029c-0.367,0.065 -0.725,0.156 -1.071,0.272c-0.051,0.017 -0.1,0.037 -0.15,0.055c-0.368,0.132 -0.725,0.286 -1.064,0.472c-0.007,0.004 -0.013,0.009 -0.02,0.012c-0.353,0.195 -0.686,0.421 -1.001,0.668c-0.02,0.016 -0.042,0.025 -0.061,0.041l-18.046,14.437c-3.234,2.588 -3.759,7.307 -1.171,10.542c2.587,3.233 7.306,3.759 10.542,1.171l5.861,-4.688v68.76c0,4.143 3.358,7.5 7.5,7.5s7.5,-3.357 7.5,-7.5v-68.76l5.861,4.688c1.383,1.106 3.037,1.644 4.68,1.644c2.2,0 4.38,-0.963 5.861,-2.814C372.429,151.568 371.904,146.85 368.669,144.262z"/>
<path fill="#fcab29" d="M462.959,104.039l-18.046,-14.437c-0.019,-0.016 -0.042,-0.025 -0.061,-0.041c-0.315,-0.248 -0.648,-0.473 -1.001,-0.668c-0.007,-0.003 -0.013,-0.008 -0.02,-0.012c-0.339,-0.186 -0.696,-0.339 -1.064,-0.472c-0.05,-0.018 -0.1,-0.038 -0.15,-0.055c-0.347,-0.116 -0.704,-0.207 -1.071,-0.272c-0.065,-0.011 -0.129,-0.02 -0.193,-0.029c-0.368,-0.056 -0.741,-0.093 -1.124,-0.093s-0.756,0.038 -1.124,0.093c-0.065,0.01 -0.129,0.018 -0.193,0.029c-0.367,0.065 -0.725,0.156 -1.071,0.272c-0.051,0.017 -0.1,0.037 -0.15,0.055c-0.368,0.132 -0.725,0.286 -1.064,0.472c-0.007,0.004 -0.013,0.009 -0.02,0.012c-0.353,0.195 -0.686,0.421 -1.001,0.668c-0.02,0.016 -0.042,0.025 -0.061,0.041l-18.046,14.437c-3.234,2.588 -3.759,7.307 -1.171,10.542c2.587,3.233 7.306,3.758 10.542,1.171l5.861,-4.688v68.76c0,4.143 3.358,7.5 7.5,7.5s7.5,-3.357 7.5,-7.5v-68.76l5.861,4.688c1.383,1.106 3.037,1.644 4.68,1.644c2.2,0 4.38,-0.963 5.861,-2.814C466.718,111.346 466.193,106.627 462.959,104.039z"/>
</svg>
I can say also why you had bad luck on the converting site:
https://shapeshifter.design
It is because you have in your code not convertable color values like #color/colorLightYellow. If you change android:fillColor="#color/colorLightYellow" to android:fillColor="#fcab29" and android:fillColor="#color/colorLightOrange" to android:fillColor="#ed664c" overall in your code then you will be able to convert your Android vector drawable image into SVG on this site without any mistakes.

You can use the https://shapeshifter.design/
Import the vector and use export button

Someone created this https://vd.floo.app/ - very simple and easy to use, but I think that problem is caused by usage of Android resource link #color/colorLightYellow, bcz none of converters know about what the color it is)

Animated vector drawable like Temple run chest

I'm trying to implement the Temple run like treasure chest open and close effect for gained coins or loyalty.
What I have in mind is to use an animated vector but I can't seem to get a good grip on how to do it.
Also I'm getting an error when trying it on SDK less than 21.
Here is the vector I'm using
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#c6c5cb"
android:pathData="M234.536 85.605l-212.174 122.498 0 155.663 27.088 15.741 212.174 -122.499 0 -155.662 -27.088 -15.741zm-17.793 145.271l-149.061 86.06 0 -82.7 148.826 -85.925 0.235 82.565z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M243.508 246.617l-26.765 -15.741 -0.322 -113.894 27.087 15.741z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M67.682 348.13L40.918 332.389 216.743 230.876 243.508 246.617Z" />
<path
android:fillColor="#d8d8da"
android:pathData="M49.449 223.845l0 155.663 -27.087 -15.743 0 -155.662z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M261.623 101.346L49.449 223.845 22.362 208.103 234.536 85.605Z" />
<path
android:fillColor="#c6c5cb"
android:pathData="M49.449 223.845l212.174 -122.499 0 155.662 -212.174 122.5 0 -155.663zm194.059 22.772l0 -113.894 -175.826 101.512 0 113.895 175.826 -101.513" />
<path
android:fillColor="#c6c5cb"
android:pathData="M261.594 90.904c-0.095 -33.501 -12.004 -57.06 -31.166 -68.089 0.062 0.036 0.125 0.068 0.187 0.103L203.527 7.177C184.226 -4.04 157.511 -2.486 128.074 14.51 69.574 48.284 22.141 130.441 22.331 197.661l0.029 10.443 27.088 15.741 212.174 -122.499 -0.028 -10.442zm-45.759 -15.421l0 0 -140.484 81.108c13.757 -42.914 44.347 -84.948 79.869 -105.456 17.463 -10.082 33.759 -13.58 47.484 -11.358 7.037 8.735 11.672 20.766 13.131 35.706z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M190.656 29.321l27.088 15.741c13.779 8.008 23 23.867 25.18 46.162L215.836 75.483c-2.179 -22.294 -11.4 -38.154 -25.18 -46.162z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M68.03 192.199L40.943 176.456 215.835 75.483 242.923 91.224Z" />
<path
android:fillColor="#d8d8da"
android:pathData="M49.419 213.402l0.03 10.443 -27.087 -15.742 -0.031 -10.442z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M203.527 7.177l27.088 15.741C211.314 11.701 184.599 13.255 155.162 30.251L128.074 14.51c29.437 -16.996 56.152 -18.55 75.453 -7.333z" />
<path
android:fillColor="#d8d8da"
android:pathData="M49.419 213.402L22.331 197.661C22.141 130.441 69.574 48.283 128.073 14.51l27.088 15.741C96.662 64.026 49.229 146.183 49.419 213.402Z" />
<path
android:fillColor="#c6c5cb"
android:pathData="M155.161 30.251C213.66 -3.524 261.403 23.684 261.594 90.903l0.029 10.443L49.449 223.845 49.42 213.402C49.229 146.183 96.662 64.026 155.161 30.251ZM68.03 192.199L242.923 91.224C238.215 43.05 200.624 24.921 155.22 51.135 109.808 77.354 72.45 138.754 68.03 192.199" />
<path
android:fillColor="#f18700"
android:pathData="M59.51 364.73l225.347 131.18 193.999 -112.007 0 -134.778L253.127 117.946 59.128 229.951Z" />
<path
android:fillColor="#ff9911"
android:pathData="M284.857 495.91L59.51 364.73 59.128 229.951 284.857 361.131Z" />
<path
android:fillColor="#ff9911"
android:pathData="M284.857 361.131L59.128 229.951 253.127 117.946 478.856 249.125Z" />
<path
android:fillColor="#f18700"
android:pathData="M284.857 361.131l193.999 -112.006 0 134.778 -193.999 112.007z" />
<path
android:fillColor="#d8d8da"
android:pathData="M35.891 345.946l0 25.605 241.574 140.449 0 -25.605 9.747 -5.768 -227.824 -133.298 -10.595 6.118z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M59.388 347.329l-10.595 6.118 228.672 132.948 9.747 -5.768z" />
<path
android:fillColor="#c6c5cb"
android:pathData="M462.581 218.097l-212.174 122.499 0 155.663 27.088 15.741 212.174 -122.499 0 -155.663 -27.088 -15.741zm-17.792 145.271l-149.06 86.06 0 -82.7 148.826 -85.925 0.234 82.565z" />
<path
android:fillColor="#acabb1"
android:pathData="M471.554 265.216l0 113.895 -26.765 -15.743 -0.323 -113.894z" />
<path
android:fillColor="#d8d8da"
android:pathData="M295.729 480.623l-26.764 -15.742 175.824 -101.513 26.765 15.743z" />
<path
android:fillColor="#d8d8da"
android:pathData="M277.495 512l-27.088 -15.741 0 -155.663 27.088 15.741z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M489.669 233.838L277.495 356.337 250.407 340.596 462.581 218.097Z" />
<path
android:fillColor="#c6c5cb"
android:pathData="M277.495 356.337l212.174 -122.499 0 155.662 -212.174 122.5 0 -155.663zm194.059 22.774l0 -113.895 -175.825 101.513 0 113.894 175.825 -101.512" />
<path
android:fillColor="#f18700"
android:pathData="M450.462 167.464c0.056 0.032 0.114 0.062 0.17 0.094L224.903 36.378C207.266 26.129 182.841 27.575 155.881 43.139 102.306 74.071 59.022 149.04 59.197 210.602l225.729 131.18 193.999 -112.005c-0.086 -30.681 -10.952 -52.236 -28.463 -62.313z" />
<path
android:fillColor="#ffa834"
android:pathData="M224.903 36.378l225.729 131.18c-17.637 -10.249 -42.062 -8.803 -69.022 6.761L155.881 43.14c26.96 -15.565 51.385 -17.011 69.022 -6.762z" />
<path
android:fillColor="#ff9911"
android:pathData="M284.927 341.783L59.197 210.603C59.023 149.041 102.306 74.071 155.881 43.14L381.61 174.32c-53.575 30.931 -96.858 105.901 -96.683 167.463z" />
<path
android:fillColor="#f18700"
android:pathData="M381.61 174.32c53.575 -30.932 97.142 -6.105 97.316 55.457L284.927 341.783C284.752 280.221 328.035 205.251 381.61 174.32Z" />
<path
android:fillColor="#d8d8da"
android:pathData="M49.951 200.666l-14.06 -8.174 0 51.21 241.574 140.449 0 -51.208 1.174 0.662 9.224 -5.466L60.039 194.841Z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M60.039 194.841l-10.071 5.816 228.671 132.948 9.224 -5.466z" />
<path
android:fillColor="#c6c5cb"
android:pathData="M489.64 223.397c-0.095 -33.501 -12.004 -57.061 -31.166 -68.089 0.062 0.036 0.125 0.068 0.186 0.103L431.572 139.67c-19.301 -11.217 -46.016 -9.663 -75.453 7.333 -58.499 33.774 -105.932 115.931 -105.741 183.15l0.029 10.443 27.088 15.741 212.174 -122.499 -0.029 -10.441zm-45.759 -15.422l-140.483 81.108c13.757 -42.914 44.347 -84.948 79.869 -105.456 17.463 -10.082 33.759 -13.58 47.484 -11.358 7.035 8.735 11.67 20.768 13.13 35.706z" />
<path
android:fillColor="#acabb1"
android:pathData="M418.702 161.814l27.088 15.741c13.779 8.008 23 23.867 25.18 46.162l-27.088 -15.741c-2.179 -22.295 -11.401 -38.155 -25.18 -46.162z" />
<path
android:fillColor="#d8d8da"
android:pathData="M470.969 223.717L296.076 324.691 268.989 308.95 443.881 207.975Z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M277.495 356.337l-27.088 -15.741 -0.029 -10.442 27.088 15.742z" />
<path
android:fillColor="#e0e0e2"
android:pathData="M431.572 139.669l27.088 15.741c-19.301 -11.217 -46.016 -9.663 -75.453 7.333l-27.088 -15.741c29.438 -16.996 56.152 -18.55 75.453 -7.333z" />
<path
android:fillColor="#d8d8da"
android:pathData="M277.466 345.896l-27.088 -15.741c-0.19 -67.219 47.242 -149.378 105.741 -183.151l27.088 15.741c-58.499 33.773 -105.932 115.93 -105.741 183.151z" />
<path
android:fillColor="#c6c5cb"
android:pathData="M383.207 162.743c58.499 -33.775 106.242 -6.567 106.433 60.652l0.029 10.443 -212.174 122.499 -0.029 -10.443C277.275 278.675 324.708 196.518 383.207 162.743ZM296.076 324.691L470.969 223.717c-4.708 -48.174 -42.299 -66.303 -87.703 -40.089 -45.412 26.219 -82.769 87.618 -87.19 141.063" />
<path
android:fillColor="#d8d8da"
android:pathData="M277.465 332.942l0 51.209 -241.574 -140.449 0 -51.21z" />
<path
android:fillColor="#d8d8da"
android:pathData="M277.465 486.395l0 25.605 -241.574 -140.449 0 -25.605z" />
<path
android:fillColor="#898890"
android:pathData="M169.258 320.33l0 -49.44 -43.026 -24.84 -12.466 7.244 0 49.44 42.885 24.84z" />
<path
android:fillColor="#898890"
android:pathData="M156.791 278.135l12.467 -7.245 0 49.44 -12.607 7.244z" />
<path
android:fillColor="#c6c5cb"
android:pathData="M156.791 278.135l-43.025 -24.841 12.466 -7.244 43.026 24.84z" />
<path
android:fillColor="#acabb1"
android:pathData="M113.766 253.294l43.025 24.841 -0.14 49.439 -42.885 -24.84z" />
<path
android:fillColor="#77767e"
android:pathData="M134.399 277.238c-4.05 -2.338 -7.349 -0.465
-7.362 4.188 -0.009 3.304 1.637 7.119 4.042 9.889l-0.029 10.433 6.551
3.782 0.029 -10.433c2.405 0.006 4.068 -1.898 4.077 -5.201 0.014
-4.654 -3.258 -10.321 -7.308 -12.658z" />
</vector>
And this is the link to what I want, but only the opening and closing of the chest.Youtube link
Might there also be a better way to do it?

Imported SVG from Inkscape isn't rendering

A SVG imported from Inkscape doesn't render in Android Studio. I'm not sure how to begin to trouble shoot this. Is there any in the xml code that gives a hint as to why?
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="10dp"
android:viewportWidth="188.56328"
android:viewportHeight="80.877213">
<path
android:strokeColor="#2cb71a"
android:strokeWidth="2.05815887"
android:strokeLineJoin="round"
android:pathData="M-185.37,134.151 L-0.63217,134.151 L-0.63217,213.584 L-185.37,213.584 L-185.37,134.151 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round"
android:pathData="M-34.9949,145.281 C-32.1268,145.281,-29.8018,147.606,-29.8018,150.475 C-29.8018,153.343,-32.1268,155.668,-34.9949,155.668 C-37.863,155.668,-40.188,153.343,-40.188,150.475 C-40.188,147.606,-37.863,145.281,-34.9949,145.281 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.42433667"
android:strokeLineJoin="round"
android:pathData="M-35.1156,156.996 L-34.8741,156.996 Q-26.7825,156.996,-26.7825,165.088 L-26.7825,177.889 Q-26.7825,185.981,-34.8741,185.981 L-35.1156,185.981 Q-43.2073,185.981,-43.2073,177.889 L-43.2073,165.088 Q-43.2073,156.996,-35.1156,156.996 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round"
android:pathData="M-104.59,121.139 L-104.59,121.139 Q-102.235,121.139,-102.235,123.494 L-102.235,133.155 Q-102.235,135.51,-104.59,135.51 L-104.59,135.51 Q-106.945,135.51,-106.945,133.155 L-106.945,123.494 Q-106.945,121.139,-104.59,121.139 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round"
android:pathData="M128.593,104.735 L128.593,104.735 Q130.948,104.735,130.948,107.09 L130.948,116.752 Q130.948,119.107,128.593,119.107 L128.593,119.107 Q126.238,119.107,126.238,116.752 L126.238,107.09 Q126.238,104.735,128.593,104.735 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round"
android:pathData="M-169.218,-6.47664 L-169.218,-6.47664 Q-166.863,-6.47664,-166.863,-4.12162 L-166.863,5.54001 Q-166.863,7.89503,-169.218,7.89503 L-169.218,7.89503 Q-171.573,7.89503,-171.573,5.54001 L-171.573,-4.12162 Q-171.573,-6.47664,-169.218,-6.47664 Z" />
<path
android:fillColor="#2cb71a"
android:fillAlpha="0.48387098"
android:strokeAlpha="0.48387098"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round"
android:pathData="M-173.866,-7.92172 L-173.866,-7.92172 Q-171.511,-7.92172,-171.511,-5.5667 L-171.511,4.09493 Q-171.511,6.44995,-173.866,6.44995 L-173.866,6.44995 Q-176.221,6.44995,-176.221,4.09493 L-176.221,-5.5667 Q-176.221,-7.92172,-173.866,-7.92172 Z" />
<path
android:fillColor="#2cb71a"
android:fillAlpha="0.98999999"
android:strokeAlpha="0.98999999"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round"
android:pathData="M-107.292,124.489 L-107.292,124.489 Q-104.937,124.489,-104.937,126.844 L-104.937,136.505 Q-104.937,138.86,-107.292,138.86 L-107.292,138.86 Q-109.647,138.86,-109.647,136.505 L-109.647,126.844 Q-109.647,124.489,-107.292,124.489 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round"
android:pathData="M-70.6076,172.683 L-71.0429,172.683 Q-68.4702,172.683,-68.4702,175.256 L-68.4702,185.811 Q-68.4702,188.383,-71.0429,188.383 L-70.6076,188.383 Q-73.1803,188.383,-73.1803,185.811 L-73.1803,175.256 Q-73.1803,172.683,-70.6076,172.683 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round"
android:pathData="M19.419,-211.623 L18.9836,-211.623 Q21.5563,-211.623,21.5563,-209.051 L21.5563,-198.496 Q21.5563,-195.923,18.9836,-195.923 L19.419,-195.923 Q16.8462,-195.923,16.8462,-198.496 L16.8462,-209.051 Q16.8462,-211.623,19.419,-211.623 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round"
android:pathData="M-83.4017,169.639 L-83.8371,169.639 Q-81.2644,169.639,-81.2644,172.212 L-81.2644,182.766 Q-81.2644,185.339,-83.8371,185.339 L-83.4017,185.339 Q-85.9744,185.339,-85.9744,182.766 L-85.9744,172.212 Q-85.9744,169.639,-83.4017,169.639 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round"
android:pathData="M-133.339,-163.758 L-133.774,-163.758 Q-131.202,-163.758,-131.202,-161.186 L-131.202,-150.631 Q-131.202,-148.058,-133.774,-148.058 L-133.339,-148.058 Q-135.912,-148.058,-135.912,-150.631 L-135.912,-161.186 Q-135.912,-163.758,-133.339,-163.758 Z" />
<path
android:fillType="evenOdd"
android:strokeColor="#000000"
android:strokeWidth="0.12077035"
android:pathData="M-71.2256,158.659 C-68.039,153.392,-64.1607,154.191,-64.0522,154.218" />
<path
android:fillType="evenOdd"
android:strokeColor="#000000"
android:strokeWidth="0.12077035"
android:pathData="M-68.8345,158.232 C-67.756,156.715,-66.4003,155.521,-63.9668,155.585" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.42433643"
android:strokeLineJoin="round"
android:pathData="M-179.123,159.942 C-181.165,159.946,-183.173,160.725,-184.698,162.189 L-184.578,162.189 C-184.411,162.189,-184.276,162.324,-184.276,162.491 L-184.276,186.524 C-184.276,186.598,-184.304,186.665,-184.347,186.717 C-182.371,186.293,-180.55,185.131,-179.329,183.313 L-172.19,172.687 C-169.69,168.966,-170.673,163.958,-174.394,161.458 L-174.595,161.323 C-175.99,160.386,-177.567,159.938,-179.124,159.941 Z M-187.12,186.827 C-186.402,186.924,-185.678,186.922,-184.968,186.827 Z" />
<path
android:fillColor="#2cb71a"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round"
android:pathData="M-168.567,153.011 C-165.699,153.011,-163.374,155.336,-163.374,158.204 C-163.374,161.072,-165.699,163.397,-168.567,163.397 C-171.435,163.397,-173.76,161.072,-173.76,158.204 C-173.76,155.336,-171.435,153.011,-168.567,153.011 Z" />
<path
android:fillColor="#ff0000"
android:strokeColor="#ffcc00"
android:strokeWidth="0.26458332"
android:pathData="M-228.855,129 L-227.806,129 L-227.806,130.313 L-228.855,130.313 Z M-228.855,122.597 L-227.806,122.597 L-227.806,125.982 L-227.909,127.827 L-228.746,127.827 L-228.855,125.982 Z" />
<path
android:fillColor="#ff0000"
android:strokeColor="#ffcc00"
android:strokeWidth="0.26458332"
android:pathData="M-228.855,129 L-227.806,129 L-227.806,130.313 L-228.855,130.313 Z M-228.855,122.597 L-227.806,122.597 L-227.806,125.982 L-227.909,127.827 L-228.746,127.827 L-228.855,125.982 Z" />
<path
android:fillColor="#ff0000"
android:strokeColor="#ffcc00"
android:strokeWidth="0.26458332"
android:pathData="M-228.855,129 L-227.806,129 L-227.806,130.313 L-228.855,130.313 Z M-228.855,122.597 L-227.806,122.597 L-227.806,125.982 L-227.909,127.827 L-228.746,127.827 L-228.855,125.982 Z" />
</vector>
Are there any tips one would be willing to give to help with trouble shooting? Is there anything I could do in inkcape to ensure the file renders in Android Studio?

Looks like it is not well formed, there are lots of negative coords.
Check it out without negative coordinates and bigger dimens:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="240dp"
android:height="100dp"
android:viewportWidth="400"
android:viewportHeight="200">
<path
android:pathData="M185.37,134.151 L0.63217,134.151 L0.63217,213.584 L185.37,213.584 L185.37,134.151 Z"
android:strokeWidth="2.05815887"
android:strokeColor="#2cb71a"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M34.9949,145.281 C32.1268,145.281,29.8018,147.606,29.8018,150.475 C29.8018,153.343,32.1268,155.668,34.9949,155.668 C37.863,155.668,40.188,153.343,40.188,150.475 C40.188,147.606,37.863,145.281,34.9949,145.281 Z"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M35.1156,156.996 L34.8741,156.996 Q26.7825,156.996,26.7825,165.088 L26.7825,177.889 Q26.7825,185.981,34.8741,185.981 L 35.1156,185.981 Q 43.2073,185.981, 43.2073,177.889 L 43.2073,165.088 Q43.2073,156.996,35.1156,156.996 Z"
android:strokeWidth="2.42433667"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M104.59,121.139 L104.59,121.139 Q102.235,121.139,102.235,123.494 L102.235,133.155 Q102.235,135.51,104.59,135.51 L104.59,135.51 Q 106.945,135.51,106.945,133.155 L106.945,123.494 Q106.945,121.139,104.59,121.139 Z"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M128.593,104.735 L128.593,104.735 Q130.948,104.735,130.948,107.09 L130.948,116.752 Q130.948,119.107,128.593,119.107 L128.593,119.107 Q126.238,119.107,126.238,116.752 L126.238,107.09 Q126.238,104.735,128.593,104.735 Z"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M169.218,6.47664 L169.218,6.47664 Q166.863,6.47664,166.863,4.12162 L166.863,5.54001 Q166.863,7.89503,169.218,7.89503 L169.218,7.89503 Q171.573,7.89503,171.573,5.54001 L171.573,4.12162 Q171.573,6.47664,169.218,6.47664 Z"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round" />
<path
android:fillAlpha="0.48387098"
android:fillColor="#2cb71a"
android:pathData="M173.866, 7.92172 L 173.866, 7.92172 Q 171.511, 7.92172, 171.511, 5.5667 L 171.511,4.09493 Q 171.511,6.44995, 173.866,6.44995 L 173.866,6.44995 Q 176.221,6.44995, 176.221,4.09493 L 176.221, 5.5667 Q 176.221, 7.92172, 173.866, 7.92172 Z"
android:strokeWidth="2.41540718"
android:strokeAlpha="0.48387098"
android:strokeLineJoin="round" />
<path
android:fillAlpha="0.98999999"
android:fillColor="#2cb71a"
android:pathData="M107.292,124.489 L 107.292,124.489 Q 104.937,124.489, 104.937,126.844 L 104.937,136.505 Q 104.937,138.86, 107.292,138.86 L 107.292,138.86 Q 109.647,138.86, 109.647,136.505 L 109.647,126.844 Q 109.647,124.489, 107.292,124.489 Z"
android:strokeWidth="2.41540718"
android:strokeAlpha="0.98999999"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M70.6076,172.683 L 71.0429,172.683 Q 68.4702,172.683, 68.4702,175.256 L 68.4702,185.811 Q 68.4702,188.383, 71.0429,188.383 L 70.6076,188.383 Q 73.1803,188.383, 73.1803,185.811 L 73.1803,175.256 Q 73.1803,172.683, 70.6076,172.683 Z"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M19.419, 211.623 L18.9836, 211.623 Q21.5563, 211.623,21.5563, 209.051 L21.5563, 198.496 Q21.5563, 195.923,18.9836, 195.923 L19.419, 195.923 Q16.8462, 195.923,16.8462, 198.496 L16.8462, 209.051 Q16.8462, 211.623,19.419, 211.623 Z"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M83.4017,169.639 L 83.8371,169.639 Q 81.2644,169.639, 81.2644,172.212 L 81.2644,182.766 Q 81.2644,185.339, 83.8371,185.339 L 83.4017,185.339 Q 85.9744,185.339, 85.9744,182.766 L 85.9744,172.212 Q 85.9744,169.639, 83.4017,169.639 Z"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M133.339, 163.758 L 133.774, 163.758 Q 131.202, 163.758, 131.202, 161.186 L 131.202, 150.631 Q 131.202, 148.058, 133.774, 148.058 L 133.339, 148.058 Q 135.912, 148.058, 135.912, 150.631 L 135.912, 161.186 Q 135.912, 163.758, 133.339, 163.758 Z"
android:strokeWidth="2.52457666"
android:strokeLineJoin="round" />
<path
android:fillType="evenOdd"
android:pathData="M71.2256,158.659 C 68.039,153.392, 64.1607,154.191, 64.0522,154.218"
android:strokeWidth="0.12077035"
android:strokeColor="#000000" />
<path
android:fillType="evenOdd"
android:pathData="M68.8345,158.232 C 67.756,156.715, 66.4003,155.521, 63.9668,155.585"
android:strokeWidth="0.12077035"
android:strokeColor="#000000" />
<path
android:fillColor="#2cb71a"
android:pathData="M179.123,159.942 C 181.165,159.946, 183.173,160.725, 184.698,162.189 L 184.578,162.189 C 184.411,162.189, 184.276,162.324, 184.276,162.491 L 184.276,186.524 C 184.276,186.598, 184.304,186.665, 184.347,186.717 C 182.371,186.293, 180.55,185.131, 179.329,183.313 L 172.19,172.687 C 169.69,168.966, 170.673,163.958, 174.394,161.458 L 174.595,161.323 C 175.99,160.386, 177.567,159.938, 179.124,159.941 Z M 187.12,186.827 C 186.402,186.924, 185.678,186.922, 184.968,186.827 Z"
android:strokeWidth="2.42433643"
android:strokeLineJoin="round" />
<path
android:fillColor="#2cb71a"
android:pathData="M168.567,153.011 C 165.699,153.011, 163.374,155.336, 163.374,158.204 C 163.374,161.072, 165.699,163.397, 168.567,163.397 C 171.435,163.397, 173.76,161.072, 173.76,158.204 C 173.76,155.336, 171.435,153.011, 168.567,153.011 Z"
android:strokeWidth="2.41540718"
android:strokeLineJoin="round" />
<path
android:fillColor="#ff0000"
android:pathData="M228.855,129 L 227.806,129 L 227.806,130.313 L 228.855,130.313 Z M 228.855,122.597 L 227.806,122.597 L 227.806,125.982 L 227.909,127.827 L 228.746,127.827 L 228.855,125.982 Z"
android:strokeWidth="0.26458332"
android:strokeColor="#ffcc00" />
<path
android:fillColor="#ff0000"
android:pathData="M228.855,129 L227.806,129 L 227.806,130.313 L 228.855,130.313 Z M 228.855,122.597 L 227.806,122.597 L 227.806,125.982 L 227.909,127.827 L 228.746,127.827 L 228.855,125.982 Z"
android:strokeWidth="0.26458332"
android:strokeColor="#ffcc00" />
<path
android:fillColor="#ff0000"
android:pathData="M228.855,129 L227.806,129 L227.806,130.313 L228.855,130.313 Z M228.855,122.597 L227.806,122.597 L227.806,125.982 L227.909,127.827 L228.746,127.827 L228.855,125.982 Z"
android:strokeWidth="0.26458332"
android:strokeColor="#ffcc00" />
</vector>
This is what I can see now:
img

SVG to Bitmap to ImageView

In my android app I try to get a Bitmap-Object from a SVG-File and store it in the cache. Then it should be displayed from this bitmap in an ImageView Object. I don't get it working, either the ImageView gets a wrong density, the Picture is too small or too large. May anybody tell me whats wrong with that code? For my purposes I use the AndroidSVG library (link). The Image should has 30dp width and height.
ImageView img = (ImageView)getView().findViewById(R.id.testingImage);
try {
int size = convertDPtoPixels(30);
SVG svg = SVG.getFromResource(mGlob.mContext,R.raw.vectorimage);
svg.setDocumentHeight(size);
svg.setDocumentWidth(size);
PictureDrawable pictureDrawable = new PictureDrawable(svg.renderToPicture());
Bitmap mutableBitmap = Bitmap.createBitmap(30, 30, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(mutableBitmap);
pictureDrawable.setBounds(0,0,size,size);
pictureDrawable.draw(canvas);
img.setImageBitmap(mutableBitmap);
} catch (SVGParseException e) {
e.printStackTrace();
}
Edit 30.3.2015
If I try to create the Bitmap with the Pixel-size like this, I get a too small Image (but it is sharp):
Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
Addition Information:
The Blue Color is the background color, from my ImageView. I use it to see where it starts and end, because my SVG has transparent surfaces. The SVG should fill the blue area...
Here is my SVG-File:
<?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="30"
height="30"
id="svg15733"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="vectorimage.svg">
<defs
id="defs15735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="9.1"
inkscape:cx="21.063016"
inkscape:cy="17.702822"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false" />
<metadata
id="metadata15738">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3622)">
<path
style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
id="Auswahl"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<flowRoot
xml:space="preserve"
id="flowRoot16280"
style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
id="flowRegion16282"><rect
id="rect16284"
width="123.23861"
height="98.994949"
x="171.72594"
y="179.65981" /></flowRegion><flowPara
id="flowPara16286" /></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="6.8066916"
y="1049.5211"
id="text16288"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan16290"
x="6.8066916"
y="1049.5211"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
id="path16293"
inkscape:connector-curvature="0" />
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
id="path16295"
inkscape:connector-curvature="0" />
</g>
</svg>

You appear to be rendering the SVG to a 30x30 bitmap then scaling it up to (size x size).
Try changing the bitmap creation to:
Bitmap mutableBitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
Update:
The problem is that Inkscape doesn't automatically give it's SVG files a viewBox.
Read this AndroidSVG FAQ question on how to deal with Inkscape files. https://code.google.com/p/androidsvg/wiki/FAQ#Dealing_with_Inkscape_files
You can either follow the advice there (which updates the SVG programmatically at runtime). Or alternatively, alter the SVG by hand. Make the following changes:
width="100%"
height="100%"
viewBox="0 0 30 30"
<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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
id="svg15733"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="vectorimage.svg"
viewBox="0 0 30 30">
<defs
id="defs15735" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="9.1"
inkscape:cx="21.063016"
inkscape:cy="17.702822"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
borderlayer="true"
inkscape:showpageshadow="false" />
<metadata
id="metadata15738">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-1022.3622)">
<path
style="fill:#ffe71d;fill-opacity:1;stroke:#000000;stroke-width:0.3515625;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 20.507812,1023.827 8.027344,8.0274 0,11.4258 -8.027344,7.6172 -11.4257807,0 -7.6171876,-7.6172 0,-11.4258 7.6171876,-8.0274 z"
id="Auswahl"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccccccc" />
<flowRoot
xml:space="preserve"
id="flowRoot16280"
style="font-style:normal;font-weight:normal;font-size:72px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
id="flowRegion16282"><rect
id="rect16284"
width="123.23861"
height="98.994949"
x="171.72594"
y="179.65981" /></flowRegion><flowPara
id="flowPara16286" /></flowRoot> <text
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:4.21875px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
x="6.8066916"
y="1049.5211"
id="text16288"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan16290"
x="6.8066916"
y="1049.5211"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:31.46484184px;font-family:Tahoma;-inkscape-font-specification:'Tahoma Bold'">?</tspan></text>
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.09958508;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 9.0820313,483.46484 -4.048462,4.26636 21.1303707,17.43713 2.371216,-2.25036 0,-11.42578 -8.027344,-8.02735 -11.4257807,0 z"
id="path16293"
inkscape:connector-curvature="0" />
<path
transform="translate(0,540.3622)"
style="display:inline;fill:#000000;fill-opacity:0.06639003;stroke:none;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
d="m 9.0820313,483.46484 -7.6171876,8.02735 0,7.68493 25.0598143,-9.69543 -6.016846,-6.01685 -11.4257807,0 z"
id="path16295"
inkscape:connector-curvature="0" />
</g>
</svg>

Categories

Resources