npm package: @goessner/g2-svg
Description: g2-svg - SVG addon for g2
Author: Stefan Goessner
Latest version: 0.3.2

[![License](http://img.shields.io/:license-mit-blue.svg)](https://github.com/goessner/g2/license.txt)
[![npm](https://img.shields.io/npm/v/@goessner/g2-svg.svg)](https://www.npmjs.com/package/@goessner/g2-svg)

# g2.svg

g2-svg is an [SVG](http://www.w3.org/Graphics/SVG/) addon for [_g2_](https://github.com/goessner/g2).
Maybe you want to [learn more](https://github.com/goessner/g2) about _g2_, a 2D graphics command queue library.

## Example

```html
<canvas id="c" width="200", height="100"></canvas>         <!-- draw canvas graphics here -->
<span id="svg" data-width="200" data-height="100"></span>  <!-- embed svg markup here -->
<script src='g2.js'></script>
<script src='g2.svg.js'></script>                          <!-- SVG addon for g2 -->
<script>
    g2().rec(40,30,120,40,{ls:"green",fs:"orange",lw:3})     // create g2 object, add rectangle with style.
        .exe(document.getElementById("c").getContext("2d"))  // render to canvas.
        .exe(document.getElementById("svg"));                // render as svg to 'span' element.
</script>
```
![canvas %amp; svg](img/rects.png)

In order to create SVG output _g2_'s `exe` command can be used. `exe`'s first argument must always be a
suitable rendering context. For providing such a rendering context we have two possibilities:

SVG Container | Example | Comment
-------- |------- | ---
Any HTML container element | `<div data-width="200" data-height="100"></div>` | `data-width` and `data-height` attributes have to be provided in order to specify the viewport size. The SVG markup will be inserted into that element then via `innerHTML`. So previous content gets overwritten. 
Any Javascript object | `{ width:200, height:100 }` |  An arbitrary javascript object providing at least both a `width` and a `height` property. The SVG markup will be written as a string to a new or existing `svg` property of that object.

The Javascript object or HTML container element has to provide viewport size values.

The SVG output of the example above reads:
```html
<svg width="200" height="100" fill="transparent" stroke="black" 
     font-family="serif" font-style="normal" font-size="12" font-weight="normal">
  <g stroke="green" fill="orange" stroke-width="3">
    <rect x="40" y="30" width="120" height="40"/>
  </g>
</svg>
```

You can combine _g2_ and SVG in two variants.

Use case | File | Comment
-------- |------- | ---
Addon | `g2.svg.js` | Use if you want both - canvas and SVG rendering. 
Standalone | `g2svg.js` |  Prefer if you don't want canvas rendering or in an environment missing canvas like `node.js`.


## Example for `node.js`
```javascript
var fs = require('fs'),
    g2 = require('./g2.js'),                      // load 'g2'.
    x  = require('./g2.svg.js'),                  // load 'g2.svg'.
    ctx = {width:200,height:100},                 // provide context including viewport size.
    g = g2().style({ls:"green",fs:"orange",lw:3}) // create g2 object and add style.
            .rec(40,30,120,40)                    // add rectangle.
            .exe(ctx);                            // render as svg.

fs.writeFile("./rec.svg", ctx.svg, function(err) { if(err) return console.log(err); });
```

## Tests

See this growing table of [test cases](https://goessner.github.io/g2-svg/test/index.html) with canvas and svg output side by side.

## GitCDN
Use the link [https://gitcdn.xyz/repo/goessner/g2-svg/master/g2.svg.min.js](https://gitcdn.xyz/repo/goessner/g2-svg/master/g2.svg.min.js)
for getting the latest commit as a raw file.

In HTML use ...
```html
<script src="https://gitcdn.xyz/repo/goessner/g2-svg/master/g2.svg.min.js"></script>
```

# License
`g2.svg` is licensed under the terms of the MIT License.


#Change Log

## 0.3.2 - 2016-06-20
### Added

* `g2.spline` performing 'centripetal Catmull-Rom' interpolation.

### Modified

* experimental `g2.State.hatch` fill style removed.

## 0.3.0 - 2016-02-01

### Added

* `style` argument for elements `lin`,`rec`,`cir`,`arc`,`ply`.
* `style` as first argument for `stroke`,`fill` and `drw`, optionally followed by a svg path definition string.


## 0.2.0 - 2016-01-10

### Added

    CHANGELOG.md @goessner.