Develop Reference

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

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:

Android animatio - Vector image loses quality in zoom

I've added an image as logo in my first page of application. First place logo is full screen with 3x of its size after 3 seconds it will changes size to 1x.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="3"
android:toXScale="1"
android:fromYScale="3"
android:toYScale="1"
android:duration="3000"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="3000">
</scale>
logo image is a Vector file (SVG) so it is expected not to lose quality on sizing process, but logo in 3x size (first time), has low quality like a Raster image. How could I keep the quality high on scale animation?
UPDATE:
This is the way I'm using my vector:
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/logo"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:background="#drawable/ic_logo"/>
And This is SVG path imported from Android Studio Vector Asset:
<vector android:height="24dp" android:viewportHeight="10418.0"
android:viewportWidth="11006.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#536F96" android:pathData="M980,2554c83,185 592,871 588,968 -1,30 -210,427 -251,522 -78,186 -159,412 -198,612l-1114,237 -5,1310 1115,233c70,179 122,410 197,597 351,872 417,195 -330,1484l914,927c1254,-773 739,-660 1486,-338 199,86 412,123 604,208l242,1104 1294,-3 248,-1107c367,-124 854,-256 1114,-471 145,52 350,212 486,297 132,82 393,276 537,307l868,-884c-73,-234 -456,-728 -599,-982 84,-247 280,-471 360,-815l-765,2c-1057,2387 -4178,2532 -5524,497 -1386,-2097 179,-5082 2981,-4837 -83,134 -143,82 -143,289l5,1031 393,-1c20,-379 -59,-855 158,-1117l595,-600c36,-50 8,-2 40,-66 -576,-371 -1922,-337 -2701,-51 -284,104 -507,255 -734,337 -165,-95 -298,-189 -462,-295 -146,-95 -345,-235 -480,-302 -113,59 -821,774 -919,907z"/>
<path android:fillColor="#536F96" android:pathData="M7617,5574l-346,1c-150,921 -284,1445 -1178,2020 -681,438 -1864,444 -2503,-51 79,-121 147,-121 221,-274 -498,9 -600,63 -697,-146l1831,2c265,2 289,-77 414,-203 210,-212 400,-400 612,-612 423,-423 494,-389 467,-764l-386,-5c-1,91 -1,107 -172,270l-707,706c-274,276 -217,199 -732,199 -312,0 -624,-1 -936,1 54,-128 879,-909 1045,-1074l800,-800c92,-93 133,-121 139,-407 -454,-13 -274,24 -682,397 -134,133 -244,243 -377,376 -126,127 -629,664 -760,725 5,-491 -69,-662 113,-837l722,-724c152,-143 836,-72 1380,-91l12,-387c-122,-19 -1338,-27 -1447,-8 -93,17 -1031,951 -1137,1084 -161,202 54,1163 -78,1425 -20,39 -144,152 -186,194 -36,37 -56,62 -92,96 -77,70 -27,40 -116,78 -464,-554 -453,-1761 8,-2477 202,-315 485,-607 805,-794 431,-253 695,-282 1253,-341l-3,-349c-531,-76 -1232,227 -1573,460 -1273,869 -1605,2628 -664,3920 989,1359 3190,1608 4450,-40 236,-308 570,-1062 500,-1570z"/>
<path android:fillColor="#2590C8" android:pathData="M9715,2826c696,-211 1035,867 328,1092 -722,231 -1094,-860 -328,-1092zM8973,3966l-937,959c-147,129 -620,61 -864,61 -325,0 -649,0 -973,0 -158,0 -315,-2 -473,-2 -227,0 -225,37 -335,151 -218,227 -1332,1304 -1418,1435 266,9 529,45 651,-68 131,-121 245,-250 374,-379 120,-120 643,-681 761,-729 112,-21 1977,35 2290,2 132,-14 228,-159 311,-242 184,-184 789,-763 870,-887 293,43 370,224 810,150 1207,-203 1141,-1973 -74,-2096 -302,-31 -572,76 -762,225 -149,115 -314,330 -374,604 -84,383 32,527 143,816z"/>
<path android:fillColor="#2590C8" android:pathData="M10101,386c349,-173 684,228 512,557 -322,613 -1225,-202 -512,-557zM9589,1144c-151,105 -2165,2152 -2517,2503 -199,199 -122,222 -479,243l-7,401c529,12 375,62 971,-535 269,-270 516,-516 785,-785 263,-264 505,-505 769,-769l791,-782c893,355 1445,-649 868,-1209 -256,-248 -700,-298 -990,-39 -358,321 -288,500 -191,972z"/>
<path android:fillColor="#536F96" android:pathData="M8054,1110c-109,-414 494,-519 565,-152 77,397 -480,474 -565,152zM7825,1236c-438,459 -893,894 -1346,1347 -118,118 -210,213 -331,328 -168,161 -112,218 -112,584 0,423 -25,933 7,1345l397,0c16,-399 2,-821 2,-1219 -1,-289 -53,-367 111,-524l1560,-1556c947,95 833,-666 614,-887 -349,-352 -1030,-171 -902,582z"/>

You could try using native SVG animation:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 300 300">
<title>Downscale to Center</title>
<rect width="100" height="100" fill="lightgray" transform="scale(3)">
<title>Reference Rectangle</title>
</rect>
<rect width="100" height="100" transform="scale(3)">
<animateTransform attributeName="transform" type="translate" to="100 100" begin="3s" dur="3s" fill="freeze"/>
<animateTransform attributeName="transform" type="scale" additive="sum" from="3" to="1" begin="3s" dur="3s" fill="freeze"/>
</rect>
</svg>

SVG looks strange on mobile browsers

Here's a PNG version of my logo image:
Here's a screenshot of an SVG version of my logo as seen on a PC:
Here's a screenshot of how that same SVG logo looks on an iPhone and an android phone:
What's going on? Why does the mobile version look so blurred and the gradient not work on the pink petal?
Here's the actual SVG code. (For some reason, the font doesn't load in the snippet code but it loads just fine from my website: http://www.cafenocturne.com/testpage/images/svg/CafeLogoFontSVG.svg
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="http://www.cafenocturne.com/fonts/FontPorcelain.css" ?>
<svg width="300px" height="300px" viewBox="-50 0 447 466" preserveAspectRatio="xMinYMin meet" style="overflow: visible" version="1.1" xmlns="http://www.w3.org/2000/svg">
<g id="logo">
<g id="petal">
<defs>
<radialGradient id="gradpetal" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem">
<stop stop-color="#ffdcfd" offset=".01" />
<stop stop-color="#ff94dd" offset="0.15" />
<stop stop-color="#ff92dd" offset="0.17" />
<stop stop-color="#feadef" offset=".32" />
<stop stop-color="#fec3ff" offset=".49" />
<stop stop-color="#fec3ff" offset=".55" />
<stop stop-color="#ff94dd" offset=".85" />
<stop stop-color="#ff94dd" offset="1" />
</radialGradient>
</defs>
<path id="svgpetal" fill="url(#gradpetal)" stroke="url(#gradpetal)" stroke-width="2px" filter="url(#dropshadow)" d=" M 238.54 53.89 C 246.99 52.67 255.63 52.63 264.04 54.18 C 266.61 54.66 269.01 56.33 269.99 58.80 C 273.60 68.31 270.50 78.82 273.54 88.44 C 274.39 91.28 276.62 93.61 279.36 94.71 C 288.28 98.60 298.56 96.58 307.45 100.58 C 310.41 101.97 312.32 105.01 312.36 108.28 C 314.10 131.28 305.41 153.92 292.57 172.66 C 283.39 185.84 272.24 197.87 258.68 206.66 C 236.86 220.77 210.61 226.11 184.96 227.17 C 174.33 227.35 163.68 228.06 153.07 227.17 C 146.99 226.56 140.17 224.70 136.60 219.33 C 131.70 210.74 131.82 200.46 132.27 190.89 C 133.16 171.85 134.93 152.54 141.46 134.50 C 147.98 115.64 159.29 98.46 174.28 85.27 C 192.18 69.14 214.50 57.22 238.54 53.89 Z"
/>
<defs>
<radialGradient id="gradspine" gradientUnits="userSpaceOnUse" cx="8rem" cy="14.5rem">
<stop stop-color="#fe9bee" offset=".15" />
<stop stop-color="#fec3ff" offset=".20" />
<stop stop-color="#fec3ff" offset=".32" />
<stop stop-color="#feadef" offset=".39" />
<stop stop-color="#ff92dd" offset="0.45" />
<stop stop-color="#ff94dd" offset="0.5" />
<stop stop-color="#ffdcfd" offset="1" />
</radialGradient>
</defs>
<path id="svgspine" fill="url(#gradspine)" d=" M 273.33 92.20 C 273.84 92.35 274.88 92.65 275.39 92.80 C 271.04 106.15 262.39 117.73 252.21 127.23 C 245.23 134.25 238.16 141.26 230.01 146.95 C 220.43 154.24 209.84 159.99 199.02 165.20 C 191.88 168.52 186.16 174.09 180.76 179.69 C 173.54 187.94 168.46 197.87 160.80 205.75 C 154.38 212.01 146.82 216.96 139.02 221.31 C 137.69 220.37 137.65 219.57 138.90 218.94 C 143.54 216.35 148.01 213.49 152.21 210.23 C 163.70 202.21 170.01 189.31 178.67 178.68 C 184.55 172.81 190.49 166.69 198.11 163.10 C 213.73 155.96 228.45 146.73 241.11 135.10 C 245.70 130.69 250.19 126.18 254.78 121.78 C 262.78 113.26 269.72 103.41 273.33 92.20 Z"
/>
</g>
<path id="svgmoon" fill="#FFFFFF" stroke="#000000" filter="url(#dropshadow)" d=" M 125.71 4.83 C 132.21 2.77 139.01 1.97 145.66 0.59 C 133.00 9.73 120.78 19.62 110.14 31.11 C 95.76 46.55 84.01 64.51 76.14 84.11 C 58.65 127.32 60.32 176.94 76.88 220.16 C 82.95 234.74 89.81 249.48 101.01 260.89 C 110.02 269.31 119.13 277.77 129.66 284.30 C 148.41 296.68 169.88 304.84 192.02 308.51 C 216.22 312.44 241.09 311.13 265.04 306.14 C 286.12 301.57 306.41 293.94 325.81 284.60 C 332.75 280.95 339.69 277.31 346.63 273.65 C 338.54 285.17 330.90 297.05 321.77 307.80 C 309.52 322.73 294.55 335.51 277.40 344.48 C 247.85 359.93 213.98 364.68 181.02 365.43 C 146.84 365.46 112.77 355.39 83.93 337.08 C 54.54 318.15 30.44 290.79 16.33 258.74 C 7.91 239.92 2.64 219.67 0.89 199.12 C 0.42 190.44 0.54 181.74 0.82 173.06 C 3.04 133.90 17.63 95.66 41.68 64.69 C 63.28 37.42 92.09 14.92 125.71 4.83 Z"
/>
<g id="text">
<text style="font-family: PorcelainRegular;
font-size: 65px;
stroke: #000000;
fill: #ffffff;
overflow: visible;
filter: url(#dropshadow);">
<tspan x="0" y="0">`</tspan>
<tspan x="70" y="120">Cafe</tspan>
<tspan x="-30" y="290">Nocturne</tspan>
</text>
</g>
<defs>
<filter id="dropshadow" width="250px" height="250px">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
</g>
</svg>

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>

Phonegap Android Inline SVG

I am using Phonegap to develop an Android application that is only going to be used on the Nexus 7.
In the index.html I have an inline svg that draws some nice circles and does a pulse effect.
It works wonderfully in Chrome on the computer AND in Chrome on the Nexus 7.
However, when I compile the .apk or have Eclipse push a debug version of the application to the device, the svg does not show up.
The background image of the application and all other menu elements show as well, just the items in the svg area in the middle do not appear.
Here is the svg code segment:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="100%" height="100%" viewBox="0 0 800 1205">
<radialGradient id = "blipPulse" cx = "50%" cy = "50%" r = "50%">
<stop stop-color = "#3ddeed" offset = "0%" stop-opacity = "0.2">
<animate attributeName="stop-opacity" begin="0s" dur="3s" values="1;0;1" repeatCount="indefinite" />
</stop>
<stop stop-color = "#3ddeed" offset = "0%" stop-opacity = "1">
<animate attributeName="offset" begin="0s" dur="3s" values="0;1;1;0" repeatCount="indefinite" />
<animate attributeName="stop-opacity" begin="0s" dur="3s" values="0;1;0;0" repeatCount="indefinite" />
</stop>
<stop stop-color = "#3ddeed" offset = "2" stop-opacity = "0">
</radialGradient>
<defs>
<g id="blip">
<circle cx = "0" cy = "0" r = "20" fill = "url(#blipPulse)" stroke = "#3ddeed" stroke-width = "2" opacity="0.3"/>
<circle cx = "0" cy = "0" r = "7" fill = "#3ddeed" stroke = "none" stroke-width = "0"/>
</g>
<path id="hex" d="m 0 -60 L 52 -30 L 52 30 L 0 60 L -52 30 L -52 -30 L 0 -60" fill="rgba(255,255,255,0.15)" />
</defs>
<radialGradient id = "g1" cx = "50%" cy = "50%" r = "50%">
<stop stop-color = "#3ddeed" offset = "0%" stop-opacity = "0"/>
<stop stop-color = "#3ddeed" offset = "60%" stop-opacity = "0"/>
<stop stop-color = "#3ddeed" offset = "86%" stop-opacity = "0.1"/>
<stop stop-color = "#3ddeed" offset = "100%" stop-opacity = "0.25"/>
</radialGradient>
<filter id = "fearth" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/earth.png"/>
</filter>
<filter id = "fasteroid1" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/Asteroids/ice1.png"/>
</filter>
<filter id = "fasteroid2" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/Asteroids/ice2.png"/>
</filter>
<filter id = "fasteroid3" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/Asteroids/iron1.png"/>
</filter>
<filter id = "fasteroid4" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/Asteroids/iron2.png"/>
</filter>
<filter id = "ffleetcolor" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/Asteroids/fleeticoncolor.png"/>
</filter>
<filter id = "ffleetgray" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/Asteroids/fleeticongray.png"/>
</filter>
<filter id = "fdeployarrow" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "assets/Asteroids/deployarrow.png"/>
</filter>
<g id="mapcenter" transform="translate(400,600)">
<g id="map" transform="scale(1) translate(0,0)">
<circle cx="-800" cy="0" r="800" id="orbit" />
<circle id="rangering" cx="0" cy="0" r="400" fill="url(#g1)" transform="scale(0)" />
<g id="blips">
<use id="loc0" x = "100" y = "150" xlink:href = "#blip" opacity="0" />
<use id="loc1" x = "-180" y = "110" xlink:href = "#blip" opacity="0" />
<use id="loc2" x = "230" y = "-70" xlink:href = "#blip" opacity="0" />
</g>
<circle cx="0" cy="0" r="17" fill="blue" filter="url(#fearth)" id="earth" />
<g id="asteroidfield" transform="translate(100,150) scale(0.05)">
<circle cx="48" cy="-146" r="25" fill="grey" filter="url(#fasteroid1)" id="asteroid1" />
<circle cx="-120" cy="-230" r="25" fill="grey" filter="url(#fasteroid2)" id="asteroid2" />
<circle cx="190" cy="90" r="25" fill="grey" filter="url(#fasteroid3)" id="asteroid3" />
<circle cx="-277" cy="270" r="25" fill="grey" filter="url(#fasteroid4)" id="asteroid4" />
</g>
<g id="asteroidinfo">
<rect x="-30" y="-105" width="60" height="45" fill="red" filter="url(#fdeployarrow)" id="deployarrow" />
<circle cx="0" cy="-125" r="45" fill="blue" filter="url(#ffleetcolor)" id="fleetcolor" />
<circle cx="0" cy="0" r="45" fill="blue" filter="url(#ffleetgray)" id="fleetgray" />
<g id="h2ohex" transform="translate(108,-125)">
<use id="h2ohex" xlink:href = "#hex" opacity="1" />
<text x = "0" y = "0" class="hexValue">60</text>
<text x = "0" y = "30" class="hexLabel">H<tspan baseline-shift = "sub" font-size="0.7em">2</tspan>O</text>
</g>
<g id="fehex" transform="translate(180,0)">
<use xlink:href = "#hex" opacity="1" />
<text x = "0" y = "0" class="hexValue">50</text>
<text x = "0" y = "30" class="hexLabel">Fe</text>
</g>
<g id="pthex" transform="translate(108,125)">
<use xlink:href = "#hex" opacity="1" />
<text x = "0" y = "0" class="hexValue">10</text>
<text x = "0" y = "30" class="hexLabel">Pt</text>
</g>
</g>
</g>
</svg>

The embedded webview of the Nexus 7 is still the Android 4x browsing engine - which doesn't support filters.