javascript drawing tool based on svg-edit

!! This is excerpt of of requirement. Please check the attached pdf for full details !!


I'd like to have a javascript 2D vector drawing tool to be used on our web site. Searching around, I found great svg-edit project ([url removed, login to view]) which has majority of features that I would need in the long term future. Indeed it has too rich features that it is quite complex for non-experts. I wish to have much simpler GUI and simpler tools so that normal people can enjoy casual drawings/scribblings. And I’d like to add a few extra features to serve my purpose.


Develop non-self-intersecting path tool plug-in

I would like to have a special version of tool similar to svg-edit’s path tool, proving capability to draw and edit polygon (closed path) which does not self-intersect and always located within the canvas area.

Develop straight line pencil tool plug-in

I’d like to have a pencil tool based on svg-edit’s pencil tool (#tool_fhpath). This new tool should only produce line commands (whereas the original pencil tool produce curve commands).

Develop simplified GUI of svg-edit 2.6

#tools_left: Among many drawing tools that svg-edit offers, I would only need “Select Tool”, “Straight line pencil tool” and “Non-self-intersecting path tooll” described above. Please hide other tools such as Line tool, Rectangle tool, Ellipse tool, Path tool, Shape library, Text tool, Image tool, Zoom tool and Eye dropper tool.

Extend [url removed, login to view] and prepare example html

I’d like to use this drawing tool to be embedded in a web page as iframe just like svg-edit’s embedapi.html.

Upon initilization, I’d like to have following default values to be set: Stroke color: ff0000, Stroke width: 4, etc

I’d like to have a special functions that set stroke width, stroke color and fill color of all path objects in svg at once (to be defined by extending [url removed, login to view]). Another special function I’d like to have is to get node positions of all path objects in SVG in this JSON format.

What you provide as a developer:

* Review the requirement document and provide feedback

* Frequent (once in two days) short status update about what you did and what you are working on

* [url removed, login to view] to demenstrate this new 2D vector drawing tool embeded as iframe, some ’s to demenstrate change of stroke width/color and fill color change of all path objects, a to show all path node positions in JSON string.

* all javascript (and other) codes to make [url removed, login to view] work in non-minified format

* all javascript (and other) codes to make [url removed, login to view] work in minified format

* test codes


Use svg-edit 2.6 as the basis of the tool

[url removed, login to view]

(It is nice if the tool is built on top of svg-edit 2.6 without modifying original code so that it would be easier to upgrade base svg-edit version later.)

Please add reasonable amount of comments in the code so that I can maintain and further develop the code.


All the outcome of the project belong to the project manager. I’d be happy to discuss if any part of the development would be benefitial to contribute back to the original svg-edit project. If we reach agreement, you could make contributions in your name.

As I plan to run business utilizing this tool, there might be opportunities for more projects in the future to add new features.

Length: I’d expect the project to complete in three weeks; 1st week to review requirment and develop plug-in tools, 2nd week to develop GUI, 3rd week to debug and complete the project.

Budget: $300

Milestone payments:

1st milestone: 5% for review requirements, provide feedback and agree project details

2nd milestone: 20% for submitting plug-in tools for testing

3rd milestone: 25% for submitting overall product for testing

4th milestone: 50% for completing the project

Skills: AJAX, HTML, HTML5, iPhone, Javascript

See more: html svg drawing tools, within my capability, what to use node.js for, what is business casual, what is a intersecting line, what is a intersect, web site development tool, web page developer tool, web development positions, web developer tools 2013, web developer positions, web developer path, web developer on line, web canvas developer, vector vector string, vector string, vector library, vector intersect, use of node.js, two line intersect

About the Employer:
( 8 reviews ) Urayasu-shi, Japan

Project ID: #5023844

Awarded to:


Your requirement's description is so very detailed. But we need to spend amount time to clear some functions as: - How to setup values (stroke color, fill color, size thickness) into the button to change [login to view URL] obje More

$250 USD in 8 days
(0 Reviews)

4 freelancers are bidding on average $277 for this job


Dear Hiring Manager, I'm a mobile applications development team manager and a developer myself too, and I'm very interested in your job post involving these skills. Our team has recently worked in iOS/Android apps de More

$300 USD in 6 days
(71 Reviews)

Hello There, Greetings..!! I am Sophie Rome working in a leading Mobile Application Development Company i.e. NTechnosoft Solutions from last 5 years * Client repeatation ratio is more than 85% because of Quality More

$257 USD in 5 days
(6 Reviews)

hi, i have great expertise in iPhone and all the other mobile platform also. and also i manage a big team of mobile developers. Also i have succesfully developed many iPhone applications and delivered to client. pls More

$300 USD in 10 days
(0 Reviews)