This directory contains a few different renditions of a fretboard chart for a 6-string guitar in the conventional E2 A2 D3 G3 B3 E4 tuning.
This is a cleaned-up, stand-alone variation of the fretboard diagrams generated by this online tool and a more elaborate version found in the FATpick app. You can generate (and export SVGs of) an arbitrary fretboard from that web tool, and do a bunch of more interesting and interactive stuff with the in-app tools, but those SVGs are programmatically generated and include a bunch of extra stuff that supports the interactivity. This version of the SVG template has been manually cleaned-up and lightly documented, so it may be a little easier to work with if your interesting in modifying the diagram in some way.
Here's an inline version of the SVG fretboard template. Use the links below (or just navigate to the files in this directory) to see different versions or to access the full, raw file.
The boxes in the diagram reflect the grid formed by the strings and frets on the neck of a guitar. Each box represents a specific position (string and fret), with the strings laid out horizontally and frets vertically. Each box is marked with the name of the note that is played at that position.
Frets are numbered across the top, with 0 indicating the "open string" position - the note that is played when you pluck the string without pressing down at any of the frets. Inlay symbols (those little dots that mark the third, fifth, seventh frets, etc. that are often embedded in the middle of the fingerboard or along the edge of the neck) are included at the bottom of the chart.
The boxes are also color-coded by note. Every position on the fretboard that generates a given note (or more accurately, pitch class) is filled with the same color. The colors also form a full spectrum, so notes that are similar in pitch are similar in color.
The horizontal lines behind the boxes represent each string of the guitar. The width of each line reflects the gauge (thickness) of the corresponding string. I.e. the fattest (low E) string is at the bottom of the chart, and the thin high E string is at the top.
The vertical line between the 0th and 1st fret indicates the "nut" - the slotted ledge that holds the strings at the top of the neck (and marks the transition from the fingerboard to the headstock).
Note that - as is conventional - the fretboard diagram is oriented such that the body of the guitar would be found at the right side of the digram (i.e,. fret 19 is the closest to the bridge) and the headstock would on the left (i.e, fret 1 is the closest to the nut). This perspective is essentially "upside down" - thickest string at the bottom, thinnest string at the top - if you were facing a guitar head-on as implied by the diagram. That may seem odd at first but it makes a lot more sense from the perspective of someone playing the guitar (when you're looking down at the strings rather than across the room at them).
Currently this directory contains a single chart - a 6-string in the standard EADGBe tuning - in a few formats for your convenience:
-
guitar-fretboard-EADGBe.svg- an SVG representation of the fretboard that can be easily modified by hand or via a tool like Inkscape, that also includes some minor interactive features when viewed via a web browser. (More about this file below) -
guitar-fretboard-EADGBe-us-letter.pdf- a PDF version of that chart, suitable for printing or digital reference, formatted for US-Letter-sized (8.5" x 11") paper. -
guitar-fretboard-EADGBe-us-legal.pdf- as above, but formatted for a Legal-sized page (14" x 8.5") -
guitar-fretboard-EADGBe-us-legal.pdf- as above, but formatted for a A4-sized (21cm x 29.7cm)
Each of those PDFs is in a landscape orientation.
Time permitting I'll add more charts to this repo in the future, but you can also use this fretboard diagram generator to create similar charts for an arbitrary instrument or tuning. (That's the original source from which these files were derived; more on that below.)
(This is a placeholder section that's yet to be filled in but I'd like to share some notes on working with the SVG implementation here. It's not really that complicated though, if you know a bit of SVG and CSS it's pretty straightforward.)