is a universal SVG renderer

Description | Installation | Usage | Api | License

NPM version Build Status Dependency Status JavaScript Style Guide Change log


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

const svgOutput = render(jsx)



render = svgx(renderer)

Static render function: it works server side.

render(jsx[, opts])

Static render function: it works server side.