menu

Thursday, 19 December 2013

Improve your experience by adding svg graphic editor to your website


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.

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"
/>
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 rollout 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"
/>