Tooling and workflows for generating SVGs with JavaScript modules. Includes a hostable GUI to edit the modules in real time.
npm install --global svgscript
Usage: svgscript [command] [path-to-file/dir]
[path-to-file/dir] is either a "*.svg.js" file,
a "targets.yaml" file, or a directory.
Commands:
compile - Compile a SvgScript file and print to stdout
compile-in-place - Compile file(s) / directory in place
make - Build SVGs specified in targets YAML file
watch - Watch a file / directory and compile in place
serve - Start server which hosts SVGs in the browser
Options:
--options=[YAML] - Icon options to customize SVG output
Try it out with following command which compiles all modules in place:
git clone https://github.com/ad-si/svgscript
svgscript compile-in-place svgscript/examples
Or following command which displays them with an interactive SVG viewer:
svgscript serve svgscript/examples
Or build SVGs as described in a targets YAML file:
svgscript make svgscript/examples/targets.yaml
SvgScript modules are simply ECMAScript modules with specific methods and properties. SvgScript modules must have following features:
-
File ending:
<file-name>.svg.js
-
Should export following properties and methods:
targetVersion
: Semver version-string of the target-version of SvgScriptdefault function
: Returns a valid svg file as a string
-
Optional methods:
component()
: Exports the main group-component of the graphicdefaults(defaultsObject)
: Get or set the default configuration values of the graphicconfig(configObject)
: Overwrite default configuration of graphic parameters or get current configuration
- sketch-n-sketch - Direct manipulation programming system for HTML and SVG.
- svgsus - SVG organizer and optimizer for macOS.
- youidraw - Vector graphic design webapp.