Nearly a year ago I thought it would be a nice idea to incorporate scalable vector graphics into the site … shouldn’t take too long, I thought …
… nearly a year later I think that development is finished.
Not that it’s taken a year’s worth of work – the development has been very sporadic – but I have tested extensively and each time I change the code there are 350,000 tunes to test it out on!
It has involved a rewrite of the code that processes the abc files (now more robust) and a mechanism for users to switch from one viewing one media type to another, seamlessly – so you can either see the scalable vector graphics (SVG) version or the portable network graphics (PNG) version. (This will also allow the possibility to introduce different midi players at some point in the future.)
So why bother?
Well, without going into too many technical details using SVG means that the tune scores (the dots) are actually embedded in the html code for the page, rather than being downloaded as a separate image file.
As a consequence the pages should load faster: for example, on a typical search results page there will be 10 tunes – each one will have a tune score and a midi player displayed. Using PNG image files means that your web browser would have to make 21 requests to display the page – 1 for the page itself, 10 for the PNG files and 10 for the midi files. Using embedded SVG image reduces this to 11 requests – 1 for the page and 10 for the midi files.
The only downside is that older browsers don’t always support SVG. Hence the facility to switch between the two.
And then, when I first released it back in December, I found out that some recent versions of Safari (which most Macs use) and Chrome didn’t always display it properly (the note heads were missing).
However, I finally tracked this down last month and fixed it a week ago.
Technical note: for anyone else having SVG display problems you should be aware that <use> is not necessarily a self-closing element. Lots of the SVG tutorials show it as one, so it looks like you can do <use xlink:something … />, but that’s not what’s written in the SVG schema so you have to do <use xlink:something … ></use> instead to get it displayed robustly across all browsers that support SVG.
Anyway, hope it works for you – let me know if not.
Chris
Tags: development, scalable vector graphics, site