converting svg glyph to path data for use in scheme (was: accidentals fo

Hi Andrew,

On Dec 12, 2015, at 10:38 AM, N. Andrew Walsh <address@hidden> wrote:

I've been doing some background work on my just-intonation accidentals, and I was hoping you could give me some advice on the svg-to-path translation. I know what the stencils should look like, but I'm not sure about things like scaling (how many units high or wide should a stencil have if it's equivalent, say, to the thick bars in a sharp sign?), and what the best procedure might be for drawing them. Could you give me some advice/help?

I think this is going to be geared towards adding into the OLL repository as part of the "contemporary notation" extensions, so probably aimed at the dev branch. So I'll see about the make-path-stencil (are you sure it's that and not the "make-connected-path-stencil" I see in the LSR?).

Here’s what I’d suggest for going from an svg to a path from my experience with doing this.

You can create a simple .ly file with a few notes and accidentals, then render it to SVG and open that SVG in Inkscape. Then use Inkscape to draw your accidentals (or parts of accidentals) so they look good next to the notes and standard accidentals. Having the default notes, accidentals, staff, in the SVG will help you get it at approximately the right scale. (Although this may not matter, you will probably have to change the scaling later anyway… I can’t remember for sure.)

Cut and paste your shape into a separate Inkscape SVG file and export/save as a plain SVG. I found that I had to horizontally flip the shape in Inkscape first because svgs from Inkscape apparently come out reversed for some reason. So you may need to do that.

Open that SVG file in a text editor and find the path data. It should look something like this (a custom whole note glyph I made):

<path

id="path8-2-2-7-3"

d="m 304.96006,540.93655 c 11.66747,0 16.5678,6.05308 16.5678,16.78715 0,18.43458 -14.00096,28.9213 -32.43555,28.9213 -11.66747,0 -16.33444,-6.05308 -16.33444,-16.78715 0,-18.43458 13.7676,-28.9213 32.20219,-28.9213 z m -66.27119,22.85423 c 0,10.03402 7.93387,17.50119 17.0345,22.40152 12.60086,6.76713 27.06851,9.33397 41.30282,9.33397 14.23429,0 28.9353,-2.56684 41.53616,-9.33397 9.10063,-4.90033 17.0345,-12.3675 17.0345,-22.40152 0,-10.03402 -7.93387,-17.5012 -17.0345,-22.40153 -12.60086,-6.76713 -27.30186,-9.33397 -41.53616,-9.33397 -14.23431,0 -28.70196,2.56684 -41.30282,9.33397 -9.10063,4.90033 -17.0345,12.36751 -17.0345,22.40153 z"

style="fill:currentColor" />

Working with this is the tedious part… You can take out the parts you don’t need. Here’s the part you do need:

You can manually reformat that so it is easier to read and then use something like

http://petercollingridge.appspot.com/svg_transforms

to transform the path in various ways.

For example the following is scaled using "scale(0.016, 0.016)" and converted to absolute coordinates. It may help to look up "SVG path" on the web to get familiar with the commands C c M m z and the possible transformations, etc.

<path d="

M 4.87936096 8.654984800000001

C 5.06604048 8.654984800000001 5.14444576 8.751834080000002 5.14444576 8.9235792

C 5.14444576 9.21853248 4.9204304 9.386320000000001 4.62547696 9.386320000000001

C 4.43879744 9.386320000000001 4.36412592 9.28947072 4.36412592 9.117725600000002

C 4.36412592 8.822772320000002 4.58440752 8.654984800000001 4.8793609600000005 8.654984800000001

M 3.8190219200000004 9.02065248

C 3.8190219200000004 9.1811968 3.9459638400000006 9.300671520000002 4.09157392 9.3790768

C 4.29318768 9.48735088 4.52467008 9.52842032 4.75241904 9.52842032

C 4.98016768 9.52842032 5.21538384 9.487350880000001 5.4169976 9.3790768

C 5.56260768 9.30067152 5.6895496 9.1811968 5.6895496 9.02065248

C 5.6895496 8.860108160000001 5.56260768 8.74063328 5.4169976 8.662228

C 5.21538384 8.553953920000001 4.98016784 8.51288448 4.75241904 8.51288448

C 4.52467008 8.51288448 4.293187680000001 8.55395392 4.09157392 8.662228

C 3.94596384 8.74063328 3.81902192 8.860108160000001 3.81902192 9.02065248

"/>

You might want to shift / translate it so it is snug to (0,0) with “translate(x, y)” where x and y are the inverse of the smallest X and Y values in the path. (I did this, but it may not be necessary…)

Now you have a path that can be used by “make-path-stencil”. It will look something like the following as embedded scheme in a LilyPond file:

#(define whole-note-outline

'(M 0 0

C 0 0.16054432 0.12694192 0.28001904 0.272552 0.35842432

C 0.47416576 0.4666984 0.70564816 0.50776784 0.93339712 0.50776784

C 1.16114576 0.50776784 1.39636192 0.4666984 1.59797568 0.35842432

C 1.74358576 0.28001904 1.87052768 0.16054432 1.87052768 0

C 1.87052768 -0.16054432 1.74358576 -0.2800192 1.59797568 -0.35842448

C 1.39636192 -0.46669856 1.16114592 -0.507768 0.93339712 -0.507768

C 0.70564816 -0.507768 0.47416576 -0.46669856 0.272552 -0.35842448

C 0.12694192 -0.2800192 0 -0.16054432 0 0

z))

Then you can use it like so:

(make-path-stencil whole-note-outline 0.0001 1 1 #t)

in the scheme code you’re using to override the accidental glyphs. The arguments are:

(make-path-stencil

path-data-list

thickness-of-path-line

x-scale-factor

y-scale-factor

filled-or-not)

(Oh, and yes make-path-stencil is what I'd use if you’re targeting 2.19 or higher. The make-connected-path-stencil procedure is similar but more limited. make-path-stencil is not in the LSR yet...)

To get the scaling right is basically a trial and error dance. Use the scale factor arguments to test until you’ve got it right, then go back and scale the path data itself with those values so it’s the correct size to start with. (You could go back to Inkscape and scale there if you prefer…)

…so you’ll need some scheme code for overriding the standard accidental stencils with your path stencils. (It might make sense to just create some simple line stencils in scheme, as a kind of sketch, to get your scheme code working first, then go back and create the path stencils that have the refined look you want.)

Anyway, that’s how I’ve done this kind of thing. It’s not simple but it works! Let me know if you have any questions.

-Paul

From:	Paul Morris
Subject:	converting svg glyph to path data for use in scheme (was: accidentals for just intonation)
Date:	Sat, 12 Dec 2015 12:16:38 -0500