I am using Adobe Illustrator CS4; I have an ai file that displays correctly, I convert to an svg file that also displays correctly in Illustrator. Then I load it up to a web site and the flat symbol on the 4th graphic down does not position correctly in Chrome or Firefox: https://chordsandguitar.com/glossary-3.svg

This is the illustrator file: https://chordsandguitar.com/glossary-3.ai

I am at a loss to explain this, thank you.


  • Most of the first graphic, 'diatonic chords', doesn't line up either. The sharps are crashing into the line above, the roots duck up & down and the minors change size. The diminisheds seem to be a bit out on their own too. i.sstatic.net/Xip5y.png
    – Tetsujin
    Commented Jan 3, 2023 at 17:09
  • Yup, it's a mess.
    – Jaco
    Commented Jan 3, 2023 at 18:24
  • Might try outlining the type.
    – Scott
    Commented Jan 3, 2023 at 21:58
  • To tidy up your layout, you could use a font that has actual flat and sharp symbols. Something such as DejaVu Sans. It even has some little o symbols which could be used for diminished chords. You could use superscript to alter their position, so that each chord can be written all in one line of text.
    – Billy Kerr
    Commented Jan 4, 2023 at 0:37
  • Thanks Billy, I'm not sure if all this is available in Ill. CS4 but I will give it a shot and report.
    – Jaco
    Commented Jan 4, 2023 at 2:18

1 Answer 1


These flat symbols are very small in your original, and I suspect the default Save As SVG settings are rounding the x and y coordinates causing small rounding errors affecting the precision. You could try increasing the number of decimal places in the Save as SVG dialog to improve the precision. Set it to 3 or 4, and check the saved SVG.

enter image description here

I also notice the layout in the chord chart is a bit messy.

You could use a font that has actual sharps and flats. Something like DejaVu Sans for example. Then you can type the chords in just one line. In fact, you could even type the whole lot in one text block, and use tabs as separators. And doing it this way could also solve the problem with the positioning.

An example [see below]

The text at the top with the X at the beginning is what I created first. It's basically an X with the flat, sharp, and diminished symbols set to superscript, same with the 7 at the end. I set the lower-case m to a smaller font size than the X.

I copied and pasted this multiple times with tabs between them, then edited the tab positions. Finally I edited and deleted the parts for each chord, and set the fill of alternate lines to green.

enter image description here

  • Billy, thank you for these excellent suggestions. I have tried increasing the decimal precision of the svg conversion but this still left some flat symbol out of kilter. So I added a previous suggestion to outline the text, I outlined the text on the same line as the flats and this gives a pretty good result. For now I will stay with this but will experiment with all these new suggestions.
    – Jaco
    Commented Jan 6, 2023 at 11:38
  • Oooops, hit the enter button. Thanks everyone.
    – Jaco
    Commented Jan 6, 2023 at 11:39
  • I have another long time interest in pump systems and it seems to me that the musical layout would be equally useful for pumps. The problem now is the symbol font, it doesn't carry over in the svg file to the browser
    – Jaco
    Commented Jan 6, 2023 at 16:48
  • Woops, hit the enter button again...
    – Jaco
    Commented Jan 6, 2023 at 16:48
  • The files are here: pumpfundamentals.com/pump%20system%20info.svg pumpfundamentals.com/pump%20system%20info.ai the Greek letter gamma which is drawn in ai with the symbol font does not display in the browser, is there a work around? I suppose I could draw it in ai.
    – Jaco
    Commented Jan 6, 2023 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.