Curve

Curve is a vector drawing library providing a layer of user interaction tools over SVG. It is used in an Electron-based vector drawing app called Curve.app.

Built on top of svg.js.

Will load any svg file
Will serialize (save!) the loaded svg file
Can create paths (pen tool), rectangles, and ellipses
Can select and modify paths, rectangles, and ellipses

Running the example

python -m SimpleHTTPServer 8080
Load up http://localhost:8080/examples/example.html

Usage

Curve is built with browserify and works in the browser, and node.js and Electron applications.

In the browser

The only dependency is svg.js which is bundled in curve.js and curve.min.js. Download curve.js or curve.min.js, and include it in your page

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Curve App</title>
  <script src="curve.min.js"></script>
</head>
<body>
  <div id="canvas"></div>
</body>
</html>

Then in your JS:

var doc = new Curve.SVGDocument("canvas")
var svgString = "<svg .....>...</svg>"
doc.deserialize(svgString)
doc.initializeTools()

In a node/io.js or Electron app

npm install --save curve

And it works similarly

var SVGDocument = require('curve').SVGDocument

var canvas = document.createElement('div')
var doc = new Curve.SVGDocument(canvas)
var svgString = "<svg .....>...</svg>"
doc.deserialize(svgString)
doc.initializeTools()

Browser support

Officially tested on Chrome

Testing/Building

Requires grunt npm install -g grunt-cli
Install grunt modules npm install
Automatically compile changes grunt watch
Run tests with npm test

License

MIT License

Shadoworker / curve