search

rebootcode / svg-edit

Automatically exported from code.google.com/p/svg-edit
MIT License
0 stars 0 forks source link

How to store image and svg file in local drive in svg-edit? #905

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 

i want to use svg editor in my final year project in college for image purpose 
used in our project. we want to store svg file in local drive so in editing 
mode we can change this image.so, please help me for this summary.

Original issue reported on code.google.com by mehtapra...@gmail.com on 17 Feb 2012 at 11:48

GoogleCodeExporter commented 8 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

GoogleCodeExporter commented 8 years ago 
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