Article Edit Discuss

Improve your user's experience by adding svg graphic editor to your website in less than 2 minutes

You are not logged in so your IP address will be recorded in this page's edit history. You may login or create an account.

''This is probably the coolest free add-on you can embed into your website in 120 seconds or less.  [http://code.google.com/p/svg-edit/ SVG is a free open source vector graphics editor] that is much more powerful than you might first think. You may be surprised that it has layers.  You can load graphics in just by clicking and dragging them in. It does not yet allow you edit graphic files you bring in, but you can use these images as objects in your graphic creation. SVG even supports layers.  The following instructions will help you learn how to embed this graphics editor into your website in just a couple minutes. I will also show you how you can alternatively download the source and serve it up yourself.  In addition, as time permits, additions will be made to this wiki, including a few of the features it will bring to your user's experience when they visit your website.''

== Embed SVG Graphic Editor using an iframe from the latest stable version via svn ==
[[Image:_Embed_SVG_Graphic_Editor_using_an_iframe_from_the_latest_stable_version_via_svn_70162.jpg]]

You can embed directly from svn the latest stable release which has the added benefit of always serving the latest version without the need for you to do anything.

Alternatively you can choose to embed a particular release directly from svn.  This way you can checkout new versions before releasing them to your website visitors.  Once you are comfortable you want to roll-out the new version you can simply change the version number to the latest branch.

=== Load SVG Graphic Editor onto your own server ===
Hosting SVG yourself is easy as well.  It takes only marginally longer to install the source code on your server.  Assuming you have ssh access to your server, and that your server has two very common utilities, wget and unzip, instructions are as follows:

sh-4.2$ mkdir svg
 sh-4.2$ CD svg
 sh-4.2$ wget http://svg-edit.googlecode.com/files/svg-edit-2.6.zip
 
 ... wget output not shown for your comfort ...
 
 sh-4.2$ unzip svg-edit-2.6.zip
 
 ... files not shown for your comfort ...
 
 sh-4.2$ CD svg-edit-2.6
 sh-4.2$ mv * ..
 sh-4.2$ CD ..

Now browse to http://yourdomain.com/svg/svg-editor.html

You should see the SVG-Edit app running in your browser.

== Tips Tricks & Warnings ==

* Using the iframe embedded technique has the added benefit of instant upgrades to the latest version as they become available.  On the other hand if this project were to change its release format, or release a new version with bug, your users would be adversely affected.
* If you choose to download SVG and host it on your server, don't forget to check for updates periodically to give your users the added benefit of newly released features.
* All major browsers are supported native wise except, you guessed it, i.e. which requires the [https://developers.google.com/chrome/chrome-frame/ Chrome Frame Plugin]
* Consider donating to this project, it is seriously cool to have this kind of power in a web browser.

==Questions and Answers==
===Using partial features of svg-editor in my application?===
''Hi, I want to develop an web application with some of the graphics feature I see in the svg editor. I want a minimal part which will be useful in my project. Do I have to simply download the code and modify it or is there some library and API's which I can use to get different feature which can be used in my project. how does it work ? 
Thanks & Regards''