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