g2d-svg
v0.3.5
Published
g2-svg - SVG addon for g2
Downloads
6
Maintainers
Readme
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>
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 elementslin
,rec
,cir
,arc
,ply
.style
as first argument forstroke
,fill
anddrw
, optionally followed by a svg path definition string.
0.2.0 - 2016-01-10
Added
CHANGELOG.md @goessner.