Skip to the Main Content

Note:These pages make extensive use of the latest XHTML and CSS Standards. They ought to look great in any standards-compliant modern browser. Unfortunately, they will probably look horrible in older browsers, like Netscape 4.x and IE 4.x. Moreover, many posts use MathML, which is, currently only supported in Mozilla. My best suggestion (and you will thank me when surfing an ever-increasing number of sites on the web which have been crafted to use the new standards) is to upgrade to the latest version of your browser. If that's not possible, consider moving to the Standards-compliant and open-source Mozilla browser.

February 12, 2010

WYSIWYG SVG Editing In Instiki

In my quest to make Instiki the best damned piece of Math/Physics Wiki software in existence, I have been somewhat frustrated by the fact that while creating equations is easy (thanks to itex2MML), creating diagrams has not been. Yes, you can include SVG graphics, and mix equations and SVG in all kinds of interesting ways. But creating the SVG graphics required either an external GUI editor, like Adobe Illustrator or Inkscape, or manipulating the raw SVG commands manually (and, depending on the external GUI editor, sometimes both).

Well now, thanks to the great work by Jeff Schiller, Alexis Deveria and their collaborators on the SVG-Edit project, you can create, edit and manipulate inline SVG and mixed MathML/SVG content, right in Instiki.

In the Editor window of Instiki, you can click on “Create SVG graphic” (or select an existing graphic and click on “Edit existing SVG graphic”). Up pops a window like the one below:

(Umh … maybe it’s not obvious, but that’s not a picture. It’s an actual SVG-edit editor window. All the tools (except document-save) work. Go wild!)

You can, of course, use all of the GUI drawing tools, add snippets of MathML (using the foreignObject tool), and saved the result right back to your Instiki wiki.

Alas, you read that last sentence correctly, “MathML”, not “itex”.

If someone, who knows their way around Rails and Ajax, wants to help me rectify that last little lacuna …

(N.B.: Since several have asked, this will eventually be Instiki 0.19. If you’re impatient, grab a current tarball or install from BZR. As an added bonus, this fixes several bugs in 0.18.1. See the installation instructions.)

Update:

I’m now a committer on the SVG-Edit project

Update (2/23/2010):

Now the SVG-Editor sports inline itex-editing (and Instiki is an itex-to-MathML web-service) thanks to a new Rails Metal itex2MML endpoint.
Posted by distler at February 12, 2010 1:55 AM

TrackBack URL for this Entry:   https://golem.ph.utexas.edu/cgi-bin/MT-3.0/dxy-tb.fcgi/2168



16 Comments & 3 Trackbacks

Re: WYSIWYG SVG Editing In Instiki

Very nice! :)

I’ll definitely give it a try when I get a chance. Thanks.

Posted by: Eric on February 12, 2010 2:45 AM | Permalink | Reply to this

Attack of the giant GET?

Our squid/2.7.STABLE3 gives up on the embedded window with:

The following error was encountered:

  • Invalid Request

Some aspect of the HTTP Request is invalid. Possible problems:

  • Missing or unknown request method
  • Missing URL
  • Missing HTTP Identifier (HTTP/1.0)
  • Request is too large
  • Content-Length missing for POST or PUT requests
  • Illegal character in hostname; underscores are not allowed

Its seems like an abnormally large request is on the spot here, the GET includes a base64-encoded svg? I think ~2000bytes is the recommended limit after which some servers/proxies/browsers start to break. Bypassing the proxy works, for the record.

Posted by: Volker on February 12, 2010 5:40 AM | Permalink | Reply to this

Re: Attack of the giant GET?

Right.

For Instiki’s purposes, I intend to replace the data-url with a window.postMessage() call. For the purposes of this demonstration, I suppose I could have loaded the SVG graphic from an external file.

Interesting about Squid. Apparently, it’s even worse than InternetExplorer, in that regard…

Posted by: Jacques Distler on February 12, 2010 7:56 AM | Permalink | PGP Sig | Reply to this

Re: WYSIWYG SVG Editing In Instiki

I am probably missing something, but is there a reason you can’t call SvgCanvas.setSvgString() instead of using the data-url?

Posted by: Jeff Schiller on February 12, 2010 9:46 AM | Permalink | Reply to this

Re: WYSIWYG SVG Editing In Instiki

I’ve adopted your suggestion in Instiki.

For the purposes of this demonstration, I’ve ditched the data-url, in favour of serving a static file (which should fix Volker’s problem).

Posted by: Jacques Distler on February 12, 2010 1:02 PM | Permalink | PGP Sig | Reply to this

Re: WYSIWYG SVG Editing In Instiki

Its working now, as expected.

Posted by: Volker on February 13, 2010 5:38 AM | Permalink | Reply to this

Re: WYSIWYG SVG Editing In Instiki

Wow, that is spectacular. I can’t wait to get this up-and-running.

I’ve got a group of freshman using Instiki as a group lab notebook for their freshman project this term. I think this will be very useful for them as they work through mock-ups of their experiment.

Posted by: Bob McNees on February 12, 2010 2:38 PM | Permalink | Reply to this
Read the post WYSIWYG SVG Editing In Instiki
Weblog: Sam Ruby
Excerpt: Jacques Distler:
Tracked: February 12, 2010 8:37 PM

Re: WYSIWYG SVG Editing In Instiki

Great! Nice addition.

Posted by: Bruce Bartlett on February 21, 2010 6:08 AM | Permalink | Reply to this

Re: WYSIWYG SVG Editing In Instiki

One final thing is that it would be very handy if the raw SVG code be collapsible/expandable when one edits an Instiki page, otherwise it clutters things up, since SVG is not human-reading-friendly.

Posted by: Bruce Bartlett on February 21, 2010 6:29 AM | Permalink | Reply to this
Read the post Social comments and analytics for this post
Weblog: uberVU - social comments
Excerpt: This post was mentioned on Twitter by zeefred: WYSIWYG SVG Editing In Instiki | Musings http://bit.ly/cNlqfo
Tracked: February 23, 2010 6:36 AM
Read the post 3000 and One Things to Think About
Weblog: The n-Category Café
Excerpt: Latest activity on the nLab, on occasion of entry number 3000.
Tracked: February 25, 2010 4:49 PM

Re: WYSIWYG SVG Editing In Instiki

Dear Jacques,

that’s really impressive!

I have a question that is off topic, strictly speaking, but I did not find a better place to ask it (or an answer to it): What IDE do you use to develop Instiki?

I’ve tried to get it running in RadRails (i.e. I imported the source code into an existing rails project in RadRails), but have not succeeded so far (unfortunatly RadRails resp. eclipse won’t tell me what the problem is).

Posted by: Tim van Beek on March 3, 2010 7:43 AM | Permalink | Reply to this

RadRails

I don’t use an IDE, actually.

If there’s something I need to do to make Instiki importable into RadRails, though, please let me know.

Posted by: Jacques Distler on March 3, 2010 7:57 AM | Permalink | PGP Sig | Reply to this

Re: RadRails

If I get it running it should be possible to export it in a format that is exchangable, like e.g. a “team project set”, meaning you can import and export it into resp. from an eclipse workspace without further ado (that’s actually not much more than a zip of the sources enriched with a few files with meta data).

In case I succeed I’ll report back. Offerening such an import together with a link to an well known open source IDE like RadRails (well, at least eclipse is well known) could help to lower the gateway hurdle for other developers, at least I hope so.

Posted by: Tim van Beek on March 3, 2010 9:10 AM | Permalink | Reply to this

Re: RadRails

Offerening such an import together with a link to an well known open source IDE like RadRails (well, at least eclipse is well known) could help to lower the gateway hurdle for other developers, at least I hope so.

That’s not so clear to me.

If pushing updates to the project requires updating the IDE metadata files as well, then it’s not a win. Everybody would have to be using the same IDE; otherwise they would not be able to exchange updates, without their metadata going bad.

Instiki is in BZR (mirrored on GitHub, for an even lower barrier to entry), which means that people interested in hacking on Instiki can ‘publish’ their changes in an IDE-agnostic fashion.

Demanding that people use a particular IDE, if they want to participate, would raise the barrier to entry, rather than lower it.

Still, a set of instructions for working with Instiki in RadRails (or some other IDE) would be most welcome.

Posted by: Jacques Distler on March 3, 2010 1:38 PM | Permalink | PGP Sig | Reply to this

Re: RadRails

Jaques wrote:

Still, a set of instructions for working with Instiki in RadRails (or some other IDE) would be most welcome.

Understood, can’t promise anything right now though.

Jaques wrote:

Demanding that people use a particular IDE, if they want to participate, would raise the barrier to entry, rather than lower it.

Yes, of course. Eclipse needs metadata to handle projects, e.g. it needs to store the information that a project is a rails project and is deployed in a specific runtime etc. But that information stays with the developer, it won’t be checked in. There are plugins for Eclipse for differenct concurrent version systems that interact with a remote or local repository via the local client installation of that version system, so that you can check out and check in sources from and to the repository using Eclipse and the corresponding client - e.g. a command line tool - interchangebly and completly transparent from the viewpoint of the repository server.

I’m currently involved in several Java projects where some developers use Eclipse, some use IntelliJIDEA (that’s a commercial product, sorry, no surreptitious advertising intended), we synchronize via a subversion repository without problems.

Posted by: Tim van Beek on March 4, 2010 1:54 AM | Permalink | Reply to this

Re: WYSIWYG SVG Editing In Instiki

Ha, ‘the best damned piece of software’ nice, this really is impressive work.

Posted by: Justin on March 5, 2010 2:38 PM | Permalink | Reply to this

Re: WYSIWYG SVG Editing In Instiki

I came across this blog post while trying to find a solution for editing preexisting SVG images and loading them on a Cairo (http://cairographics.org/)surface.

Is it possible to utilise SVG-Edit and load the SVG onto a Cairo surface for editing or is it only possible on the client side?

I am developing an application whereby I must rescale existing SVG graphics and place these graphics onto the cairo surface at predetermined X,Y, Co-ordinates and I am having a hard time trying to find a solution to load the SVG graphics so any help would be appreciated.

Thanks
Jason Xuereb
Webmaster Labels Australia

Posted by: Jason on November 25, 2010 3:00 AM | Permalink | Reply to this

Post a New Comment