Closed GoogleCodeExporter closed 9 years ago
Hi,
Your main issue will basically be the saving and loading part only. It's what
I'm working on at the moment...
Saving:
For saving, are you aiming to be cross-browser? Currently the easiest solution
is to convert the SVG into data: URI, open it in a new tab and user will have
to right-click -> save as manually. There is just no way for you to get
filesystem access due to security reason.
If you don't mind integrating flash, use Downloadify[1], at least you can set a
default name and it will pop-up a file dialog to save. That's what I did.
Loading:
SVG-Edit has a default set of elements/tags that it will whitelist. So your
custom attribtues and namespaces will most likely be stripped. Change this in
sanitize.js.
For file selection dialog, use HTML input element, with accept attribute set to
"image/*", multiple attribute set to allow multi-selection, and make sure to
not use display: none; on it, Webkit will not like that. Instead use position:
absolute and put it off-screen. Then create a new SVG-Edit mode button that
will call $('#inputID').change().
You can also use HTML5 Drag 'n Drop feature[2], which I find more preferable.
If you care only about FireFox and Chrome, and you have big -- I mean BIG --
images to load, then checkout ObjectURL[3]. After a lot of testing and
profiling I ended up using this method instead of other JS alternatives.
---
If you want an easy life, focus on 1 browser -- I recommend Chrome. They're the
only one that supports FileSaver API[4], which lets you save to local *in a
sandboxed environment*.
As you can see, your issue is much more on the JS/HTML5 side rather than
SVG-Edit.
Whenever I'm happy with my extension for big images edit/save/load I'll put it
up here for your reference.
Good luck, there will be a lot of debugging and profiling.
[1] https://github.com/dcneiner/Downloadify
[2] http://www.html5rocks.com/en/tutorials/dnd/basics/
[3]
https://developer.mozilla.org/en/Document_Object_Model_(DOM)/window.URL.createOb
jectURL
[4] http://www.html5rocks.com/en/tutorials/file/filesystem/
Original comment by asyazwan
on 17 Feb 2012 at 1:01
I'm going to mark this closed as asyazwan's comment answers the question far
better than I could :)
Original comment by codedr...@gmail.com
on 22 Feb 2012 at 5:39
Original issue reported on code.google.com by
mehtapra...@gmail.com
on 17 Feb 2012 at 11:48