Print This Post Print This Post

Guitar Chord Diagrams in SVG? – Part 2

Updated 21st October 2011 & 17th June 2012. Chord engine now includes scaling, and SVG chords can now be embedded directly in OpenOffice.Org Writer documents (see part 3)

This will be the concluding article on drawing Guitar Chord Diagrams using SVG. Any further material (yes, there will be more!) I generate will be added to this, or the previous post on the same subject. If you’ve come across this post, without first reading part 1, a better understanding of what I’m trying to achieve here will be gained by reading the 1st post first.

Writing in full, or by copy/paste whole shedloads of xml to define chords is a task, just the thought of which would make anyone reach for the paracetamol. So I’ve written a small automation tool. Yes, there is some typing, but a lot less than you might think, so perhaps I should introduce that first, and if you find even that tedious to contemplate, then I’m happy for you to move on.

I’ve defined a PHP class which takes a parameter list as a constructor string, and this includes everything I believe we need to generate an SVG Guitar Chord Diagram file, saved onto local disk.

First I’ll show the PHP statement needed, the diagram it produces, then I’ll dissect each part for you.

$c = new chord(array(0, 0, 0, 14, 0, 14, 2,   12,  'R',   'E_joni',   "For 'Chelsea Morning' by Joni Mitchell", "E2_14_C.svg"));
Now look at the first 6 numbers after the ‘array(’ part of the statement. These read respectively: 0, 0, 0, 14, 0, 14 and represent the sort of notation often found in songsheets for guitars, inasmuch as they indicate, from left to right the fretted positions on the strings 6,5,4,3,2,1. (6 being the FAT ‘E’ string)
The next number represents the fret behind which a capo will be put, if the number is non-zero. In our case above this is 2, so a capo is needed to play this chord. The next number is in an indication of where I would like the ‘interesting’ part of the fretboard to start, and in this case there’s nothing until we get to fret 14, so I’ve set this value to 12, effectively ‘tearing out’ a section of the fretboard, so as to minimalise the footprint of the diagram.

The next parameter is an ‘R’, indicating that I wanted the chord drawn for a right-handed player. A left-handed player would indicate and ‘L’ here. and the diagram would be drawn the way he would play it, so let’s try that.

$c = new chord(array(0, 0, 0, 14, 0, 14, 2,   12,  'L',   'E_joni',   "For 'Chelsea Morning' by Joni Mitchell", "E2_14_C_L.svg"));
Note that I also changed the last name in the parameter array, this being the filename I wanted to use for the SVG file produced. Note also, that there is no need to reverse the sequence of strings – the code does that automatically. Moving back to the parameter list, the text ‘E_joni’ will appear in red as the ‘name’ of the chord., the string ‘For Chelsea morning…’ is simply a comment. This should probably mention that this Joni-chord uses an open ‘D’ tuning DADF#AD, but I haven’t bothered on this occaision. Well that’s the parameter list, so I’ll now give you a taster of a selection of chord shapes and how these are made.

$c = new chord(array(0, 0, 0, 14, 0, 14, 2,   0,  'L',   'E_joni',   "For 'Chelsea Morning' by Joni Mitchell", "E2_14.svg"));
Our Joni-chord without cutting a chunk out of the fretboard, but with a capo at fret 2. I call these totem-pole chords, I don’t/won’t use them, but the engine will manufacture them if you wish.

$c = new chord(array(0, 2, 2, 'x', 'x', 'x', 0,   0,  'R',   'E5',   "First posn E5 power chord", "E5pow_1.svg"));
An E5 power chord.

$c = new chord(array(0, 2, 2, 'x', 'x', 'x', 0,   0,  'L',   'E5',   "First posn E5 power chord", "E5pow_1_L.svg"));
And the E5 power chord for would-be Jimis.

$c = new chord(array(1, 3, 3, 2, 1, 1,  0,   0,  'R',   'F',   "F first position (usually barre chord)", "F_1.svg"));
A 1st position F, the barre symbol is produced automatically at present.

$c = new chord(array(5, 7, 7, 6, 5, 5,  2,   0,  'R',   'A',   "A barre chord", "A_1_C2.svg"));
A barred ‘A’, with capo on 2nd fret.

$c = new chord(array(7, 9, 9, 8, 7, 7,  0,   6,  'R',   'B',   "B barre chord", "B_1_cut6.svg"));
A barred ‘B’, with fretboard cut at 6th fret.

Left-handed guitar chords.

Pick up the square steel peg, and offer it to the round hole in the thick steel girder, then with a good 5lb hammer, mercilessly beat the peg into the hole. Hear the peg squeal in protest with each stroke, watch in fascination the four tapering shards curling away from it’s once-pristine corners..

Have you been left out? Do all you get are left-overs?

In these enlightened times, at the dinner-table, we don’t hit our children’s knuckles with our knife, when they pick up their knife in their left hand – do we?
We don’t chant out the same boring f***ing mantra ‘they never made anything for left-handed folk Joe’, every time they use a screwdriver in their left hand – do we?

Well.. I hope not. Because in many respects, lefties have had a bad press almost as long as gay people.
The word sinister meaning threatening, or portending evil, comes from the Latin – in modern Italian sinistro means left.
Also gauche meaning lacking social grace, comes from the French gauche meaning left.

Have I nothing left to say about this subject? Plenty, but suffice to say this. The chord generation system caters equally well for left-handed players, and can be used in one of two ways. Re-use the plethora of existing published chord formats such as X-0-2–2-0-0 ( reading left to right strings 6 to 1) and add an ‘L’ (or ‘l’) in the hand-indication place in the chord parameter list. (see the 2nd E_joni chord near the top of the tables above)
Or add your own (reading from the left) sequence, and use ‘R’ in the hand indicator.

Finally, would Hendrix have been that good if he hadn’t been a leftie obliged to go through the same indignity as my steel peg? Well probably – just a tiny bit different, and certainly not the inspiration to thousands of left-handed kids who decide to learn the guitar in what is still an ‘Alice’ world, where everything is literally the mirror-image of what they would prefer.

A Sample auto-generated SVG Guitar Diagram file.
It’s probably worth showing an SVG file produced by the automation tool, and comparing it with my handmade versions posted in part 1. Everything you see below in blue, has been produced by the engine from the short statement above for the barred B chord cut at fret 6.

<svg xmlns='' version='1.1' width='80' height='75' >
<!-- This file was auto-produced using SVG Chord generator V1.00 (C) 2011 -->
<!-- On UTC: Wednesday 12th of October 2011 03:49:18 PM -->
<!-- All rights of the author are reserved -->

<!-- B barre chord -->

<!-- Chord name -->
<text x='10' y='8' font-size='10' fill='red'>B</text>

<!-- fret start position -->
<text x='60' y='24' font-size='12' fill='black' font-style='italic'></text>

<!-- open/unplayed strings as follows (may be empty) : -->

<!-- finger positions -->
<circle cx='5' cy='47' r='2' stroke='black' stroke-width='1' fill='black'/>
<circle cx='15' cy='67' r='2' stroke='black' stroke-width='1' fill='black'/>
<circle cx='25' cy='67' r='2' stroke='black' stroke-width='1' fill='black'/>
<circle cx='35' cy='57' r='2' stroke='black' stroke-width='1' fill='black'/>
<circle cx='45' cy='47' r='2' stroke='black' stroke-width='1' fill='black'/>
<circle cx='55' cy='47' r='2' stroke='black' stroke-width='1' fill='black'/>

<!-- Barre chord path statement -->
<path d='M 5 47 a 15 5 0 1,1 50 0' style='fill:none; stroke:black; stroke-width:1'/>

<!-- nut or capo position (slightly thicker line) -->
<line x1='5' y1='22' x2='55' y2='22' style='stroke:rgb(0,0,0);stroke-width:0.5' />

<!-- define cut -->
<polyline points='5,32 15,27 25,32 35,27 45,32 55,27 ' style='fill:none; stroke:rgb(0,0,0);stroke-width:0.2' />
<polyline points='5,37 15,32 25,37 35,32 45,37 55,32 ' style='fill:none; stroke:rgb(0,0,0);stroke-width:0.2' />

<!-- fret position up cut neck -->
<text x='60' y='54' fill='black' font-size='12' font-style='italic'>7fr</text>

<!-- frets -->
<line x1='5' y1='42' x2='55' y2='42' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='5' y1='52' x2='55' y2='52' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='5' y1='62' x2='55' y2='62' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='5' y1='72' x2='55' y2='72' style='stroke:rgb(0,0,0);stroke-width:0.2' />

<!-- strings (to cut) -->
<line x1='5'  y1='22' x2='5'  y2='32' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='15'  y1='22' x2='15'  y2='27' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='25'  y1='22' x2='25'  y2='32' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='35'  y1='22' x2='35'  y2='27' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='45'  y1='22' x2='45'  y2='32' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='55'  y1='22' x2='55'  y2='27' style='stroke:rgb(0,0,0);stroke-width:0.2' />

<!-- strings (from cut) -->
<line x1='5'  y1='37' x2='5'  y2='72' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='15'  y1='32' x2='15'  y2='72' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='25'  y1='37' x2='25'  y2='72' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='35'  y1='32' x2='35'  y2='72' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='45'  y1='37' x2='45'  y2='72' style='stroke:rgb(0,0,0);stroke-width:0.2' />
<line x1='55'  y1='32' x2='55'  y2='72' style='stroke:rgb(0,0,0);stroke-width:0.2' />


I’ve written two PHP files, the first of which is the chord-generator engine, the second of which invokes this engine to produce sets of chords. The second tool produces zipped copies of the SVG files produced together with a demonstration HTML file, to display the results of your efforts – an example is linked below:

I should mention in passing here, that I have no early intentions of hosting a chord-generation page, using this engine. Not to say that this might not happen in the future – just not yet.
Currently, I’m running a local Apache server on my home PC, together with PHP installed, and all of the code was developed on this. If you wish to take this route, then information is supplied elsewhere on the Web on how to set this up – it is relatively simple.

I’m not going to discuss the PHP source here, such a discussion would probably bore the pants off most people. But would-be users can ignore the engine and simply use it in the manner I have exemplified in the second tool.
The tools are as follows: SVGChordV2.php – the chord-generator engine. This is generally called from another file in this case: SVGChordTest.php, which also produces a web page (linked above) and 3 zip files of the chords produced.

Converting and/or editing the SVG Chord Diagrams.
I confess to still having two unfinished tasks, before I consider this mini-odyssey complete. The first is as mentioned in the 1st part of this article, that of simply being able to embed SVG straight into a SFBV word processor template, and the latter to take automation of the chords to it’s logical conclusion by simply throwing names at it.

At this point I could rave and rant about Microsoft’s stubborn stance on not supporting SVG – but they are already paying the price, with a massive drop in the popularity of their browser, which once dominated, this is in no small way because of their resolute stubbornness to support the open standard. However, I feel this had rubbed off on me-too-alike products such as OpenOffice, who don’t yet support an SVG renderer either. Yes! Now it does! See part 3 (updated 17th June 2012 by Joe.)

There is one way of producing PDF which supports SVG – obvious really, it’s Acrobat, but it costs money! Alternatives can be found and there are several products on the market the most noteworthy of which is Inkscape. Although this is primarily an SVG drawing package, it will allow the import of PDF containing text, and allow the insertion of the SVG diagrams. The drawback is that space must be left in the original document (produced for example in OpenOffice Word) for the chords to be inserted. It’s fiddly, and I don’t like fiddly.
On the bright side, Inkscape lets you import SVG and will export PNG files of very good quality. There is also a batch machine ‘InkscapeBatch’ which will take multiple files and do the conversion to PNG unattended.

Further, and finally. Editing one of the SVG Chord Diagrams can be done very easily in Inkscape. and an example of one I reduced in size just with the sizing tool, then exported a PNG file as well is given below.
1st the ’shrunk SVG image file: ( which I would have shown you but Inkscape insisted on changing the svg dimensions, so it occupies a side of A4 in space, so I’ve provided a link:
And now it’s PNG cousin:

This is nice, still quite readable at about half-size, even though it’s been converted.
Inkscape also saw fit to remove all my header information etc., so that the file now looks as if it’s been produced by them. Further, I noticed the batch conversion tool accesses their servers repeatedly, so no privacy there then.

Scaling in version V2.1
The latest version of the chord diagram engine contains a simple-to-use scale facility – observe the following:

The diagrams were produced using something similar to that given below:

* Demonstrate scaled SVG chord diagrams using SVGChord V2.1
* JWB 14th Oct 2011
include('SVGChordV2_1.php');  // the chord engine
$scpc = 60;
for ($i = 0; $i < 5; $i++)
	$c = new chord(array(7, 9, 9, 8, 7, 7,  0,   6,  'R',   'B',   "B barre chord", "B_1_cut6_{$scpc}.svg"));
	$scpc += ($i * 10);


Update 21st October 2011: The new SVGChordGen PHP zip now includes V2.1 of the chord generator, which provides simple scaling. This is here:

The (original) zipped PHP files are here:
The 3 zipped chord files I generated with the test program are here:

I batch-converted (to PNG format) both the chords in A and those in E using Inkscape, and these are provided for examination in the following zip files:

Thanks must go to Tony Pottier for inspiring me to write an SVG variant of his PNG Chord generator, and also to David Walsh, for his zip-creation routines in PHP.

Copy the code below to your web site.
  • Share/Bookmark
PDF    Send article as PDF   

You must be logged in to post a comment.