4

I have converted image to svg and get the path vector like below

 <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="122.000000pt" height="98.000000pt" viewBox="0 0 122.000000 98.000000"
      preserveAspectRatio="xMidYMid meet">
   <metadata>
   Created by potrace 1.14, written by Peter Selinger 2001-2017
   </metadata>
   <g transform="translate(0.000000,98.000000) scale(0.100000,-0.100000)"
   fill="#000000" stroke="none">

   <path d="M93 873 c-7 -3 -6 -653 0 -660 5 -4 889 -185 892 -181 1 1 35 69 74
   151 l71 147 0 273 0 272 -515 0 c-283 0 -518 -1 -522 -2z m1007 -284 l0 -251
   -66 -139 c-59 -122 -70 -138 -88 -134 -12 3 -106 23 -211 46 -104 22 -219 47
   -255 54 -36 8 -85 21 -109 30 -24 8 -56 15 -70 15 -15 0 -49 7 -75 16 -26 9
   -58 14 -71 12 -15 -3 -26 0 -29 9 -4 8 -6 145 -6 304 l0 289 490 0 490 0 0
   -251z" style="fill:green;background-color:red"/>
   </g>
 </svg>

What i want is to give fill the path with color any color but when i use fill it only change the color of borders not the inner color of complete path node. I tried

style="fill:green;background-color:red"

but not working only changing border not inner? Here is jsfiddle link Link to example can any body convert and fill the path with color?

Carson
  • 6,105
  • 2
  • 37
  • 45
nouman arshad
  • 453
  • 5
  • 15

1 Answers1

11

The thing is that your SVG doesn't have any "inner". Your SVG is actually what you call a border. You can't set a color for what's inside because it's not a part of your SVG.

There's specified a "hole" in your image. That's the path in your code starting with m1007 and ending with -251z - due to specification: "The M indicates a moveto, ... and the z indicates a closepath)".. If you remove that part you'll have the whole shape w/o the gap inside.

https://jsfiddle.net/norin89/qhqa4kyq/4/

norin89
  • 482
  • 3
  • 8
  • How you guess that i have many similar svg there is any online tool or shortcut to check the whole path so i remove that from path.. – nouman arshad Jul 14 '17 at 11:29
  • What the science behind so i too correct my other images..rapidly – nouman arshad Jul 14 '17 at 11:33
  • I don't know any online tool to do that. You can use some app for vector graphic (e.g. Adobe Illustrator or Inkspace). Or if you want to do it directly in the code just look for `M` and `Z` inside the `path`. Due to [specification](https://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation): "The M indicates a moveto, ... and the z indicates a closepath)". You probably might to write some `regexp` to remove that part of `path` for you if you wan't to do it automatically. – norin89 Jul 14 '17 at 11:36
  • https://jsfiddle.net/qhqa4kyq/6/ reaL PROBLEM want to fill with color rect is no issue path have – nouman arshad Jul 14 '17 at 11:36
  • 1
    So you need to change your shape's as I described above. Here's how: https://jsfiddle.net/norin89/qhqa4kyq/8/ - I've left only one path so you can see the difference. First remove inner part of the path (all from `M` to `Z`) so inner is your path too. And set `fill`, `stroke-width` and `stroke` attributes. That's all! – norin89 Jul 14 '17 at 11:45