Writing SVG files back to disk

If you have been around SVG, XML, browsers, and computer graphics for a while, you may have noticed an upsetting dichotomy:

For SVG, browsers support DOM and JavaScript. Pretty well by now, in 2013. Browsers aren’t written in JavaScript, but they can run JavaScript.

SVG editors, however, such as Inkscape, Adobe Illustrator, etc., are written in anything but JavaScript. There may be performance reasons, or a least there may have been performance reasons. SVG editors, for all practical purposes, cannot run JavaScript.

Other people’s reasons aside, think about yourself, your own brains, or your own money: Can you, do you want to, or can you afford to learn more than one programming language? For doing the same thing? For manipulating SVG? One programming language for coding in the editor, another programming language for coding in the browser? Write the same functions or methods twice?

Some years back, software developers often were a bit abrasive. Some opined I was on the soft side, trying to make software developers’ work easier. In fact though, I wanted to get a lot done. Result oriented.

For what I wanted to get done this time, one programming language for manipulating SVG was just the right number of programming languages. One. 1.

With Firefox, Chrome, Safari, and Internet Explorer 9 supporting JavaScript for SVG, on a number of operating systems, JavaScript was much more attractive than any other choice.

But, if using browsers as platform to manipulate SVG, browsers did not trivially let me write back to disk the result of manipulating SVG files.

Why would I want to write back to a file? I did not want to depend on a server. Some documents still are meant to be on the disk right in front of the person working with it. I am not alone: While some entities are pushing “storing everything on a server”, with the most modern and popular version control system, Git, what gets developers excited is the ability to work off the network (often described as “on an airplane”), which means disconnected from a server.

Hence I wrote the Save Back to File from DOM add-on for Firefox. It is open sourced and it is free of charge.

There are some simple example files, for showing off writing back to disk (must copy to your disk first), which don’t use Adj. Don’t get this wrong, I am for people using Adj. We’ve provided those simple example files solely to focus on the functionality of this add-on.

I would like to see and use a similar extension for Chrome. Written by somebody else but myself, for a change, please. Not to depend on a single browser for authoring. What if the next version of Firefox has broken features relating to SVG? For now, font metrics appears to be a little better in Chrome than in Firefox. That said, I do appreciate Mozilla’s independence maybe a little more than Google’s advertising revenue fueled interests. Multiple suppliers often are good for the user. But I digress.

Did I mention you could use the Save Back to File from DOM add-on for Firefox for various projects? Get a head start in making a browser-based SVG editor? Allowing you to focus on interactivity, for example, instead of worrying how to write back to disk.

And if you’re making a browser-based SVG editor, please build in support for Adj.

Meanwhile, the Save Back to File from DOM add-on for Firefox is being used as intended in a workflow with and for Adj.

2 Responses to Writing SVG files back to disk

  1. Des says:

    Heading for very wide in-browser javascript usage : take a look at the open-source in-browser “svg-edit”, which is about to get used for wikipedia svg drawing. Or perhaps you are already targeting work such as this, with your Firefox add-on?

    • leosbog says:

      Thank you for the pointer.

      Already looking at SVG-edit https://groups.google.com/d/msg/svg-edit/wGo4DkT1en4/4RgVs8EcaN0J As commented there, needs some work before being viable.

      What perplexes me is when doing Save Image then SVG-edit opens the document in another tab, but doesn’t directly write to disk. Seen in SVG-edit 2.6 in Firefox but also other browsers, for file: URLs. Maybe SVG-edit could use (some of) my code?

      I am trying to stay focused on Adj, do my part right.

      I think the debuggers in Firefox (Firebug) and Chrome are starting to get so good in their HTML / Elements view, a few more improvements and it could become tempting using them as editors. This add-on could work with that.

      I’d like an equivalent Chrome extension.

      For real work with Adj for now I am doing round trips between an XML editor and Firefox.

      Just found out: Authoring in the browser is becoming a topic again. http://paulrouget.com/e/devtoolsnext/ explores “let the user write code directly from Firefox”.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: