The svg2js command-line usage is shown below.
Usage: svg2js [options] (- | <svg uri or filename>) [<js filename>]
Options:
-h | --help Print this usage message and examples and exit --trace Print render engine calls to standard output --draw-func <name> Set the name of the javascript draw function (default 'sjs_draw') --dsize <width>x<height> Default dimensions if SVG doesn't define a width or height (default 450.0x450.0) --list-images Print external image URIs to standard output --rel-uri Use relative URIs for images relative to the document URI --image-base <uri> Use relative URIs for images relative to the given URI whilst only keeping the image file name
The following illustrates the command-line for converting a source SVG document, example.svg,
to a target javascript file, example.js,
svg2js example.svg example.js
The same can be achieved using the stdin (identified using -) and stdout streams,
cat example.svg | svg2js - >example.js
svg2js also accepts an SVG document URI. For example,
svg2js http://www.w3.org/TR/SVG11/images/paths/arcs02.svg example.js
The --trace option is useful for understanding how the SVG document content is mapped to function calls in the render engine API (svg.h). It prints out the function calls and parameters, the URI of the source document (in_document and out_document) and the client application calls to render an element (begin_render and end_render). The element name and line number are shown in brackets (<>) after the begin_group and begin_element calls. The following illustrates the --trace option:
svg2js --trace http://www.w3.org/TR/SVG11/images/struct/Use03.svg example.js >Use03.trace.txt
The result is the following trace output: Use03.trace.txt.
The javascript code is contained within a function, with a string parameter that identifies the <canvas> element. Use the --draw-func <name> option to set the name of this function. This function can be called in the onload event handler on the <body> element - see the examples for an example.
Some SVG documents don't define a width or height, or they define them as a percentage. The --dsize <width>x<height> option allows you to set a different default dimension for these cases.
It is sometimes useful to copy referenced image files to another location relative to the HTML page containing the <canvas>. The --list-images prints the image URIs to standard output and something like curl can be used to copy the files. Use this option in combination with --rel-uri or --image-base to modify the URI referencing the image file.