svg: can anyone help me to draw an arc?

Question

I'm trying to draw an arc with SVG but I'm stucked. The goal is to get a figure like this:

what I get instead is this:

Those are the SVG tags I'm playing with:

<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
  <path d="M 100 50
    a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>

Can anybody help me to understan what's wrong on my node?

Answer 1

<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
  <!--
  <path d="M 100 50
    a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
  -->
  <path d="M 50 50
    a 50,50 270 1 0 25,15" stroke="black" fill="red" stroke-width="2" />
  <path d="M 150 150
    a 50,50 270 0 0 125,115" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>

your problem is the large-arc-flag, set it to 1

MDN Reference