Error: Invalid value for <path> attribute

Question

I have drawn a quadratic bezier curve using a path in SVG. I had got the required output but its showing console error,

Error: Invalid value for <path> attribute d="M 10 20 Q 15 8 15 20 ZM 15 20 Q 20 23 20 13 0 Z".

Here is my code snippet:

<svg>
<path fill="#C4C24A" stroke-width="1" stroke="#C4C24A" opacity="1" d="M 10 20 Q 15 8 15 20 Z M 15 20 Q 20 23 20 13 0  Z" >
</path>
</svg>

Anyone help me on resolving this issue.

Thanks, Dharani.

Answer 1

You are closing your path twice with Z, thus, adding two different paths to one single tag.

Use different path tags or eliminate one of your Zs from the d attribute