is a universal SVG renderer

Description | Installation | Usage | Api | License

NPM version No deps JavaScript Style Guide Change log


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
cd SVGx
npm install
npm run example

It generates the following SVG output

SVG example


With npm do

npm install svgx


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

import React from 'react'
import reactDom from 'react-dom/server'
import svgx from 'svgx'

const render = svgx(reactDom.renderToStaticMarkup)

const jsx = (
    width={200} height={200}
    <circle cx={100} cy={100} r={50} />

const svgOutput = render(jsx)


NOTA BENE: Attributes xmlns and xmlnsXlink are mandatory to get a valid SVG file.


svgxRender = svgx(jsxRender)

Get your svgx wrapper.

  * @param {Function} jsxRender function, for instance `reactDom.renderToStaticMarkup`
  * @return {Function} svgxRender wrapper

svgxRender(jsx[, opts])

Wrapper for static JSX render function: it works server side.

  * @param {ReactElement} jsx to be rendered.
  * @param {Object} [opts] Options can be omitted, just ignore them and it will work fine.
  * @param {String} [opts.doctype] defaults to a common SVG doctype. You can remove it by setting it to the blank string `''` or any other doctype you need.
  * @return {String} markup in SVG format