SVG to VectorDrawable – black areas

When converting my SVG file to XML in Android Studio, some areas lose their colour and turn black. I generate the images with matplotlib.

enter image description here

Actual result

I would like to know what is the reason, has anyone had a similar experience?

Part of the SVG code:

<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!-- Created with matplotlib (https://matplotlib.org/) --> <svg height="325.44pt" version="1.1" viewBox="0 0 169.766662 325.44" width="169.766662pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  <defs>   <style type="text/css"> *{stroke-linecap:butt;stroke-linejoin:round;}   </style>  </defs>  <g id="figure_1">   <g id="patch_1">    <path d="M 0 325.44  L 169.766662 325.44  L 169.766662 0  L 0 0  z " style="fill:#ffffff;"/>   </g>   <g id="axes_1">    <g id="patch_2">     <path d="M 7.2 318.24  L 7.2 7.2  L 162.566662 7.2  L 162.566662 318.24  L 7.2 318.24  " style="fill:#ffffff;"/>    </g>    <g id="PathCollection_1">     <path clip-path="url(#p754b03d407)" d="M 78716.596016 -27474.520089  L 77942.322246 -27221.279456  L 78050.518304 -27028.327541  L 78716.596016 -27059.341745  L 78716.596016 -25924.398002  L 77866.272281 -26189.452266  L 76119.356759 -26479.331987  L 74855.808906 -26442.999703  

… Path continues …

 M -22910.24931 -17813.121791  L -23104.077101 -18117.690382  L -23995.151323 -17916.360593  L -23910.337932 -17664.227519  L -23274.708335 -17321.128788  z " style="fill:#ffffff;stroke:#ffffff;"/>    </g>    <g id="PathCollection_2">     <defs>      <path d="M 87.509701 -270.95066  L 113.70849 -250.33765  L 119.863663 -259.100553  L 128.991691 -265.620573  L 132.903703 -256.492545  L 136.815715 -242.1485  L 144.639739 -241.496498  L 138.472461 -234.591775  L 138.119719 -223.240442  L 125.868684 -220.480916  L 129.427765 -185.137266  L 128.093109 -131.553327  L 119.047112 -64.622833  L 113.560196 -51.350428  L 95.913086 -25.225786  L 95.814223 -25.126923  L 91.760825 -43.490791  L 84.84039 -63.6342  L 75.250644 -83.258577  L 63.090452 -100.139495  L 36.595072 -127.203339  L 32.146221 -144.034825  L 44.009824 -164.425393  L 47.321746 -173.273663  L 50.633669 -182.121934  L 47.173451 -204.984085  L 37.929727 -227.450783  L 27.598506 -243.812669  L 25.126923 -251.128557  L 25.522376 -261.064324  L 32.591106 -289.78413  L 37.039957 -296.85286  L 44.899594 -300.313077  L 44.998457 -300.288362  L 45.591637 -300.288362  L 58.542737 -299.967055  L 66.105784 -298.558253  L 75.843825 -294.554287  L 83.752893 -291.291796  L 83.802325 -291.316512  L 108.814755 -300.263646  L 112.818721 -297.890925  L 115.339736 -289.957141  L 119.788587 -284.470224  L 121.123243 -281.973925  L 122.457898 -279.502341  L 119.047112 -273.026791  L 113.313037 -271.593272  L 96.01195 -273.768266  z " id="mae49ba8945" style="stroke:#ffffff;stroke-width:0.25;"/>     </defs>     <g clip-path="url(#p754b03d407)">      <use style="fill:#000098;stroke:#ffffff;stroke-width:0.25;" x="0" xlink:href="#mae49ba8945" y="325.44"/>     </g>    </g>    <g id="patch_3">     <path d="M 7.2 318.24  L 7.2 7.2  L 162.566662 7.2  L 162.566662 318.24  L 7.2 318.24  " style="fill:none;stroke:#000000;stroke-linejoin:miter;"/>    </g>   </g>  </g>  <defs>   <clipPath id="p754b03d407">    <rect height="311.04" width="155.366662" x="7.2" y="7.2"/>   </clipPath>  </defs> </svg> 

Android Studio complains the document contains very long lines, could that be the issue?

Add Comment
1 Answer(s)

The svg to xml thing is not perfect. You can probably fix the problem by manually coloring the object. The structure of a simple image is something like

<vector ...>     <path         android:fillColor="this attribute you want to add"         android:pathData="..." /> </vector>  

P.S. As for the long path, you can use avocado to optimize the image.

Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.