g2.svg

g2-svg is an SVG addon for g2. Maybe you want to learn more about g2, a 2D graphics command queue library.

Example

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

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:

<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

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 with canvas and svg output side by side.

GitCDN

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

In HTML use ...

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