Saving SVG data to Web SQL

svg design tool

My comp got hit a few days ago with a nasty virus — despite BitDefender, which I thought was invulnerable. This prevented me from being able to work on XVG for almost 5 days.

It’s all fixed now, and nothing bad happened other than having to pay Office Depot to get rid of this malware, which was disguising itself as a Mfehidk.sys file.

The $128 I had to pay for a year’s service contract to Office Depot was made more palatable with a free upgrade to Windows 10.  I had to manually get rid of all the annoying crapware that came with the installation, go through all the time-consuming and massive security updates, as well as optimize various settings.

But in the end it was worth it.

What choice did I have? After all, my comp was unusable.

XVG now runs really fast on my Intel Core i5 processor under Windows 10, and looks really cool on my crisp 1920×1080 HP monitor.

The big news with XVG is that it can now store SVG coordinate info in browsers that (still) support Web SQL.

It was a no brainer to go with Web SQL, as IndexedDB and Dexie.js are ridiculously complicated — considering the simplicity of what I was trying to do.

I know SQL databases really well, and it was pleasure having the DB do some of the heavy lifting for me.  Declarative languages are always a pleasure to work with, and more efficient than vanilla JS.

Ignoring (for now) pagination,* there was only one tricky thing: how to refresh my HTML table so that it stays in sync with the browser’s db — instead of duplicating rows from previous SVG saves in a given session.

Now all I have to do is write a function that outputs SVG code based on this saved data, and I will be have a neat little tool that designers can use to save their geometric masterpieces.

You can have a peek at this facility in the snapshot below.

SVG design tool

* pagination of html tables using JS can be very complex, let alone when trying to do so using deeply asynchronous NOSQL engines such as IndexedDB for persistence . One of the beauties of using SQLITE (which is what Web SQL employs as its storage engine) is having the ability to leverage its ROW_NUMBER function.

This makes implementing pagination essentially a trivial exercise. Only FF among the major browsers does not support Web SQL.

Pity, as that was extremely short sighted by certain individuals ten years ago who are probably not even active on the W3C anymore. As I’ve mentioned in an earlier post, I shall look into implementing DENO -> SQLITE proper in some future version of XVG, perhaps as some sort of premium functionality.

Lastly, saving to XVGdb is now possible only by clicking on individual shape elements, one by one.  The <Edit->Select> function will allow designers to save groups of shape elements in a single go.