1

I am new to SVG. I have chat svg icon that i need to fill with blue colour. And by fill means i need to fill in the empty spaces between these two chat symbols (The empty white space) with a white outline around those.

By looking at some resources i came to know about fill, stroke attributes. After applying those it was just changing black border colour only. So i googled and found this SO (Fill SVG with color). With the help of this i managed to fill in those empty spaces with blue colour. Now I am not sure how can i achieve the white outline/border around each chat symbol.

My original SVG:

<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 64 64">
  <path d="M8.93022208,42.4845518 C11.6578635,42.4845518 17.2343876,39.7366925 21.3359462,36.8070083 C25.457698,36.9484387 29.3168152,36.3220925 32.6708152,35.109807 C35.7621394,37.3929435 40.0252842,38.7062525 44.7735601,38.605229 C47.9051463,40.8277656 51.5825256,42.4845518 53.3605946,42.4845518 C54.9768704,42.4845518 55.7647325,40.9489656 54.8150773,39.6760801 C54.2494222,38.9285049 53.299767,37.5747849 52.6534222,36.4433214 C57.0375601,34.2612083 59.7652842,30.1798345 59.7652842,25.7145931 C59.7652842,18.8247724 53.2190773,13.2482897 44.8542497,12.7835586 C41.8840428,5.44924139 33.2971738,0.155586207 23.0735462,0.155586207 C10.3445669,0.155586207 0.161379311,8.35874484 0.161379311,18.5217104 C0.161379311,25.1488552 4.40436001,31.0284414 10.7890635,33.9783435 C9.87987726,35.7361552 8.18266346,38.1203132 7.27343587,39.3123932 C6.2025807,40.7267173 6.84913243,42.4845518 8.93022208,42.4845518 Z M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,35.4330828 14.3653117,34.1399794 C14.9310497,33.0893338 14.7896152,32.1599173 13.4965117,31.5537932 C7.15223587,28.6038621 3.5153669,23.8961794 3.5153669,18.5217104 C3.5153669,10.2377793 12.1832152,3.48939311 23.0735462,3.48939311 C31.3777118,3.48939311 38.3887325,7.38889656 41.2579739,12.9048 C33.5396152,13.8544138 27.660029,19.1884552 27.660029,25.7145931 C27.660029,28.2806069 28.528829,30.604138 30.0441807,32.5640111 C27.8822773,33.1903573 25.5385531,33.5338387 23.0735462,33.5338387 C22.6694773,33.5338387 22.0431187,33.5136332 21.2349393,33.4934276 C20.3863324,33.4934276 19.7397807,33.7560911 18.9719876,34.3622318 C16.486829,36.160455 12.8903876,38.3829766 11.0517393,39.1305518 C10.8901117,39.1911642 10.8294911,39.0699394 10.9304979,38.9285049 Z M43.5205946,35.5745173 C36.5299325,35.5745173 30.7311601,31.1698759 30.7311601,25.7145931 C30.7311601,20.2593104 36.5299325,15.8546897 43.7229394,15.8546897 C50.8956291,15.8546897 56.6941118,20.2593104 56.6941118,25.7145931 C56.6941118,29.3918483 54.6334222,32.1397118 50.4913532,34.079367 C49.6223877,34.4632552 49.1779739,35.271447 49.6223877,36.2614784 C50.0266635,37.1504856 50.5923187,38.1405187 51.2390773,38.9082994 C51.3603187,39.0093228 51.2792153,39.1103463 51.1381118,39.0295283 C49.8247325,38.3021587 48.0263877,37.1908966 46.5714911,36.1806596 C45.9251463,35.7159505 45.379767,35.5341079 44.7735601,35.5341079 C44.3490083,35.5543126 43.9451463,35.5745173 43.5205946,35.5745173 Z" transform="translate(2 10.69)"></path>
</svg>

This is what i able to do so far.

<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" viewBox="0 0 64 64">
  <path stroke="white" fill="blue" stroke-width="0.5"
       fill-opacity="1" stroke-opacity="0.5" d="M8.93022208,42.4845518 C11.6578635,42.4845518 17.2343876,39.7366925 21.3359462,36.8070083 C25.457698,36.9484387 29.3168152,36.3220925 32.6708152,35.109807 C35.7621394,37.3929435 40.0252842,38.7062525 44.7735601,38.605229 C47.9051463,40.8277656 51.5825256,42.4845518 53.3605946,42.4845518 C54.9768704,42.4845518 55.7647325,40.9489656 54.8150773,39.6760801 C54.2494222,38.9285049 53.299767,37.5747849 52.6534222,36.4433214 C57.0375601,34.2612083 59.7652842,30.1798345 59.7652842,25.7145931 C59.7652842,18.8247724 53.2190773,13.2482897 44.8542497,12.7835586 C41.8840428,5.44924139 33.2971738,0.155586207 23.0735462,0.155586207 C10.3445669,0.155586207 0.161379311,8.35874484 0.161379311,18.5217104 C0.161379311,25.1488552 4.40436001,31.0284414 10.7890635,33.9783435 C9.87987726,35.7361552 8.18266346,38.1203132 7.27343587,39.3123932 C6.2025807,40.7267173 6.84913243,42.4845518 8.93022208,42.4845518 Z M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,38.9285049 Z,36.1806596 C45.9251463" transform="translate(2 10.69)"/>
</svg>

Looking for this end result:

enter image description here

Can anyone please help me here?

Also please let know if removing some part of d attribute was correct way of doing this.

Improve this question

1 Answer 1

Reset to default
2

I've split the d attribute between 2 paths and I've deleted the first part of the d attribute since it was an outline of both speech bubbles. This is the result:

<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="250px" height="250px" viewBox="0 0 64 64">
<g transform="translate(2 10.69)" fill="blue" stroke="blue" >
  <path d="M10.9304979,38.9285049 C12.0619738,37.534378 13.6783324,35.4330828 14.3653117,34.1399794 C14.9310497,33.0893338 14.7896152,32.1599173 13.4965117,31.5537932 C7.15223587,28.6038621 3.5153669,23.8961794 3.5153669,18.5217104 C3.5153669,10.2377793 12.1832152,3.48939311 23.0735462,3.48939311 C31.3777118,3.48939311 38.3887325,7.38889656 41.2579739,12.9048 C33.5396152,13.8544138 27.660029,19.1884552 27.660029,25.7145931 C27.660029,28.2806069 28.528829,30.604138 30.0441807,32.5640111 C27.8822773,33.1903573 25.5385531,33.5338387 23.0735462,33.5338387 C22.6694773,33.5338387 22.0431187,33.5136332 21.2349393,33.4934276 C20.3863324,33.4934276 19.7397807,33.7560911 18.9719876,34.3622318 C16.486829,36.160455 12.8903876,38.3829766 11.0517393,39.1305518 C10.8901117,39.1911642 10.8294911,39.0699394 10.9304979,38.9285049 Z"/>      
  <path d="M43.5205946,35.5745173 C36.5299325,35.5745173 30.7311601,31.1698759 30.7311601,25.7145931 C30.7311601,20.2593104 36.5299325,15.8546897 43.7229394,15.8546897 C50.8956291,15.8546897 56.6941118,20.2593104 56.6941118,25.7145931 C56.6941118,29.3918483 54.6334222,32.1397118 50.4913532,34.079367 C49.6223877,34.4632552 49.1779739,35.271447 49.6223877,36.2614784 C50.0266635,37.1504856 50.5923187,38.1405187 51.2390773,38.9082994 C51.3603187,39.0093228 51.2792153,39.1103463 51.1381118,39.0295283 C49.8247325,38.3021587 48.0263877,37.1908966 46.5714911,36.1806596 C45.9251463,35.7159505 45.379767,35.5341079 44.7735601,35.5341079 C44.3490083,35.5543126 43.9451463,35.5745173 43.5205946,35.5745173 Z" ></path>      
</g>
</svg>

Please observe that I've added a stroke="blue" since otherwise the two speech bubbles were too far apart.

Improve this answer
4
  • This is great solution. But how do i make the first symbol overlap the later?
    – CodeThing
    Commented Jun 8, 2023 at 10:46
  • you go to the drawing board and redraw everything fron scratch
    – enxaneta
    Commented Jun 8, 2023 at 10:48
  • Alternatively you can use this one thenounproject.com/icon/speech-bubble-125699
    – enxaneta
    Commented Jun 8, 2023 at 10:54
  • 1
    My bad. The posted solution is correct. This is what i wanted. Thanks.
    – CodeThing
    Commented Jun 8, 2023 at 12:34

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