SVGx
is a universal SVG renderer
Description | Installation | Usage | Api | License
Description
Thanks to React it is feasible to achieve server side rendering SVG. However, there is a pit fall: doctype is missing. This package prepends a doctype to generated SVG.
Actually, this package is also a recipe to render and test SVG server side.
You can try this example.js script, by launching commands
git clone https://github.com/fibo/SVGx.gitcd SVGxnpm installnpm run example
It generates the following SVG output
Installation
With npm do
npm install svgx
Usage
Installing react
and react-dom
is up to you: svgx
does not declare
them as dependencies, cause you could use a different version or even
other React-like engine. Same logic applies to awesome babel packages, you
could use any other transpiler.
Anyway, to get the job done, you can do
npm install react react-dom babel-cli babel-env --save-dev
Then run the following script with babel.
#!/usr/bin/env babel-node const render = const jsx = <svg xmlns='http://www.w3.org/2000/svg' xmlnsXlink='http://www.w3.org/1999/xlink' width=200 height=200 > <circle cx=100 cy=100 r=50 /> </svg> const svgOutput = console
NOTA BENE: Attributes xmlns
and xmlnsXlink
are mandatory to get a valid SVG file.
API
svgxRender = svgx(jsxRender)
Get your svgx wrapper.
/** * @param * @return */
svgxRender(jsx[, opts])
Wrapper for static JSX render function: it works server side.
/** * @param * @param * @param * @return */