8

I need to create a speech bubble in SVG.

Unable to fill the background of the svg path. I need to fill background color to this path. Fill is only coloring the border like stroke.

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0 M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>

enter image description here

3 Answers 3

7

Inside the d attribute of your path you actually have 2 paths ,
the default path( d attribute ) behavior is to subtract any other shapes inside the most external shape in a recursive manner (leaving subtracted regions unfilled), look at this example.

In your case the easiest solution is to divide the paths:

<svg>
  <g xmlns="http://www.w3.org/2000/svg" transform="matrix(1,0,0,1,1,1)" id="g3">
    <path fill="red" d="M 45.673,0 C 67.781,0 85.703,12.475 85.703,27.862 C 85.703,43.249 67.781,55.724 45.673,55.724 C 38.742,55.724 32.224,54.497 26.539,52.34 C 15.319,56.564 0,64.542 0,64.542 C 0,64.542 9.989,58.887 14.107,52.021 C 15.159,50.266 15.775,48.426 16.128,46.659 C 9.618,41.704 5.643,35.106 5.643,27.862 C 5.643,12.475 23.565,0 45.673,0" />
<path fill='yellow' d="M 45.673,2.22 C 24.824,2.22 7.862,13.723 7.862,27.863 C 7.862,34.129 11.275,40.177 17.472,44.893 L 18.576,45.734 L 18.305,47.094 C 17.86,49.324 17.088,51.366 16.011,53.163 C 15.67,53.73 15.294,54.29 14.891,54.837 C 18.516,53.191 22.312,51.561 25.757,50.264 L 26.542,49.968 L 27.327,50.266 C 32.911,52.385 39.255,53.505 45.673,53.505 C 66.522,53.505 83.484,42.002 83.484,27.862 C 83.484,13.722 66.522,2.22 45.673,2.22 L 45.673,2.22 z " id="path5"/>
    <text x="15" y="32" fill="black">My Level</text>
  </g>
</svg>

1
  • d="m 43.762513,1.2930698 c 0,0 -22.1482,0 -33.22231,15.3006702 -11.07409982,15.30067 -11.07409982,35.70156 0,51.00224 9.71264,13.41956 33.22231,15.30067 33.22231,15.30067 l 5.29338,29.79819 11.31778,-29.79819 77.518717,0 c 0,0 22.14822,0 33.2223,-15.30067 11.07411,-15.30068 11.07411,-35.70157 0,-51.00224 C 160.04061,1.2930698 137.89239,1.2930698 137.89239,1.2930698 l -94.129877,0 z" Commented Apr 13, 2016 at 16:36
6

This should work:

<path style="fill:red;fill-opacity:1;" ...>

Edit from comments:

Oh, now I see where is the problem. The shape is defined with empty inner space. Replace d attribute with this:

d="m 46.387286,-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0,-15.387 17.9220003,-27.86199986 40.0300003,-27.86199986"
4
  • 2
    Oh, now I see where is the problem. The shape is defined with empty inner space. Replace d attribute with this: d="m 46.387286,-0.35714286 c 22.108,0 40.03,12.47499986 40.03,27.86199986 0,15.387 -17.922,27.862 -40.03,27.862 -6.931,0 -13.449,-1.227 -19.134,-3.384 -11.22,4.224 -26.53900028,12.202 -26.53900028,12.202 0,0 9.98900028,-5.655 14.10700028,-12.521 1.052,-1.755 1.668,-3.595 2.021,-5.362 -6.51,-4.955 -10.4850003,-11.553 -10.4850003,-18.797 0,-15.387 17.9220003,-27.86199986 40.0300003,-27.86199986"
    – cdm
    Commented Apr 12, 2016 at 7:49
  • Thanks a lot ! Worked like a charm. Bit, how you manage to find this ? Commented Apr 12, 2016 at 8:33
  • I downloaded the image and opened it in Inkscape. There it was obvious.
    – cdm
    Commented Apr 12, 2016 at 9:10
  • @cdm How do I modify the right d attribute with Inkscape? Commented Nov 1, 2018 at 19:03
1

Normally what is happening in these instances is what you think is a line is actually just the body of the svg itself. If you edit the points that make up the svg you will probably find that there are a ring of points on the perimeter, with a concentric set of points just inside the perimeter. If you remove the internal ones you will see a solid shape.

1
  • Is there a way to do this automatically though? Like "extractOuterPath" function or something like that? I mean, in case if I do not know beforehand which SVG I am dealing with so I am not able to open it in Inkscape manually to see which nodes of the path belong only to outer line to split it from the rest.
    – DDRRSS
    Commented Dec 12, 2021 at 9:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.