Understanding how to draw SVG bezier curves by example

Lets consider following lines

<svg height="500" width="500">
  <line id="A" x1="50" y1="100" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line id="B" x1="50" y1="200" x2="150" y2="250" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

Line A has a direction (vector) 100,-50 (150-50, 50-100) and it has the end at 150, 50. Line B has a direction (vector) 100,50 (150-50, 250-200) and it has the end at 150, 250.

We need a curve (path) with start point at 150, 50 (the end of line A) and the end point at 150, 250 (the end of B).

<path d="M150 50 . . . 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />

command C can create "curveto" - (cubic) Bezier line. It's beginning and ending vectors have to be the same as (proportionally) as the vectors of line A and B. So the beginning vector (connected to the line A) could be 100,-50 => it gives point: 250, 0 (150+100=250, 50-50=0) and the ending vector (connected to the line B) could be 100,50 => it gives point: 250, 300 (150+100 = 250, 250+50=300)

So we need path like:

<path d="M150 50 C 250, 0 250, 300 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />

All together:

<svg height="500" width="500">
  <line x1="50" y1="100" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="50" y1="200" x2="150" y2="250" style="stroke:rgb(255,0,0);stroke-width:2" />
  <path d="M150 50 C 250 0 250 300 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />
</svg>

Gives

If you need really straight line in the middle you have two options.

1. Minimize vectors of curveto (with the same ratio), for example 10, 5 and 10, 5 which gives (the middle will be almost straight, but the ends will be sharp)

2. Replace curveto with "curveto, stright line, curveto" or "quadratic, stright line, quadratic".

Ad 1.

<path d="M150 50 C 160 45 160 255 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />

Ad 2.

<path d="M150 50 Q170 40 170 70 L170 230 Q170 260 150 250" style="stroke:rgb(255,0,0);stroke-width:2;fill:white" />

Points 170,70 and 170,230 should be at the line between 170,40 and 170,260, which are defined in the same way as described earlier.

Kind regards