Print This Post Print This Post

Guitar Chord Diagrams in SVG? – Part 1

Caveat: The chord shapes defined in SVG on this post may not show in certain browsers.
The browsers which correctly render SVG I have tried are: Google Chrome 14.0.835.202 m, and Mozilla Firefox 7.0.1. Internet Explorer 8 does not display SVG correctly.

Update: 13th October 2011 & 17th June 2012
There are now 2nd and 3rd parts to this topic. The following links can be accessed for easy browsing across all posts.

Chords used in: ‘The Sea’, by Sandy Denny. Tune guitar DADF#AD and capo on 2nd fret, effectively playing in the key of E. the Time Signature is 6/8.
Emaj E/D# A9 D6/E B7sus4
F#m7 F#7 G6 Fmaj7 Emaj

Yeah. Doesn’t look too bad eh? In fact producing the above was relatively trivial, and could be made even more so with a little automation thrown in – but I’ll come to that later. (see paragraph at foot of post)

In my Songs For Broken Voices series, I’ve tended to use (steal) chord shapes from other sources, and since these have been generally of the GIFF, PNG, BMP variety, have had no problem incorporating these into my OpenOffice word-processor documents, prior to generating the PDF files.

This is great if the chord shapes I want are available, but inevitably there are those cases when they are not. I decided to bite the bullet and define a format of my own, onto which I could project any shapes required. I wanted these to be scalable, so some form of metafile would be appropriate, and being addicted to bleeding-edge, decided to use Scalable Vector Graphics, or SVG. Before going on to implement a test case, I assured myself that a filter to import these files was available for Openoffice, and information on the Web assured me there was.

Now mistake one – actually believing this lie, instead of checking it. Yes, what I should have done, was downloaded the plug-in, applied it and attempted to import an existing SVG file – but I didn’t. I went on and defined a chord shape format, and an example (for E/D# in a capoed open ‘D’ tuning) is given below:


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="75" >
   <!-- For 'The Sea' by Sandy Denny -->
  <!-- Chord name -->
   <text x="10" y="8" font-size="10" fill="red">E/D#</text>

  <!-- fret start position drawn as nut -->
  <text x="60" y="24" fill="black" font-size="12" font-style="italic">2fr</text>

  <!-- open strings as follows: -->
  <text x="3" y="20" fill="black" font-size="12" >o</text>
    <text x="22" y="20" fill="black" font-size="12" >o</text>
   <text x="42" y="20" fill="black" font-size="12" >o</text>
  <text x="51" y="20" fill="black" font-size="12" >o</text>

   <!-- finger positions -->
  <circle cx="15" cy="57" r="2" stroke="black" stroke-width="1" fill="black"/>
  <circle cx="35" cy="47" r="2" stroke="black" stroke-width="1" fill="black"/>

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

  <!-- frets -->
  <line x1="5" y1="32" x2="55" y2="32" style="stroke:rgb(0,0,0);stroke-width:0.2" />
  <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 -->
  <line x1="5"  y1="22" x2="5"  y2="72" style="stroke:rgb(0,0,0);stroke-width:0.2" />
  <line x1="15" y1="22" x2="15" y2="72" style="stroke:rgb(0,0,0);stroke-width:0.2" />
  <line x1="25" y1="22" x2="25" y2="72" style="stroke:rgb(0,0,0);stroke-width:0.2" />
  <line x1="35" y1="22" x2="35" y2="72" style="stroke:rgb(0,0,0);stroke-width:0.2" />
  <line x1="45" y1="22" x2="45" y2="72" style="stroke:rgb(0,0,0);stroke-width:0.2" />
  <line x1="55" y1="22" x2="55" y2="72" style="stroke:rgb(0,0,0);stroke-width:0.2" />

</svg>


If you right-click your mouse on one of the chord shapes in the table above, and select ‘Save As’, you will see that the image is actually a file, and in the above example this would be: ‘EovDsharp.svg’. So the code for each chord resides in a simple text file, with an .svg extension, and is embedded in the web page table with ‘img src’ tag as follows:


<td><img src="http://joebrown.org.uk/Applications/TransChord/EovDsharp.svg" alt="E/D#" /></td>

So far so good. And WordPress is quite happy to accept and reproduce the diagram correctly, although your browser may not – hence my caveat at the top of this post.
Having defined a chord in SVG format, I then set about attempting to import it and use it in OpenOffice – and failed miserably. Even after installation of the ‘extension’, the SVG file extension doesn’t show up in the File filter choices. In fact, the only way to get my chord diagram into Openoffice was to convert it to a bitmap, either by first importing the SVG file into OpenOffice Draw, then re-exporting it, or by using a tool based on Batik

Considering that the OpenOffice ODT file is just mostly xml anyway, this is a great disappointment. The final result (check out SFBV – The Sea) are bitmaps which fail miserably in respect to clarity, compared with the true-rendered SVG ones above.

Well of course I could simply abandon the presentation of the finished songsheet in PDF, but I am loathe to do this. PDF readers are ubiquitous, and a standard form for SFBV, makes it easy for downloaders of these songsheets, of which there are many, to create paper copies which don’t vary in presentation in the way a browser-dependent format would. In fact the original concept of SFBV, was based on a personal desire to rid myself of the grotesquely disparate collection of raggy, dog-chewed scraps of paper originally holding copies of these songs in a myriad of formats.

As an example of providing a song and chords using just the web page, please see below. Formatting the song/chords combination is tedious and boring, because HTML’s default response is to squash as much ‘unwanted’ space out of content as possible – a legacy of limited bandwidth we still live with. Take a look at the source for the stuff below, and you will see I’ve had to format the verse snippet as a table, adding in copious numbers of nsbp directives etc.

Conclusions? I think SVG is the future, and at some point OpenOffice will handle SVG natively and correctly. So for the moment, I’ll take the hit of the lack of quality after conversion. Any posts using my SVG-defined chords will in future include some way of downloading these, such as a reference table above.

One final point is with chord names. For a short discussion on tensions regarding naming chords, please see the SFBV – The Sea post.

Emaj E/D# A9 EmajA9Emaj
Do    I ev-er won-der? You don’t know;
D6/E F#m7 EA9 E E/D#
You’ll ne-ver fol-low,           and I’ll______     ne-ver show.                                       D’you see__ the wa-ter
A9 EmajA9 F#m7 G6 F#7
And watch it flow and float an______ emp-ty shell?_ ____                 And you think that I am hi-ding from the

The ‘Joni’ Chord
All well and good, but so far I’ve neatly side-stepped the problem of the totem-pole chord diagram that would result from what I call a Joni-chord – after the outrageously-talented Miss Joni Michell. Taking the classic example of the high ‘E’ chord Joni plays at fret 14, whilst using open ‘D’ tuning and capo on 2nd fret, our chord diagram would look ridiculous, and difficult to format around. The solution I propose is the ‘torn’ fretboard format which might look something like this:
E_14

and adding on as many frets as necessary to complete the chord. The SVG source for this is a little longer, but would still be easy to automate:


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="75" >
   <!-- For 'Chelsea Morning' by Joni Mitchell -->
  <!-- Chord name -->
   <text x="10" y="8" font-size="10" fill="red">E_Joni</text>

  <!-- fret start position drawn as nut -->
  <text x="60" y="24" fill="black" font-size="12" font-style="italic">2fr</text>

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

  <!-- open strings as follows: -->
  <text x="3" y="20" fill="black" font-size="12" >o</text>
    <text x="22" y="20" fill="black" font-size="12" >o</text>
   <text x="42" y="20" fill="black" font-size="12" >o</text>
  <text x="51" y="20" fill="black" font-size="12" >o</text>

   <!-- finger positions -->
  <circle cx="35" cy="57" r="2" stroke="black" stroke-width="1" fill="black"/>
  <circle cx="55" cy="57" r="2" stroke="black" stroke-width="1" fill="black"/>

  <!-- nut (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" />

  <!-- 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" />

</svg>


Last, but certainly not least, I would like to draw your attention to the excellent work of Tony Pottier, in his paper on: Draw Guitar Chords using PHP. Trivial substitution of PHP GDI calls could be made, so that his code outputs an SVG file instead, similarly formatted to that I have shown above. I’ve already done this, and this is discussed and demonstrated in part 2 of this topic.

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

You must be logged in to post a comment.