aboutsummaryrefslogtreecommitdiffstats
path: root/README.md
diff options
context:
space:
mode:
authorwout <wout@impinc.co.uk>2012-12-17 19:51:47 +0100
committerwout <wout@impinc.co.uk>2012-12-17 19:51:47 +0100
commitfcab9dc4d28abb27b166b7974bf07de0f9fa9fc2 (patch)
tree1961429f880d0dde756664c4c345e558c97c910a /README.md
parent8dfec33b4fa79b89d89a07e3ae92c5d5c5f8ce73 (diff)
downloadsvg.js-fcab9dc4d28abb27b166b7974bf07de0f9fa9fc2.tar.gz
svg.js-fcab9dc4d28abb27b166b7974bf07de0f9fa9fc2.zip
Slimmed down SVG.Shape
Diffstat (limited to 'README.md')
-rw-r--r--README.md31
1 files changed, 30 insertions, 1 deletions
diff --git a/README.md b/README.md
index 23f9d79..30b8289 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,41 @@
# svg.js
-svg.js is a JavaScript library for manipulating SVG.
+svg.js is a small JavaScript library for manipulating SVG.
Have a look at [svgjs.com](http://svgjs.com) for a examples.
svg.js is licensed under the terms of the MIT License.
+## Usage
+
+### Create a SVG document
+
+Use the svg() function to create a SVG document within a given html element:
+
+```javascript
+var draw = svg('paper').size(300, 300);
+var rect = draw.rect({ width:100, height:100 }).attr({ fill: '#f06' });
+```
+The first argument can either be an id of the element or the selected element itself.
+This will generate the following output:
+
+```html
+<div id="paper">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" width="300" height="300">
+ <rect width="100" height="100" fill-color="#f06"></rect>
+ </svg>
+</div>
+```
+
+### Path elements
+
+```javascript
+var path = draw.path({ data: "M10,20L30,40" }).attr({ fill: '#9dffd3' });
+```
+
+For more details on path data strings, check SVG documentation:
+http://www.w3.org/TR/SVG/paths.html#PathData
## Compatibility