is a universal SVG renderer

NPM version Build Status Dependency Status Change log


Description | Installation | Usage | Api | License


Thanks to React it is feasible to achieve server side rendering SVG. However, there are few common pit falls. In order to avoid them this package implements the following features:

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.

For instance do

npm install react react-dom babel-cli

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 = (
  <svg width={200} height={200}>
    <circle cx={100} cy={100} r={50} />

const svgOutput = render(jsx, { doctype: true, xmlns: true })



render = svgx(renderer)

Static render function: it works server side.

render(jsx[, opts])

Static render function: it works server side.