Develop Reference

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)

How to match Android Gradient Rendering with SVG BoundingBox Units

I am trying to replicate an SVG in Android vector drawable using the LinearGradient class. For bounding box gradient units, I am calculating the endpoints of the gradient line segment by using the following formula:
x1 = graphic_bound.left + graphic_bound.width() * svg_boundingbox_width_percentage
and
y1 = graphic_bound.top + graphic_bound.height() * svg_boundingbox_height_percentage
I am observing that the above works well for cases where graphic_bound.width() == graphic_bound.height()
But the rendering is different from SVG when the graphic bounds are non-square (width is not equal to height).
Any suggestions on what is the error here?
For example, the below SVGs look the same, one uses objectBoundingBox and another uses userSpaceOnUse units. My question is how to convert the objectBoundingBox values to userSpaceOnUse values to have the same visual appearance?
<svg width="332px" height="112px" viewBox="0 0 500 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>linear_gradient_direction</title>
<desc>Created with Sketch.</desc>
<defs>
<linearGradient gradientUnits="objectBoundingBox" x1="30.2395833%" y1="44.8925781%" x2="69.9661458%" y2="54.944987%" id="linearGradient-2">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#000000" offset="51%"></stop>
<stop stop-color="#D8D8D8" offset="100%"></stop>
</linearGradient>
<linearGradient gradientUnits="userSpaceOnUse" x1="60" y1="30" x2="140" y2="70" id="linearGradient-3">
<stop stop-color="#FFFFFF" offset="0%"></stop>
<stop stop-color="#000000" offset="51%"></stop>
<stop stop-color="#D8D8D8" offset="100%"></stop>
</linearGradient>
</defs>
<g id="linear_gradient_direction" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Rectangle-Box" transform="translate(5.000000, 6.000000)" stroke="#979797">
<rect id="Rectangle" fill="url(#linearGradient-2)" x="0" y="0" width="200" height="100"></rect>
<line x1="60" y1="30" x2="140" y2="70" id="Line" stroke-linecap="square"></line>
<circle id="TopLeft" fill="#FFFFFF" cx="60" cy="30" r="5"></circle>
<circle id="Center" fill="#FFFFFF" cx="100" cy="50" r="5"></circle>
<circle id="BottomRight" fill="#FFFFFF" cx="140" cy="70" r="5"></circle>
</g>
<g id="Rectangle-Box" transform="translate(220.000000, 6.00000)" stroke="#979797">
<rect id="Rectangle" fill="url(#linearGradient-3)" x="0" y="0" width="200" height="100"></rect>
<line x1="60" y1="30" x2="140" y2="70" id="Line" stroke-linecap="square"></line>
<circle id="TopLeft" fill="#FFFFFF" cx="60" cy="30" r="5"></circle>
<circle id="Center" fill="#FFFFFF" cx="100" cy="50" r="5"></circle>
<circle id="BottomRight" fill="#FFFFFF" cx="140" cy="70" r="5"></circle>
</g>
</g>
</svg>

How to create shape like below image using xml or canvas in android?

I tried making background using coral draw or photoshop but its not working properly.
How should I draw the shape like this? Don't expect complete code, just give me idea or point me in the right direction.
making rectangle is easy with shape but how to add that bottom right side small rectangle and make them in one shape and also it i want to make it nine patch image because different screen size issue.

Try this .. I used https://www.autotracer.org/ to convert png to svg, then https://svg2vector.com/ to convert the svg to vector.
I would suggest make the burger image as an image background for a CardView with rounded corners and use ConstraintLayout to line up the Tab Badge drawable and the TextView
Bottom Tab Badge Drawable
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="129"
android:viewportHeight="45"
android:width="129dp"
android:height="45dp">
<path
android:pathData="M0 0L0 44L7 44L9 44L10 44L12 44L13 43.9722L14 43.8889L15.9722 43.2778L17.75 41.8889L19.0833 40L19.9722 38L20.5833 36L21 34L21.3889 32L21.8611 30L22.1389 29L22.3611 28L22.6389 27L22.8611 26L23.4722 24L24.5 22L25.25 21.0278L26.0833 20.1111L27.0278 19.3056L29 18.1111L30 17.7222L31 17.4167L33 17.0833L34 17.0278L35 17L37 17L38 17L41 17L50 17L82 17L93 17L96 17L98 17L100 17.0833L101 17.25L102 17.5L103 17.9444L104.917 19.25L106.5 21.0278L107.528 23L108.139 25L108.361 26L108.611 27L108.944 29L109.056 30L109.389 32L109.611 33L110 35L110.417 37L110.694 38L111.417 40L112.5 41.8889L114.083 43.2778L116 43.8889L118 44L119 44L120 44L122 44L129 44L129 0L0 0z"
android:fillColor="#00FFFFFF" />
<path
android:pathData="M30 17L30.7778 17.7222L31.3056 17.75L32.1111 17.9444L33.0278 17.9722L35 18L36 18L38 18L51 18L101 18L100.222 17.2778L99.6944 17.25L98.8889 17.0556L97.9722 17.0278L96 17L95 17L93 17L80 17L30 17z"
android:fillColor="#00FFFFFF" />
<path
android:pathData="M101.667 17.3333L102 17.6667L102.333 17.6667L102.333 17.3333L101.667 17.3333z"
android:fillColor="#00FFFFFF" />
<path
android:pathData="M26 19L26.7778 19.6389L27.25 19.5278L28.0556 19.5278L30 19L29.2222 18.3056L28.75 18.3056L27.4722 18.3056L26 19z"
android:fillColor="#00FFFFFF" />
<path
android:pathData="M17 45L113 45L112.306 43.5L111.944 42.9444L110.917 41L110.472 40L110.167 39L109.639 37L109.389 36L109.194 35L108.806 33L108.611 32L108.389 31L108.056 29L107.944 28L107.583 26L107.306 25L106.583 23L106.083 22L104.75 20.1111L103.917 19.3333L102 18.3333L101 18.1111L100 18.0278L99 18L97 18L96 18L93 18L86 18L44 18L39 18L37 18L36 18L34 18L33 18.0278L32 18.0833L30 18.4722L28.0833 19.2778L27.25 19.8611L26.4722 20.4722L25.2778 22.0833L24.3889 24L24.0278 25L23.3889 27L23.1389 28L22.8611 29L22.3889 31L22.1944 32L22 33L21.5833 35L21 37L20.6667 38L19.8889 40L18.8056 41.9444L18.1944 42.9444L17.75 43.5L17 45z"
android:fillColor="#FFFFFF" />
<path
android:pathData="M103 18L103.75 19.5L104.222 20.0556L105.528 22L106.056 22.9444L106.722 24.5L107 26L107.722 25.2222L107.722 24.6944L107.861 23.8889L107.5 22L106.5 20.1111L105.806 19.3333L104.472 18.3611L103 18M25 20L24.0278 21.5L23.4444 23.0556L23.0833 24.9444L23 27L23.8056 26.2222L24 25.6944L24.4167 24.8889L25.1389 23.0278L25.4722 22.1111L25.5 21.3056L25.6389 20.7778L25 20M108 26L108 32L108.722 31.2222L108.75 30.6944L108.944 29.8889L108.944 28.1111L108.75 27.3056L108.722 26.7778L108 26M22 27L22 31L22.7222 30.2222L22.8889 29L22.7222 28.2778L22.7222 27.7778L22 27M21 31L21 36L21.7222 35.2222L21.75 34.6944L21.9167 33.0833L21.75 32.3056L21.7222 31.7778L21 31M109 32L109 37L109.722 36.2222L109.75 35.6944L109.917 34.0833L109.75 33.3056L109.722 32.7778L109 32M20 36L20 39L20.6944 38.25L20.6944 37.1944L20.6944 36.75L20 36M110 37L110.028 38.5L110.25 40.0556L110.5 41L110.944 41.9722L111.5 42.8889L113.083 44.2778L115 44.8889L117 45L118 45L119 45L122 45L129 45L128.222 44.2778L127.694 44.25L126.889 44.0556L125 44L124 44L121 44L120 44L118 43.9722L117 43.8889L116 43.6667L115.028 43.2778L114.083 42.6667L112.5 40.9722L111.444 39.1111L111 38.3056L110.806 37.7778L110 37M19 39L18.2222 40.5L17.6944 41.0278L16.8889 41.9444L15 43.2778L13 43.8889L12 43.9722L11 44L9 44L8 44L6 44L0 44L0.777778 44.7222L1.30556 44.75L2.11111 44.9444L3.02778 44.9722L5 45L7 45L10 45L11 45L13 45L14 44.9722L16 44.6667L17.8889 43.6667L18.6667 42.8889L19.25 42L19.6111 41.1111L19.6944 39.7778L19 39z"
android:fillColor="#00FFFFFF" />

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>