Article Edit Discuss

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

You do not have permission to edit this page, for the following reason:

Image temporarily unavailable

Your user name or IP address has been blocked by Visihow Admin.

The reason given is "Spam comments".

If you believe that this block was made in error, you may appeal the block by emailing (include your user name in the subject). Please understand that, unless you can show that you were editing in good faith, your appeal will not receive a reply.

If you are using AOL or another Internet Service Provider that uses proxies, your IP may have been autoblocked. In the future, you can register an account to avoid being blocked unintentionally.

Please include the following information in any queries:

Your user name (if applicable)
Your current IP address (127.0.0.1)
Your Block ID (#7889)

You can view and copy the source of this page:

''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.

 <iframe src="http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html" width="800" height="700">
 </iframe>


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.

 <iframe src="http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html" width="800" height="700">
 </iframe>


=== 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''

VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.

===How to svg edit install to the database?===
'''''I want to create white board by using svg-edit'''''

It will only work if you are using Internet Explorer version 6, 7, or 8.  You can also make it work with other types of svg plugins.

<!--QID:201405310647465691-->
===I have downloaded the src files, but it doesn't work in the browser IE11?===
''When I open the svg-editor.html, what it display is just the frame, no pictures or response''

VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.

<!--QID:201409171832014494-->
===Followed all steps : I have a simple wordpress site. Failed to embed svg edit. Help requested?===
''The iFrame does not show up in chrome or any other''

VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.

===Who do I contact for development of an Online Print Editor using SVG-edit?===
''Want to create an Online Print Editor similar to http://design.nextdayflyers.com/tool.php#template_id=12489&theme_id=39''

VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.

===Embed paint tools on an image in webpage?===
''I want to use paint tools to an image in a webpage. I want to make markings on the image in webpage''

VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.

===Saving as png without using the browser, and save on the server?===
''Hi,, ''Sorry for my poor English. Normally speaking Flemish and I have not learned English at school. In my project I use SVG-edit to create a drawing that insert into a pdf file. I use PHP and FPDF, but FPDF can not display SVG files in pdf, so I want to convert them to png, which can be inserted well. My users only want to use 'save' button to save the image. In the config file, I have not found anything to put in it. Hope you understand my problem, there might be and turnkey solution exists. Thanks in advance.''

VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.

=== Are there special requirements for running SVGedit at the webserver? ===
'' Hello, I want to build a little frame at my workpress-website, which is not built yet. I'll offer the webspace today. The webspace I prefer can handle wordpress, PHP 5.4 (PHP 5.3 and PHP5.5 also) and has many other features. Are there some special requirements for running SVGedit at the webserver? Best regards. ''

VisiHow QnA. This section is not written yet. Want to join in? Click EDIT to write this answer.


[[category:Software]]

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

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

Meet a Community Member

- collapse Things to Do

+ expand Places to Visit

Follow Us On...

Explore Categories