# Convert SVG paths to Bezier curves

A Bezier curve has the formula

where

In SVG this is notated as <path d="c " />, is the current location.

When you try to convert an SVG path to a Lilypond path you have to do several calculations and conversions.

One of them is to convert all path elements to Bezier curves.

There are a number of possible path elements: linear elements lhv (and the absolute elements with upper cases), quadratic elements qt, elliptic elements a and cubic Beziers cs.

I do not look at quadratic and elliptic elements. There is a website which does convert any path elements to Bezier

The downside is that this site adds a gazillion of unnecessary decimal places like .9999999 and a comma after every path letter which is not compatible with SVG path definition.

## Convert linear path elements[edit | hide | hide all]

Lilypond can handle line elements, not vertical or horizontal movements. However, the latter are very easy to convert.

Add a for x to vertical movement and for y to horizontal movement.

`<path d="v20" />`

โ `<path d="l 0 20" />`

`<path d="h20" />`

โ `<path d="l 20 0" />`

Converting an l path element to cubic bezier is also quite simple, just add some at the right places

`<path d="l 5 10" />`

โ `<path d="c 0 0 5 10 5 10" />`

What are we doing here? We make the starting point to the first control point and the endpoint to the second control point

## Convert spline s to c[edit | hide]

This is not too difficult, either. The s-part consists of 4 numbers and these become the last four numbers of the c-path. The first two numbers are calculated as from the leading c-Path. If there is a predecessing element v, h or l, just convert to c and do the math.

You can easily see that there is no difference between v, h or l, just make

```
<path d="m0 0 c 1 1 3 3 7 12 s32 256 1024 4096" />
becomes
<path d="m0 0 c 1 1 3 3 7 12 c4 9 32 256 1024 4096" />
```

```
<path d="m0 0 l 1 3 s32 256 1024 4096" />
becomes
<path d="m0 0 c0 0 1 3 1 3 c0 0 32 256 1024 4096" />
```

```
<path d="m0 0 v 3 s32 256 1024 4096" />
becomes
<path d="M0 0 c0 0 0 3 0 3 c0 0 32 256 1024 4096" />
```

## Calculating bounding boxes of Bezier curves[edit | hide]

You can use the control points or calculate the exact values.