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
<!-- draw canvas graphics here --> <!-- embed svg markup here --> <!-- SVG addon for g2 -->
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:
node.js
Example for var fs = g2 = // load 'g2'. x = // load 'g2.svg'. ctx = width:200height:100 // provide context including viewport size. g = stylels:"green"fs:"orange"lw:3 // create g2 object and add style. // add rectangle. ; // render as svg. fs;
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 ...
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.