Today, the designer sent me an archive with svg, I added them to the application and received the following picture (for example, because this is repeated with all the svg)

enter image description here

despite the fact that svg itself, including xcode and adobe illustrator and thumbs on macos shows as follows

enter image description here

the svg code looks like this

<svg id="iMap-all" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 366.4 512"> <path d="M183.2,0C82.2,0,0,82.2,0,183.2,0,278,137.1,380.7,176.8,507.4a6.67,6.67,0,0,0,6.3,4.6,6.42,6.42,0,0,0,6.2-4.7c38.5-129.8,177.1-229.2,177.1-324.1C366.4,82.2,284.2,0,183.2,0Zm0,322.2c-79.2,0-143.7-64.5-143.7-143.7S103.9,34.8,183.2,34.8,326.8,99.2,326.8,178.5,262.4,322.2,183.2,322.2Z" fill="#c3181d"/> <circle cx="183.2" cy="178.5" r="143.7" fill="#fff"/><path d="M119.1,168.3a20.27,20.27,0,0,0,13.9,5.6,19.85,19.85,0,0,0,12.8-4.6V129.8H91.4a6.27,6.27,0,0,0-6.3,6.3v17.7a20.1,20.1,0,0,0,20.1,20.1A20.74,20.74,0,0,0,119.1,168.3Z" fill="#2b2b2b"/> <path d="M145.8,179.3a20.08,20.08,0,0,1-26.7-1,20.27,20.27,0,0,1-13.9,5.6,19.71,19.71,0,0,1-9.7-2.5V258a6.27,6.27,0,0,0,6.3,6.3h44Zm-13.9,44.8H111.8a6.27,6.27,0,0,1-6.3-6.3V197.7a6.27,6.27,0,0,1,6.3-6.3h20.1a6.27,6.27,0,0,1,6.3,6.3v20.1A6.27,6.27,0,0,1,131.9,224.1Z" fill="#2b2b2b"/><path d="M267.3,88.7h-109v50.2a20.08,20.08,0,0,0,25.8-1.7,20.27,20.27,0,0,0,13.9,5.6,19.83,19.83,0,0,0,13.9-5.6,20.27,20.27,0,0,0,13.9,5.6,19.83,19.83,0,0,0,13.9-5.6,20.27,20.27,0,0,0,13.9,5.6h0a20.1,20.1,0,0,0,20.1-20.1V95A6.56,6.56,0,0,0,267.3,88.7Z" fill="#2b2b2b"/> <path d="M190.5,264.3V217.8a6.27,6.27,0,0,1,6.3-6.3H227a6.27,6.27,0,0,1,6.3,6.3v46.5h28.9a6.27,6.27,0,0,0,6.3-6.3V146.3a20,20,0,0,1-14.9,6.7h0a19.83,19.83,0,0,1-13.9-5.6,20.27,20.27,0,0,1-13.9,5.6,19.83,19.83,0,0,1-13.9-5.6A20.27,20.27,0,0,1,198,153a19.83,19.83,0,0,1-13.9-5.6,20.08,20.08,0,0,1-25.8,1.7V264.4h32.2Zm18.1-76.6a6.27,6.27,0,0,1-6.3,6.3H182.2a6.27,6.27,0,0,1-6.3-6.3V167.6a6.27,6.27,0,0,1,6.3-6.3h20.1a6.27,6.27,0,0,1,6.3,6.3Zm40.2,0a6.27,6.27,0,0,1-6.3,6.3H222.4a6.27,6.27,0,0,1-6.3-6.3V167.6a6.27,6.27,0,0,1,6.3-6.3h20.1a6.27,6.27,0,0,1,6.3,6.3v20.1Z" fill="#2b2b2b"/></svg> 

That is, with the exception of the curved viewbox, nothing special. I, as a person who understands little in SvG and design, act rather shamelessly, I open this svg in adobe illustrator and save it with standard settings, as a result, its code changes

  <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="iMap-all" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 366.3999939 512" style="enable-background:new 0 0 366.3999939 512;" xml:space="preserve"> <style type="text/css"> .st0{fill:#C3181D;} .st1{fill:#FFFFFF;} .st2{fill:#2B2B2B;} </style> <path class="st0" d="M183.1999969,0C82.1999969,0,0,82.1999969,0,183.1999969 C0,278,137.1000061,380.7000122,176.8000031,507.3999939c0.8910217,2.7294922,3.4288025,4.582489,6.3000031,4.6000061 c2.8887024,0.0065918,5.4260864-1.9169006,6.1999969-4.7000122c38.5-129.7999878,177.1000214-229.2000122,177.1000214-324.1000061 C366.3999939,82.1999969,284.2000122,0,183.1999969,0z M183.1999969,322.2000122C104,322.2000122,39.5,257.7000122,39.5,178.5000153 S103.9000015,34.7999992,183.1999969,34.7999992S326.7999878,99.1999969,326.7999878,178.5 S262.3999939,322.2000122,183.1999969,322.2000122z"/> <circle class="st1" cx="183.1999969" cy="178.5" r="143.6999969"/> <path class="st2" d="M119.0999985,168.3000031c3.7478714,3.5737305,8.7214279,5.5774689,13.9000015,5.6000061 c4.6752472,0.0219116,9.2082062-1.6071167,12.8000031-4.6000061v-39.5H91.4000015 c-3.4627838-0.0166168-6.2833939,2.7770691-6.3000031,6.2398529c-0.0000992,0.02005-0.0000992,0.0401001,0,0.0601501v17.6999969 c0,11.1009216,8.9990692,20.1000061,20.0999908,20.1000061c0.0000076,0,0.0000076,0,0.0000076,0 C110.3693466,173.8309937,115.3265533,171.833847,119.0999985,168.3000031z"/> <path class="st2" d="M145.8000031,179.3000031c-7.8625488,6.4954376-19.3453522,6.0653687-26.6999969-1 c-3.7478714,3.5737305-8.7214279,5.5774689-13.9000015,5.6000061c-3.3946686,0.0158997-6.7359085-0.8452454-9.6999969-2.5V258 c-0.0166016,3.4627991,2.7770844,6.2833862,6.2398682,6.2999878c0.0200424,0.0000916,0.0400925,0.0000916,0.0601349,0h44.0000076 L145.8000031,179.3000031z M131.9000092,224.1000061h-20.1000061c-3.4627838,0.0166168-6.2833939-2.7770691-6.3000031-6.2398529 c-0.0000992-0.02005-0.0000992-0.0401001,0-0.0601501v-20.1000061c-0.0166092-3.4627838,2.7770691-6.2833862,6.2398529-6.3000031 c0.02005-0.0000916,0.0401001-0.0000916,0.0601501,0h20.1000061c3.4627838-0.0166168,6.2833862,2.7770691,6.3000031,6.2398529 c0.0000916,0.02005,0.0000916,0.0401001,0,0.0601501v20.1000061c0.0166168,3.4627838-2.7770691,6.2833862-6.2398529,6.3000031 c-0.02005,0.0000916-0.0401154,0.0000916-0.0601654,0H131.9000092z"/> <path class="st2" d="M267.2999878,88.6999969h-109v50.1999969c7.8692932,5.782196,18.7574463,5.0647583,25.8000031-1.6999969 c3.7478638,3.5737305,8.7214203,5.5774689,13.8999939,5.6000061c5.1874542,0.0233002,10.1774902-1.9870758,13.8999939-5.6000061 c3.7478638,3.5737305,8.7214203,5.5774689,13.8999939,5.6000061c5.1874542,0.0233002,10.1774902-1.9870758,13.8999939-5.6000061 c3.7478638,3.5737305,8.7214203,5.5774689,13.8999939,5.6000061l0,0c11.1009064,0,20.0999908-8.9990845,20.0999908-20.0999985V95 C273.5636902,91.5400238,270.7616882,88.7817917,267.2999878,88.6999969z"/> <path class="st2" d="M190.5,264.2999878v-46.4999847c-0.0166168-3.4627838,2.7770691-6.2833862,6.2398529-6.3000031 c0.02005-0.0000916,0.0401001-0.0000916,0.0601501,0H227c3.4627838-0.0166168,6.2833862,2.7770691,6.3000031,6.2398529 c0.0000916,0.02005,0.0000916,0.0401001,0,0.0601501v46.4999847h28.9000092 c3.4627991,0.0166016,6.2833862-2.7770691,6.2999878-6.2398682c0.0000916-0.02005,0.0000916-0.0400696,0-0.0601196V146.3000031 c-3.7864685,4.2525177-9.2060242,6.6894989-14.8999939,6.6999969l0,0 c-5.1874542,0.0233002-10.1774902-1.9870758-13.8999939-5.6000061c-3.7478638,3.5737305-8.7214203,5.5774689-13.8999939,5.6000061 c-5.1874542,0.0233002-10.1774902-1.9870758-13.8999939-5.6000061C208.1521454,150.9737396,203.1785736,152.977478,198,153 c-5.1874542,0.0233002-10.1774902-1.9870758-13.8999939-5.6000061c-7.0425568,6.7647552-17.9307098,7.482193-25.8000031,1.6999969 v115.3000031H190.5V264.2999878z M208.6000061,187.6999817c0.0166168,3.4627838-2.7770691,6.2833862-6.2398529,6.3000031 c-0.02005,0.0000916-0.0401001,0.0000916-0.0601501,0h-20.1000061c-3.4627838,0.0166168-6.2833862-2.7770691-6.3000031-6.2398529 c-0.0000916-0.02005-0.0000916-0.0401001,0-0.0601501v-20.0999756c-0.0166168-3.4627838,2.7770691-6.2833862,6.2398529-6.3000031 c0.02005-0.0000916,0.0401001-0.0000916,0.0601501,0h20.1000061c3.4627838-0.0166168,6.2833862,2.7770691,6.3000031,6.2398529 c0.0000916,0.02005,0.0000916,0.0401001,0,0.0601501V187.6999817z M248.8000031,187.6999817 c0.0166168,3.4627838-2.7770691,6.2833862-6.2398529,6.3000031c-0.02005,0.0000916-0.0401001,0.0000916-0.0601501,0h-20.1000061 c-3.4627838,0.0166168-6.2833862-2.7770691-6.3000031-6.2398529c-0.0000916-0.02005-0.0000916-0.0401001,0-0.0601501v-20.0999756 c-0.0166168-3.4627838,2.7770691-6.2833862,6.2398529-6.3000031c0.02005-0.0000916,0.0401001-0.0000916,0.0601501,0H242.5 c3.4627838-0.0166168,6.2833862,2.7770691,6.3000031,6.2398529c0.0000916,0.02005,0.0000916,0.0401001,0,0.0601501v20.1000061 V187.6999817z"/> </svg> 

I launch the application and see that everything in the application has become # 000, that is, in this case the “drop” becomes completely black. I tried both JAMSVG and SVGgh and the SVGKit SDK that became part, but the result is the same. Neither the designer nor the others who had previously dealt with the SVG shrug their shoulders, and I myself am not clear, it seems that the obvious path is parsed crookedly, and after saving it is also damn

the same thing happened with monochrome icons, after ai they took the correct form in the appendix instead of a curve, but painted it black. I used to work with the Svg normally.

Any thoughts on what might be causing this?

  • Interesting. On the drawn SVG exclusively convex figures. In the mathematical sense. - D-side
  • It looks like a problem with the mask, I think it is necessary to decompose on a simple path without holes inside. By the way, by the way, I draw some icons from the designer by hand in the code point by point, it turns out much cleaner, and such an icon will take a maximum of an hour to take - Artem Gorlachev

1 answer 1

In my inkscape, the picture looks like this:

enter image description here

Helps put spaces before minuses.