Self-contained SVG image and editor

[GoogleCodeExporter]

TiddlyWiki is a self-contained HTML page that contains both the document
and the code to edit itself: http://en.wikipedia.org/wiki/TiddlyWiki

It might be worthwhile to explore the possibility of using SVG-edit core in
this way.  This would be another side-project like the Firefox extension,
Opera widget, and Google Wave gadget.

In other words, I can pass around an SVG file (foo.svg).  That file can be
viewed in a SVG viewer (OSX's Finder, for instance).  That file can be
opened in a desktop editor (like Inkscape).  That file can be imported into
a tool that supports SVG (OpenOffice, for instance).

However, foo.svg will also contain script elements such that when the file
in opened in a browser, an "edit" button is included somewhere.  If
clicked, the script will add the SVG-edit editor _around_ the SVG file and
let the user edit it using SVG-edit.

This is just a concept at the moment.  There are some challenges:

  * editors might strip off <script> elements such that they cannot be
round-tripped (i.e. saving the file in Inkscape destroys the SVG-edit code)
  * the SVG-edit editor is HTML-based (if the browser opens a SVG file, can
the root document type be switched?)

Some more discussion and the original idea submission can be found
[http://he.dynalias.net/irc-logs/index.php?date=2009-09-09 here]

Original issue reported on code.google.com by codedr...@gmail.com on 10 Sep 2009 at 3:26

[GoogleCodeExporter]

As a proof-of-concept, a very quick TW file has been kindly made by the people 
of
http://www.tiddywiki.com/ . ( ericshulman on freenode/#tiddywiki )

It's very basic: no addon, just the MarkupPostHead, to include the CSS and 
script
files, plus the HTML pasted into a tiddler.

Unzip the file, then add the .html file where the other files of svg-edit lie, 
and
open it with your browser.

(There are problems, of course. It's a proof-of-concept) :)

Original comment by worms_...@yahoo.com on 10 Sep 2009 at 4:29

Attachments:

• TW+svg-edit.zip

[GoogleCodeExporter]

Updated TW+svg-edit.html file, thanks to Eric Shulman
It required a TiddlyWiki plugin for the inline JavaScript.

It now "works"... the application loads almost normally, you can select icons 
and
draw shapes... but any keyboard keystroke fires a reload of the page :-)

Original comment by worms_...@yahoo.com on 12 Sep 2009 at 5:10

Attachments:

• TW+svg-edit.html
• tiddlywiki_svg-edit_3.jpg

[GoogleCodeExporter]

Maybe a first step would be to embed svg-edit in a bookmarklet ?

Original comment by pro...@gmail.com on 19 Feb 2010 at 5:41

[GoogleCodeExporter]

proppy - go for it (and attach to this bug!) :)

Original comment by codedr...@gmail.com on 19 Feb 2010 at 5:47

[GoogleCodeExporter]

Here is a bookmarklet that replace svg document root with an html one:

javascript:(function()%20{var%20svg%20=%20document.firstChild;var%20html%20=%20d
ocument.createElement('html');var%20body%20=%20document.createElement('body');do
cument.replaceChild(html,%20svg);html.appendChild(body);body.appendChild(svg);}(
))

Original comment by pro...@gmail.com on 19 Feb 2010 at 6:08

[GoogleCodeExporter]

Nice... but how do you use it? :-)

Original comment by worms_...@yahoo.com on 19 Feb 2010 at 6:25

[GoogleCodeExporter]

I'm working on TiddlyWiki5 at http://www.tiddlywiki.com/tiddlywiki5/ and 
http://github.com/Jermolene/TiddlyWiki5

It uses embedded SVG files as part of a scheme to make graphics be a first 
class citizen in a wiki. I plan to 
incorporate code to re-render (simple) images into VML for internet explorer, 
and integrate basic editing 
capabilities. I'm learning a lot about SVG - eg having to fix ID references 
within SVG documents before bringing 
them directly into the DOM. 

Original comment by jeremy.r...@gmail.com on 19 Feb 2010 at 6:29

[GoogleCodeExporter]

@wormsxulla:
# copy paste the javascript:(...) string into a new bookmark
# load svg-edit
# do some drawings
# save as data uri
# view source
# doc root should be svg
# click the bookmarklet
# view source
# doc root should be html
# body firt child is the original svg document

Original comment by pro...@gmail.com on 19 Feb 2010 at 6:39

[GoogleCodeExporter]

Next step would be to inject svg-edit js and markup into the html document.

Original comment by pro...@gmail.com on 19 Feb 2010 at 6:50

[GoogleCodeExporter]

Oh dear. SVG-edit injection! :-)

Original comment by worms_...@yahoo.com on 19 Feb 2010 at 6:54

[GoogleCodeExporter]

Hi folks,

Isn't this a security concern?  I would like to know why it might not be so I 
can revisit this.

Patrick Dengler

Original comment by alexissp...@gmail.com on 24 Aug 2010 at 3:08

[GoogleCodeExporter]

Related:

Clipperz is a "single page app", for password management:
https://clipperz.is/blog/2013/05/17/jsday_talk_single_page_web_app/

Original comment by marclaporte on 10 Feb 2014 at 5:25