From 190ee7e998a54a2bb5fe82f9c79d7acf82e84772 Mon Sep 17 00:00:00 2001
From: Gokul Ramanan Subramanian <gokul2411s@gmail.com>
Date: Sat, 28 Aug 2021 14:43:09 +0100
Subject: [PATCH] Render SVG example properly (#1)

---
 README.md                         |  2 ++
 resources/minor_chord_example.svg | 41 +++++++++++++++++--------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 000810c..c02b810 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # Tool to generate chord and scale shapes for any uniformly fretted instrument for any musical system
 
+<img src="./resources/minor_chord_example.svg">
+
 ## Building
 
 ```
diff --git a/resources/minor_chord_example.svg b/resources/minor_chord_example.svg
index 07c69ed..4476d70 100644
--- a/resources/minor_chord_example.svg
+++ b/resources/minor_chord_example.svg
@@ -1,20 +1,23 @@
-<svg>
-  <line x1="10" y1="20" x2="70" y2="20" style="stroke:rgb(190,190,190);stroke-width:1"/>
-  <line x1="10" y1="30" x2="70" y2="30" style="stroke:rgb(190,190,190);stroke-width:1"/>
-  <line x1="10" y1="40" x2="70" y2="40" style="stroke:rgb(190,190,190);stroke-width:1"/>
-  <line x1="10" y1="50" x2="70" y2="50" style="stroke:rgb(190,190,190);stroke-width:1"/>
-  <line x1="10" y1="60" x2="70" y2="60" style="stroke:rgb(190,190,190);stroke-width:1"/>
-  <line x1="10" y1="70" x2="70" y2="70" style="stroke:rgb(190,190,190);stroke-width:1"/>
-  <line x1="10" y1="20" x2="10" y2="70" style="stroke:rgb(184,115,51);stroke-width:3"/>
-  <line x1="25" y1="20" x2="25" y2="70" style="stroke:rgb(184,115,51);stroke-width:2"/>
-  <line x1="40" y1="20" x2="40" y2="70" style="stroke:rgb(184,115,51);stroke-width:2"/>
-  <line x1="55" y1="20" x2="55" y2="70" style="stroke:rgb(184,115,51);stroke-width:2"/>
-  <line x1="70" y1="20" x2="70" y2="70" style="stroke:rgb(184,115,51);stroke-width:3"/>
-  <text x="62" y="20" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">1</text>
-  <text x="62" y="30" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">5</text>
-  <text x="17" y="40" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">1</text>
-  <text x="62" y="40" textLength="8" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">b3</text>
-  <text x="17" y="50" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">5</text>
-  <text x="32" y="60" textLength="8" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">b3</text>
-  <text x="62" y="70" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">1</text>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 60">
+  <line x1="10" y1="5" x2="70" y2="5" style="stroke:rgb(190,190,190);stroke-width:1"/>
+  <line x1="10" y1="15" x2="70" y2="15" style="stroke:rgb(190,190,190);stroke-width:1"/>
+  <line x1="10" y1="25" x2="70" y2="25" style="stroke:rgb(190,190,190);stroke-width:1"/>
+  <line x1="10" y1="35" x2="70" y2="35" style="stroke:rgb(190,190,190);stroke-width:1"/>
+  <line x1="10" y1="45" x2="70" y2="45" style="stroke:rgb(190,190,190);stroke-width:1"/>
+  <line x1="10" y1="55" x2="70" y2="55" style="stroke:rgb(190,190,190);stroke-width:1"/>
+  <line x1="10" y1="5" x2="10" y2="55" style="stroke:rgb(184,115,51);stroke-width:3"/>
+  <line x1="25" y1="5" x2="25" y2="55" style="stroke:rgb(184,115,51);stroke-width:2"/>
+  <line x1="40" y1="5" x2="40" y2="55" style="stroke:rgb(184,115,51);stroke-width:2"/>
+  <line x1="55" y1="5" x2="55" y2="55" style="stroke:rgb(184,115,51);stroke-width:2"/>
+  <line x1="70" y1="5" x2="70" y2="55" style="stroke:rgb(184,115,51);stroke-width:3"/>
+  <text x="62" y="5" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">1</text>
+  <text x="62" y="15" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">5</text>
+  <text x="17" y="25" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">1</text>
+  <text x="62" y="25" textLength="8" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">b3</text>
+  <text x="17" y="35" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">5</text>
+  <text x="32" y="45" textLength="8" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">b3</text>
+  <text x="62" y="55" textLength="4" lengthAdjust="spacingAndGlyphs" alignment-baseline="middle" style="fill:rgb(71,140,204);text-anchor:middle;font-size:8">1</text>
 </svg>