g2d-svg v0.3.5

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:

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>

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.5 - 2016-08-04

Added

• earc elliptical arc command added.

0.3.4 - 2016-07-01

Modified

• use command execution simplified.
• styling bug with g2.prototype.use removed.

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.