android svg vector android-vectordrawable

Vector Drawable Render Issue on Lollipop Devices (API22)

Good day,

I am having an issues with with SVG files being converted into Vectors to use on Android device.

I am using this platform to convert SVG->VectorDrawable

This is far the most and the best tool which converts just amazingly, other's convertions are horrible.

I want to achieve above Image

The actual result on Lollipop device as you can see the letter N is curved that is an issue!

Here you can notice again some issues with the rendering of the button's texts (Texts are attached to the SVG image)

Things tried :

Add fillRule to evenodd
Add any other fillRule
Try with different converters and with built-in Android Stuio's asset importer
Test on other devices

Issue:

This rendering issue is only happening on Lollipop and I've tried on couple others and I can confirm the list of the OS under which this icon renders just fine.

List of tested OS :

KitKat renders fine
Lollipop not rendering correctly
Marshmallow renders fine
Nougat Renders fine
Oreo renders fine

Seems like a joke, but I would love if you could give me any kind of a hint at least as this is critical currently.

Last but not least - the actual Vector code

    <?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="317.93dp"
    android:height="204.84dp"
    android:viewportWidth="317.93"
    android:viewportHeight="204.84">

    <path
        android:fillColor="#e0e0e0"
        android:pathData="M182.17,5.07 A95.32,95.32,0,0,1,168.47,4 Q169.39,11.15,170.3,32.16
A217.39,217.39,0,0,1,172.13,55 L172.13,56.44 Q172.13,79.57,157.29,80.03
A4,4,0,0,1,156.53,80.11 Q142,80.1,142,61.38 L142,5.52 Q129.22,4.61,120.09,4.61
L104.55,4.61 Q111.86,43.12,111.86,69.61 A38.76,38.76,0,0,0,121.41,95.61
L121.41,95.61 L117.82,124.5 L134.62,106.23 L134.62,106.23
A50,50,0,0,0,159.34,112.57 Q186.73,111.67,196.78,86.09
Q200.44,76.09,200.43,57.78 Q201.34,16.7,203.43,4.36 Q194,5.06,182.17,5.07 Z" />
    <path
        android:fillColor="#e0e0e0"
        android:pathData="M40.18,167.49 Q44.89,168.94,54.37,174.99 Q40.57,190.3,20.81,184.2 L18.93,183.62
A25.88,25.88,0,0,1,8.32,176.23 Q-0.01,166.44,4.32,152.31
A35.14,35.14,0,0,1,6.52,146.82 Q14.58,129.18,29.61,127.14
A38.2,38.2,0,0,1,44.15,128.52 Q60.26,134.83,60.24,154.25
Q43.62,153.6,41.91,154.13 Q41.19,147.32,37.69,146.02 L37.08,145.83
A9.9,9.9,0,0,0,30.99,145.83 Q24.63,148.32,21.85,155.7 L21.41,157.12
Q19.23,164.19,22.73,167.82 A5.38,5.38,0,0,0,25.27,169.66
A11.78,11.78,0,0,0,27.03,170.37 C30.64,171.48,34.22,170.29,37.8,166.8 Z" />
    <path
        android:fillColor="#e0e0e0"
        android:pathData="M91.87,156.79 A48.13,48.13,0,0,1,97.87,157.55 A32.76,32.76,0,0,1,104.33,159.46
Q102.43,166.28,100.62,175.63 A95,95,0,0,0,99.22,185.34
Q98.35,194.66,99.85,200.18 C99.46,200.08,99.03,199.98,98.56,199.89
Q95.84,199.37,90.77,198.75 Q83.77,197.83,81.97,197.49
A14.77,14.77,0,0,0,84.42,191.42 A19.18,19.18,0,0,1,78.31,195.47
A14.64,14.64,0,0,1,63.59,191.87 A16.28,16.28,0,0,1,59.4,183.37
A30.15,30.15,0,0,1,59.57,171.54 Q61.46,161.85,66.92,157.54 T77.68,154.15
A13.64,13.64,0,0,1,79.11,154.34 A15.2,15.2,0,0,1,83.9,156.22 Q87,158,90,163.54
Q91.32,158.56,91.87,156.79 Z M83.14,177.1 Q83.84,173.47,82.77,171.42
A4.55,4.55,0,0,0,79.41,168.93 A4,4,0,0,0,75.88,170 Q74.26,171.44,73.55,175.07
Q72.74,179.21,73.75,181.2 A4.14,4.14,0,0,0,76.75,183.58
A4.48,4.48,0,0,0,80.68,182.5 Q82.38,181.07,83.14,177.1 Z" />
    <path
        android:fillColor="#e0e0e0"
        android:pathData="M124.81,162.38 L124.24,168.13 Q126.97,160.13,133.24,160.79
Q136.6,161.14,141.58,164.53 A39.69,39.69,0,0,0,135.21,175.03
A13.75,13.75,0,0,0,131.9,174.22 Q123.75,173.39,122.5,185.87 L122.17,189.22
Q121.89,201.7,121.84,202.22 A43.15,43.15,0,0,1,113.6,202.37
A17.14,17.14,0,0,1,107.46,200.78 A119.48,119.48,0,0,0,109.9,186.1
A124.41,124.41,0,0,0,109.61,159.92 A97,97,0,0,1,124.81,162.38 Z" />
    <path
        android:fillColor="#e0e0e0"
        android:pathData="M166.45,149 Q165.54,157.7,165.45,164.29 L165.45,164.89 L169.06,164.89
A29,29,0,0,1,173.41,164.46 Q171.41,173.91,171.35,175.72 L171.35,176
L165.09,175.93 L164.37,189.93 C164.66,193.14,165.73,194.76,167.61,194.78
A12.33,12.33,0,0,0,172.11,193.87 A24.67,24.67,0,0,1,173.47,201.6
A9.11,9.11,0,0,1,172.96,204.48 A71.94,71.94,0,0,1,165.24,204.88
Q154.65,204.74,151.83,197.98 Q150.9,195.55,151.03,183.98 L151.12,175.8
L145.34,175.73 A29.6,29.6,0,0,1,143.54,164.63 L151.73,164.72 L151.82,157.01
Q152.33,154.58,166.45,149 Z" />
    <path
        android:fillColor="#e0e0e0"
        android:pathData="M179.53,185.11 Q177.2,163.11,197.32,160.95 L198.32,160.85 Q218,159.25,220,177.94
L220.25,180.33 Q221,201.09,201.4,203.64 Q181.75,205.71,179.68,186.07 Z
M200.4,190.5 Q205.4,189.5,205.28,184.65 L204.98,181.78
Q204.22,174.6,199.19,175.12 Q193.81,176.12,194.72,184.8 L194.82,185.8
Q195.38,191,200.4,190.5 Z" />
    <path
        android:fillColor="#e0e0e0"
        android:pathData="M226.68,179.72 Q220.98,158.3,240.53,153.09 L241.46,152.84
Q260.66,148.22,265.46,166.37 L266.08,168.7 Q270.02,189.08,251.08,194.64
Q231.98,199.74,226.9,180.64 Z M248.14,181.81 Q252.94,180.03,252.05,175.28
L251.31,172.49 Q249.45,165.49,244.56,166.81 Q239.4,168.67,241.64,177.06
L241.89,177.99 Q243.26,183.11,248.14,181.81 Z" />
    <path
        android:fillColor="#e0e0e0"
        android:pathData="M275.81,141.6 L278.81,147.99 Q283.37,137.32,288.6,134.86
Q295.6,131.57,303.76,141.03 A62.43,62.43,0,0,1,314,155.92
Q317.45,163.26,317.95,168.08 L317.95,168.08
C317.86,167.88,315.52,168.86,310.95,171.02
C309.03,171.92,306.73,173.02,304.03,174.32 A59.1,59.1,0,0,0,299.03,157.15
L298.41,155.84 C296.25,152.01,294.27,149.62,292.47,148.7
A4.74,4.74,0,0,0,289.88,148.85 Q287.27,150.08,286.99,155.72 T293.19,175.08
L294.83,178.56 Q291.3,180.14,288.26,181.56 A46.25,46.25,0,0,0,281.53,185.36
A178.63,178.63,0,0,0,273.69,165.36 A148.58,148.58,0,0,0,263.62,147.36 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M179.31,1.06 A95.11,95.11,0,0,1,165.62,0 Q166.52,7.15,167.44,28.16
A217,217,0,0,1,169.27,51 L169.27,52.45 Q169.27,75.58,154.43,76.04
A3.92,3.92,0,0,1,153.67,76.12 Q139.14,76.12,139.13,57.4 L139.13,1.52
Q126.35,0.61,117.22,0.61 L101.69,0.61 Q109,39.12,109,65.6
A38.76,38.76,0,0,0,118.56,91.6 L118.56,91.6 L115,120.44 L131.79,102.17
L131.79,102.17 A50,50,0,0,0,156.51,108.51 Q183.92,107.59,193.95,82.03
Q197.61,72.03,197.61,53.72 Q198.51,12.64,200.61,0.3 Q191.19,1.07,179.31,1.06 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M37.32,163.49 Q42.03,164.94,51.52,170.99 Q37.71,186.3,18,180.2 L16.13,179.62
A25.85,25.85,0,0,1,5.51,172.23 Q-2.81,162.44,1.51,148.31
A36.15,36.15,0,0,1,3.71,142.82 Q11.77,125.18,26.8,123.14
A38.2,38.2,0,0,1,41.34,124.52 Q57.45,130.83,57.43,150.25
Q40.81,149.6,39.1,150.13 Q38.39,143.32,34.88,142.02 L34.27,141.83
A9.9,9.9,0,0,0,28.18,141.83 Q21.84,144.32,19.05,151.7 L18.61,153.12
Q16.42,160.12,19.92,163.82 A5.35,5.35,0,0,0,22.47,165.66
A12.35,12.35,0,0,0,24.22,166.37 Q29.63,168,35,162.77 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M89,152.79 A48.2,48.2,0,0,1,95,153.55 A31.91,31.91,0,0,1,101.46,155.46
Q99.57,162.28,97.75,171.63 A95,95,0,0,0,96.35,181.34 Q95.48,190.66,96.98,196.18
C96.6,196.08,96.16,195.98,95.69,195.89 Q92.97,195.37,87.9,194.75
Q80.9,193.83,79.1,193.49 A14.77,14.77,0,0,0,81.55,187.42
A19.16,19.16,0,0,1,75.45,191.47 A14.37,14.37,0,0,1,68.25,191.87
A14.14,14.14,0,0,1,60.73,187.87 A16.25,16.25,0,0,1,56.53,179.37
A30.15,30.15,0,0,1,56.7,167.54 Q58.59,157.83,64.05,153.54 T74.81,150.15
A13.83,13.83,0,0,1,76.25,150.34 A15.05,15.05,0,0,1,81.04,152.22
Q84.04,154.03,87.04,159.57 Q88.47,154.56,89,152.79 Z M80.27,173.09
A8.81,8.81,0,0,0,79.9,167.42 A4.59,4.59,0,0,0,76.54,164.93 A4,4,0,0,0,73,166
Q71.36,167.44,70.66,171.07 C70.13,173.83,70.19,175.87,70.86,177.2
A4.14,4.14,0,0,0,73.86,179.58 A4.48,4.48,0,0,0,77.79,178.5
C78.94,177.56,79.77,175.75,80.29,173.09 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M122,158.37 L121.43,164.13 Q124.16,156.13,130.43,156.79
Q133.79,157.14,138.77,160.53 A40,40,0,0,0,132.4,171.03
A13.75,13.75,0,0,0,129.09,170.22 Q120.94,169.39,119.7,181.87 L119.36,185.22
C119.17,193.54,119.07,197.86,119.03,198.22 A42.24,42.24,0,0,1,110.79,198.36
A17,17,0,0,1,104.65,196.78 A117.61,117.61,0,0,0,107,182.06
A124.41,124.41,0,0,0,106.71,155.88 A98.33,98.33,0,0,1,122,158.37 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M163.59,145 Q162.69,153.7,162.59,160.29 L162.59,160.89 L166.21,160.89
A28.84,28.84,0,0,1,170.55,160.46 A95.87,95.87,0,0,0,168.49,171.72 L168.49,172
L162.22,171.92 L161.5,185.92 Q161.94,190.73,164.74,190.77
A12.38,12.38,0,0,0,169.25,189.86 A24.63,24.63,0,0,1,170.6,197.59
A9.11,9.11,0,0,1,170.09,200.47 A71.89,71.89,0,0,1,162.38,200.87
Q151.78,200.73,148.96,193.97 Q148.03,191.54,148.16,179.97 L148.25,171.78
L142.47,171.72 A30,30,0,0,1,140.67,160.62 L148.86,160.71 L149,153
Q149.47,150.58,163.59,145 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M176.67,181.11 Q174.35,159.11,194.47,156.95 L195.47,156.84
Q215.15,155.25,217.13,173.94 L217.39,176.33 Q218.13,197.09,198.53,199.64
Q178.9,201.71,176.81,182.07 Z M197.55,186.5
C200.89,185.82,202.55,183.87,202.42,180.65 L202.12,177.78
Q201.36,170.6,196.33,171.12 Q190.94,172.12,191.86,180.8 L191.96,181.8
Q192.52,187,197.55,186.5 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M223.83,175.72 Q218.11,154.3,237.67,149.09 L238.6,148.84
Q257.82,144.22,262.6,162.37 L263.22,164.7 Q267.16,185.08,248.22,190.64
Q229.14,195.74,224.05,176.64 Z M245.28,177.81 Q250.1,176.03,249.19,171.28
L248.45,168.48 Q246.59,161.48,241.7,162.81 Q236.56,164.67,238.78,173.06
L239.03,173.99 Q240.4,179.11,245.28,177.81 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M273,137.6 L276,143.99 Q280.56,133.32,285.79,130.86 Q292.79,127.56,300.95,137.03
A62.43,62.43,0,0,1,311.16,151.92 C313.47,156.81,314.78,160.86,315.16,164.08
L315.16,164.08 C315.07,163.89,312.73,164.87,308.16,167.08
Q305.29,168.43,301.24,170.38 A58.8,58.8,0,0,0,296.24,153.21 L295.62,151.9
Q292.38,146.14,289.68,144.76 A4.75,4.75,0,0,0,287.09,144.91
Q284.48,146.14,284.21,151.78 T290.4,171.14 L292.04,174.62
C289.7,175.67,287.5,176.67,285.47,177.62 A46.79,46.79,0,0,0,278.74,181.42
A178.71,178.71,0,0,0,270.91,161.42 A151.34,151.34,0,0,0,260.84,143.42 Z" />
    <path
        android:fillColor="#222221"
        android:pathData="M186.26,79.62 L184.34,75.39 A0.62,0.62,0,0,0,183.51,75.08 L183.51,75.08
A0.62,0.62,0,0,0,183.14,75.65 L183.14,75.65 A0.57,0.57,0,0,0,183.2,75.9
L183.2,75.9 A3.7,3.7,0,0,1,181,80.08 C159.58,89.32,135.54,82.61,127.53,79.87
A3.51,3.51,0,0,1,125.32,75.87 L125.32,75.87 A0.56,0.56,0,0,0,125.32,75.62
L125.32,75.62 A0.62,0.62,0,0,0,124.13,75.36 L122.21,79.59
A0.63,0.63,0,0,0,122.52,80.42 A0.65,0.65,0,0,0,122.88,80.42 L122.88,80.42
A0.62,0.62,0,0,0,123.3,80.15 A2.33,2.33,0,0,1,126.3,80.89 L126.3,80.95
L126.3,80.95 L126.3,80.95 C150.3,115.7,176.3,88.8,182.15,80.79
A2.29,2.29,0,0,1,185.06,80.12 A0.62,0.62,0,0,0,185.48,80.39 L185.48,80.39
A0.6,0.6,0,0,0,185.83,80.39 A0.63,0.63,0,0,0,186.26,79.62 Z" />
    <path
        android:fillColor="#fff"
        android:pathData="M154.25,89.61 C166.74,89.61,176.96,86.25,177.62,82.21
C159.62,88.98,140.27,84.88,130.92,82.08 C131.69,86.12,141.83,89.61,154.25,89.61
Z" />
    <path
        android:fillColor="#d77165"
        android:pathData="M142.56,94.57 C150.22,99.31,159.02,97.82,164.83,94.49
A34.55,34.55,0,0,0,153.83,92.66 A31.86,31.86,0,0,0,142.56,94.57 Z" />
</vector>

Solution

Early versions of the Android VectorDrawable path parsing/rendering code had bugs. There were known bugs in rendering:

Relative paths commands (the lower case command letters). See: VectorDrawable renders differently in phone than in Android Studio
Arc path commands (A/a). See: VectorDrawable rendering issue

Finally, if your SVGs were made in Illustrator, try "Save As -> SVG" instead of "Export As -> SVG". See: VectorDrawable not rendering correctly on API 23