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>

回答1:

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

回答2:

Make sure you are using a recent version of the support library, current latest version is com.android.support:appcompat-v7:27.0.2.

There have been various problems with the Framework implementations of VectorDrawable which have been fixed in the support library version VectorDrawableCompat. The latest version of the support library will default to the framework version for API 24+ and use the Compat version for older APIs to take advantage of those fixes. It's possible you're using an older version of the Support Library, as when I try your example image using the latest versions it seems to render correctly.

edit: screenshot of emulator on API22