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

Edited by Neo Mann, Charmed, Lynn, Anonymous and 9 others

This is probably the coolest free add-on you can embed into your website in 120 seconds or less. 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.

Was this helpful? Yes | No | I need help

Ad

Demo of the latest version

SVG is in active development with 26 contributing members, monthly conference calls etc. Take a quick peek at a demo of the newest version in development. I don't recommend you use this one on your website but its fun to look at. I recommend you use the latest stable release instead.

Was this helpful? Yes | No | I need help

Embed SVG Graphic Editor using an iframe from the latest stable version via svn

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.

Was this helpful? Yes | No | I need help

<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:

Was this helpful? Yes | No | I need help

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

Was this helpful? Yes | No | I need help

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

Was this helpful? Yes | No | I need help

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.

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.

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.

Was this helpful? Yes | No | I need help

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.

Was this helpful? Yes | No | I need help

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

Comments

VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.




Neomann
Premier Author
1 Articles Started
38 Article Edits
2,900 Points
Neomann is a premier author with VisiHow. Neomann has achieved the level of "Corporal" with 2,900 points. Neomann has started 1 articles (including this one) and has also made 38 article edits. 5,700 people have read Neomann's article contributions.
Neomann's Message Board
Neomann: Hi, my name is Neomann.
Neomann: Can I help you with your problem about "Improve your user's experience by adding svg graphic editor to your website in less than 2 minutes"?
 

Article Info

Categories : Software

Recent edits by: mishra.manohar791, Doug Collins, imraniq786

Share this Article:

Thanks to all authors for creating a page that has been read 5,786 times.

Do you have a question not answered in this article?
Click here to ask one of the writers of this article
x

Thank Our Volunteer Authors.

Would you like to give back to the community by fixing a spelling mistake? Yes | No