SVG Tab Display System — Demo

This system generates all tab graphics as inline SVGs — no external image files needed. Every string line, fret number, bend arrow, slide indicator, and vibrato wave is drawn dynamically in the browser.

Random Tab Generator Song Generator Lessons
Demo 1: Clean Notes Basics
e|035X24
B|55X
G|75X17
D|9105X
A|125X
E|1550X
Monospace text equivalent
e|0---3-----------|----------------|5-----------X---24------|
B|--------5-------|----------------|5-----------X-----------|
G|------------7---|----------------|5-----------X-------17--|
D|----------------|9---10----------|----5-------X-----------|
A|----------------|--------12------|----5-------X-----------|
E|----------------|------------15--|----5---0---X-----------|
Demo 2: Bends & Vibrato Techniques
full½Rvibvibfullvib½vib
e|791210
B|810
G|97
D|75
A|7
E|5
Monospace text equivalent
e|7b--9-----------|12b-10~---------|----------------|
B|--------8b--10--|----------------|----------------|
G|----------------|--------9~--7---|----------------|
D|----------------|----------------|7b--5~----------|
A|----------------|----------------|--------7b------|
E|----------------|----------------|------------5~--|
Demo 3: Slides & Hammer-ons / Pull-offs Legato
HHPPHHPP
e|5775
B|5775
G|91212141412
D|
A|
E|
Monospace text equivalent
e|5/--7/--7\--5\--|----------------|------------------------|
B|----------------|5h--7h--7p--5p--|------------------------|
G|----------------|----------------|9/--12/-12h-14h-14p-12p-|
D|----------------|----------------|------------------------|
A|----------------|----------------|------------------------|
E|----------------|----------------|------------------------|
Demo 4: Random — E Minor Pentatonic Generated
fullP½½½P½½
e|3
B|3
G|000022
D|00200
A|2
E|33
Monospace text equivalent
e|----------------|--------------------3b----------|----------------|
B|--------3p------|--------------------------------|----------------|
G|----0b----------|0\--0\------0/--2/--------------|2b--------------|
D|----------------|--------0---------------0b------|----2\--0\--0b--|
A|2---------------|--------------------------------|----------------|
E|------------3b--|----------------------------3p--|----------------|
Technique Legend Reference
7
Fret Number
Gold number on string line
X
Muted Note (X)
Dead note / ghost note
Bar Line
Measure separator
full
Full Bend
Green arrow up, whole step
½
Half Bend
Green arrow up, half step
R
Bend & Release
Up then back down
vib
Vibrato
Wavy gold line
H
Hammer-on
Purple arc with H
P
Pull-off
Pink arc with P
5
Slide Up
Blue diagonal line ascending
7
Slide Down
Blue diagonal line descending
Empty String
Continuous horizontal line
How It Works Architecture

Zero external images. The old system required hundreds of pre-rendered PNG files — one for each fret number (tab-line5.png, tab-line12.png), plus separate images for techniques (bendflower.png, vibrato.png, etc.). Each one was an HTTP request and a fixed-size raster graphic that couldn’t scale.


Inline SVGs replace all of them. Each tab cell is rendered by a PHP function that returns a minimal inline <svg> string. String lines connect seamlessly across cells. Fret numbers sit on the line with a dark background mask. Techniques (bends, slides, vibrato, hammer-ons, pull-offs) are drawn with SVG paths, arcs, and text labels — all scalable, all colored, all zero-latency.


The rendering pipeline:

  1. Tab data is expressed as a simple PHP array (beat columns with string/fret/technique info)
  2. renderTab() iterates the data and builds an HTML <table>
  3. Each cell calls svgCell(), which delegates to the appropriate SVG renderer
  4. The SVG markup is emitted inline — no <img> tags, no file I/O

Benefits: Zero HTTP requests for graphics. Resolution-independent (scales perfectly on retina displays). Technique colors are easily themed. The entire rendering system is ~400 lines of PHP with no dependencies.