Convert SVG paths to Bezier curves

From About PCs Wiki
Jump to navigation Jump to search

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.