Vector Drawable Render Issue on Lollipop Devices (API22)

Question

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>

Lewis McGeary · Answer 1 · 2018-01-21T10:40:48.043

1

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

edited Jan 21 '18 at 10:40

answered Jan 21 '18 at 09:30

Lewis McGeary

7,692
2
40
46

The libraries and dependecies are up to date and pointing to the stable latest version – user3949888 Jan 21 '18 at 10:21
By the way did you try it on Lollipop? If so can you please attach the screenshot – user3949888 Jan 21 '18 at 10:26
Yes, I tried it on an emulator on API 22, have edited answer to include a screenshot. – Lewis McGeary Jan 21 '18 at 10:41
@user3949888 It's not enough to have appCompat, you need to use it. See https://stackoverflow.com/a/53302324/1059969 and https://stackoverflow.com/a/46269326/1059969 – Agent_L Nov 14 '18 at 14:28

score 0 · Answer 2 · answered Jan 21 '18 at 04:04

0

You see all those colors like

android:fillColor="#e0e0e0"

Those colors are applied to svg. Change those colors accordingly and you will get your results...

answered Jan 21 '18 at 04:04

Well there is no color issue rather than the letter N being curved and button's text not being displayed correctly. My bad let me edit question – user3949888 Jan 21 '18 at 10:23

score 0 · Accepted Answer · answered Jan 21 '18 at 07:31

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

score 0 · Answer 4 · answered Feb 23 '22 at 00:36

0

This answer solved the issue in my case (working with ImageView) https://stackoverflow.com/a/55128444/9311888

used

app:srcCompat

instead of

android:src

answered Feb 23 '22 at 00:36

Skomaragiri

61
5

Vector Drawable Render Issue on Lollipop Devices (API22)

4 Answers4

Linked