0

I am new to svg, and i don't know how to make the inside of this heart to fill with color.When i use the fill property it changes only the color of the border.I guess i need another path in my svg code?If so how can i do it, because it looks like a matrix code to me.

#Outline path {
  fill: red;
}
 <svg id="Outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>121 heart</title><path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585,18.4a2.973,2.973,0,0,1-3.83,0C4.947,16.006,2,11.87,2,8.967a4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,11,8.967a1,1,0,0,0,2,0,4.8,4.8,0,0,1,4.5-5.05A4.8,4.8,0,0,1,22,8.967C22,11.87,19.053,16.006,13.915,20.313Z"/></svg>

Improve this question

1 Answer 1

Reset to default
3

The heart sort of has a path within a path, so when you are filling it with red it just fills what looks like rather a wide border.

Playing around a bit with the path, removing half of it gives you just a heart-shaped path which can then be totally filled with red.

#Outline path {
  fill: red;
}
 <svg id="Outline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>121 heart</title><path d="M17.5,1.917a6.4,6.4,0,0,0-5.5,3.3,6.4,6.4,0,0,0-5.5-3.3A6.8,6.8,0,0,0,0,8.967c0,4.547,4.786,9.513,8.8,12.88a4.974,4.974,0,0,0,6.4,0C19.214,18.48,24,13.514,24,8.967A6.8,6.8,0,0,0,17.5,1.917Zm-3.585"/></svg>

Improve this answer
3

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